While working with Three js, I have implemented a vertex shader to animate a large geometry.
Additionally, I have incorporated a Depth of Field effect into the output. However, I am encountering an issue where the Depth of Field effect does not seem to recognize the altered positioning from my vertex shader. It is behaving as if the geometry is still in its original position.
Is there a way to update the depth information in my shader/material to ensure that the DOF functions correctly? I have explored the depthWrite property in THREE.Material, but it does not appear to be the solution...
For reference, the depth of field pass is executed as follows:
renderer.render( this.originalScene, this.originalCamera, this.rtTextureColor, true );
this.originalScene.overrideMaterial = this.material_depth;
renderer.render( this.originalScene, this.originalCamera, this.rtTextureDepth, true );
The rtTextureColor and rtTextureDepth are both WebGLRenderTargets. Oddly enough, rtTextureColor appears to be correct, whereas rtTextureDepth is not.
Here is the vertex shader I am working with:
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;