javascript – 三个js着色器材质修改深度缓冲区

发布时间:2020-08-01 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了javascript – 三个js着色器材质修改深度缓冲区脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在三个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.

总结

以上是脚本之家为你收集整理的javascript – 三个js着色器材质修改深度缓冲区全部内容,希望文章能够帮你解决javascript – 三个js着色器材质修改深度缓冲区所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!