Questions tagged [shadermaterial]
24 questions
4
votes
1 answer
Three.js ShaderMaterial lighting not working
I'm experimenting with Three.js ShaderMaterial and trying to implement lighting.
I have working code for r70 but the same code (with minor changes - the MAX_POINT_LIGHTS constant has been renamed NUM_POINT_LIGHTS) doesn't work for r76.
Looking at a…
CarlBateman
- 151
- 1
- 12
3
votes
2 answers
Threejs DataTexture Not Updating
UPDATE: Issue was that texData object was recreated each time and thus reference for DataTexture was lost. Solution by WestLangley was to overwrite the data in texData instead of recreating texData object.
I have a simple threejs scene with a…
Nikole
- 322
- 3
- 17
2
votes
1 answer
Image rendered from useLoader @react-three/fiber using shaderMaterial has different color from its original color
Here is my problem, my project is generated from create-react-app, followed by some @react-three/fiber and glsl dependencies, I render simple planeBufferGeometry and for the material I use shaderMaterial
here is code for planeBufferGeometry:…
Reynald Lamury
- 165
- 1
- 2
- 9
2
votes
1 answer
ThreeJS Points (Point Cloud) with Lighting using custom Shader Material
Coded using:
Using ThreeJS v0.130.1
Framework: Angular 12, but that's not relevant to the issue.
Testing on Chrome browser.
I am building an application that gets more than 100K points. I use these points to render a THREE.Points object on the…
Pawan Pillai
- 1,955
- 5
- 37
- 64
2
votes
0 answers
THREE.js Adding Fog to ShaderMaterial
I'm fairly new to JS and particularly Shaders in Three.js. At this moment I'm just trying to enable fog on the ShaderMaterial used in the Birds example here http://threejs.org/examples/#webgl_gpgpu_birds . I'm building an an underwater based app so…
DTids
- 110
- 3
- 11
1
vote
0 answers
Three js - shaders on scroll
I'm trying to integrate the 3d object found on this codrops demo: https://tympanus.net/Tutorials/ShadersOnScroll/.
I'm trying to get the same effect but I would like the object to stay the same color even on a white background, this is my demo on…
user823415
- 57
- 1
- 5
1
vote
0 answers
THREE.JS postprocessing: Duplicating postprocessed shader material to render properly on different meshes in the same scene
Think of my question as a more complicated version of this question here:
Three.js, sharing ShaderMaterial between meshes but with different uniform sets
tl;dr: I'm relying on a skin shader from THREE.js r100 to enable subsurface scattering on the…
R-yurew
- 102
- 7
1
vote
1 answer
Three.js. How do I use a custom material for a scene background rather then color or texture?
The docs for scene say a color or texture can be used for scene.background. I would like to use a ShaderMaterial with my own custom shaders. How can I do this?
Specifically, I want to paint a color ramp behind the foreground elements. Here is the…
dugla
- 12,774
- 26
- 88
- 136
1
vote
1 answer
threejs metaballs with dot shader
I am trying to test a simple dot shader in ThreeJS made by 2pha : https://2pha.com/demos/threejs/shaders/simple_dots.html
It seems to not work properly for metaballs using Marching Cubes : https://threejs.org/examples/webgl_marchingcubes.html.
Is…
compmonks
- 647
- 10
- 24
1
vote
0 answers
Three.js shaderMaterial add texture to particles
I am trying to add a texture to the particles i create using BufferGeometry in three.js.
I believe I am loading the material correctly, and that the issue is in my fragment shader but cannot figure this out as I am new to three.js. I managed to get…
Phillip Hogan
- 123
- 1
- 2
- 9
1
vote
1 answer
How can I add multiple vertex shaders to a ShaderMaterial?
When creating a ShaderMaterial in THREEJS, you pass the fragment and vertex shaders:
new THREE.ShaderMaterial({
uniforms: {
time: { value: 1.0 },
resolution: { value: new THREE.Vector2() }
},
attributes: {
…
LcSalazar
- 16,524
- 3
- 37
- 69
0
votes
0 answers
Three.js - custom fragment shaders break/overwrite self shadows. How do I get self shadows to work with custom shaders? is there another approach?
I am loading a GLB file that has a map object and plane object. I have a custom shader that I am applying to the map object to create a vertical color gradient. When I load the custom shader material onto the map object, the map no longer self…
Robert Rice
- 1
- 1
0
votes
0 answers
Convert depth index of Data3Texture to z-coordinate of NDC
I want to clip a Data3DTexture (with width, height, depth) at a specific depth, so only render at this depth position and hide all other layers.
I adapt the clipping method from this idea (text ) to VolumeShader provided in ThreeJs.
The volume…
Toto
- 9
- 4
0
votes
0 answers
THREEJS: Depth order between Mesh object with shader material (with volume rendering) and other mesh objects is always wrong
I'm using Threejs to create a medical-volume-rendering app. I'm using a shadermaterial to define the volume rendering of a body and for the single rois (region of interest) and other extern objects I'm using basic or phong-materials with defined…
Michel
- 1
0
votes
0 answers
How to add particular texture to particular faces of BoxGeometry using ShaderMaterial in THREE.JS?
I am trying to add texture for each face of BoxGeometry.
I have tried passing an array of ShaderMaterial object into the mesh but its not working.
createMaterials(texture){
return new ShaderMaterial({
uniforms:{
texture:{
value:texture
…
Satyam Raikwar
- 35
- 9