Geek Answers Handbook

Three js Shader Material change depth buffer

In three js, I use a vertex shader to animate large geometry.

I also created the effect of depth of field in the output. The problem is that the depth of field effect does not seem to know about the positioning change created in my vertex shader. He reacts as if the geometry is in its original position.

How do I update the depth information in my shader / material so that the DOF function works correctly? THREE.Material has the depthWrite property, but it doesn't seem to be that way ...

My depth of field pass works like this:

renderer.render( this.originalScene, this.originalCamera, this.rtTextureColor, true );

this.originalScene.overrideMaterial = this.material_depth;
renderer.render( this.originalScene, this.originalCamera, this.rtTextureDepth, true );

rtTextureColor and rtTextureDepth are WebGLRenderTargets. For some reason rtTextureColor is right, but rtTextureDepth is not

here is my vertex shader:

int sphereIndex = int(floor(position.x/10.));

            float displacementVal = displacement[sphereIndex].w;
            vec3 rotationDisplacement = displacement[sphereIndex].xyz;

            vNormal = normalize( normalMatrix * normal );
            vec3 vNormel = normalize( normalMatrix * viewVector );
            intensity = abs(pow( c - dot(vNormal, vNormel), p ));


            float xVal = (displacementVal*orbitMultiplier) * sin(timeValue*rotationDisplacement.x);
            float yVal = (displacementVal*orbitMultiplier) * cos(timeValue*rotationDisplacement.y);
            float zVal = 0;

            vec3 rotatePosition = vec3(xVal,yVal,zVal);

            vec3 newPos = (position-vec3((10.*floor(position.x/10.)),0,0))+rotatePosition;
            vec4 mvPosition;
            mvPosition = (modelViewMatrix *  vec4(newPos,1));

            vViewPosition = -mvPosition.xyz;
            vec4 p = projectionMatrix * mvPosition;
            gl_Position = p;
+4
1

(this.originalScene.overrideMaterial = this.material_depth) this.rtTextureDepth, . - THREE.MeshDepthMaterial, .

THREE.ShaderMaterial, THREE.MeshDepthMaterial, . , - :

var depthShader = THREE.ShaderLib['depth'];
var uniforms = THREE.UniformsUtils.clone(depthShader.uniforms);

var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: /* your custom vertex shader */
    fragmentShader: depthShader.fragmentShader
});

, ; WebGLRenderer.js three.js MeshDepthMaterial.

+1

More articles:


All Articles