Javascript 三个js着色器材质修改深度缓冲区
在三个js中,我使用顶点着色器为大型几何体设置动画 我还对输出设置了景深效果。问题是景深效果似乎不知道在“顶点着色器”中创建的已更改位置。它的响应就像几何体处于原始位置一样 如何更新着色器/材质中的深度信息,以便DOF正常工作?第三,这种材料有深灰色的属性,但看起来并不是 我的景深通行证的工作原理如下:Javascript 三个js着色器材质修改深度缓冲区,javascript,three.js,Javascript,Three.js,在三个js中,我使用顶点着色器为大型几何体设置动画 我还对输出设置了景深效果。问题是景深效果似乎不知道在“顶点着色器”中创建的已更改位置。它的响应就像几何体处于原始位置一样 如何更新着色器/材质中的深度信息,以便DOF正常工作?第三,这种材料有深灰色的属性,但看起来并不是 我的景深通行证的工作原理如下: renderer.render( this.originalScene, this.originalCamera, this.rtTextureColor, true ); this.orig
renderer.render( this.originalScene, this.originalCamera, this.rtTextureColor, true );
this.originalScene.overrideMaterial = this.material_depth;
renderer.render( this.originalScene, this.originalCamera, this.rtTextureDepth, true );
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
});
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
之前设置了场景覆盖材质(this.originalScene.overrideMatary=this.material\u depth),因此渲染器不使用自定义顶点着色器。场景覆盖材质是一个包含其自己的顶点着色器的材质
要尝试的一件事是编写一个类似于THREE.MeshDepthMaterial
但使用自定义顶点着色器的。修改内置着色器并不简单,但我将从以下内容开始:
renderer.render( this.originalScene, this.originalCamera, this.rtTextureColor, true );
this.originalScene.overrideMaterial = this.material_depth;
renderer.render( this.originalScene, this.originalCamera, this.rtTextureDepth, true );
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中重新计算它们吗?我对置换贴图有同样的问题否法线是精细的我正在使用类似的技术:但景深(bokeh2)没有看到新位置是this.material\u depth this.MeshDepthMaterial的实例吗?