在Three js中，我使用顶点着色器为大型几何图形设置动画。
我还在输出上设置了景深效果。问题在于景深效果似乎不了解在我的顶点着色器中创建的更改位置。它的响应就像几何体处于原始位置一样。
如何更新着色器/材质中的深度信息，以便DOF正常工作？THREE.Material具有depthWrite属性，但事实并非如此……
我的景深通行证是这样的：
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和rtTextureDepth都是WebGLRenderTargets。由于某种原因，rtTextureColor是正确的，但rtTextureDepth不正确
这是我的顶点着色器：
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;
由于您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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句