在三个j中,我使用顶点着色器为大几何体设置动画.
我还在输出上设置了景深效果.问题是,景深效果似乎不知道在我的顶点着色器中创建的更改位置.它的响应就像几何体处于原始位置一样.
如何更新着色器/材质中的深度信息以使DOF正常工作? THREE.Material有一个depthWrite属性,但似乎不是……
我的景深传递效果如下:
renderer.render( this.originalScene,this.originalCamera,this.rtTextureColor,true ); this.originalScene.overrideMaterial = this.material_depth; renderer.render( this.originalScene,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))+rotatePosition; vec4 mvPosition; mvPosition = (modelViewMatrix * vec4(newPos,1)); vViewPosition = -mvPosition.xyz; vec4 p = projectionMatrix * mvPosition; gl_Position = p;
解决方法
因为在渲染到this.rtTextureDepth之前设置了场景覆盖材质(this.originalScene.overrideMaterial = this.material_depth),渲染器不会使用您的自定义顶点着色器.场景覆盖材质是
THREE.MeshDepthMaterial
,其中包含自己的顶点着色器.
要尝试的一件事是编写一个类似于THREE.MeshDepthMaterial的THREE.ShaderMaterial
,但使用您的自定义顶点着色器.修改内置着色器并不简单,但我会从这样的事情开始:
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 });
您必须为自定义顶点着色器添加制服,并为内置深度着色器设置制服;在MeshDepthMaterial的three.js源代码中搜索WebGLRenderer.js.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。