在 Three js 中,我使用顶点着色器为大型几何体制作动画。
我还在输出上设置了景深效果。问题是景深效果似乎不知道在我的顶点着色器中创建的更改定位。它的响应就像几何体处于原始位置一样。
如何更新我的着色器/ Material 中的深度信息,以便 DOF 正常工作? THREE.Material 有一个 depthWrite 属性,但它似乎不是......
我的景深 channel 是这样工作的:
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.rtTextureDepth
之前设置了场景覆盖 Material (this.originalScene.overrideMaterial = this.material_depth
),所以渲染器不会使用您的自定义顶点着色器。场景覆盖 Material 是 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
});
您必须为自定义顶点着色器添加制服,并为内置深度着色器设置制服;在 three.js 源代码中搜索 WebGLRenderer.js
以获取 MeshDepthMaterial
。
关于javascript - 三个js Shader Material修改深度缓冲,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29896983/