Question

我遇到了一个问题，我试图将自定义着色器材质应用于一系列嵌套对象，以模拟每个节点周围的发光效果。效果在我的家用笔记本电脑上很好用（Windows 8.1最新的Chrome），但是我的工作电脑不能渲染发光物体的正面，只能渲染背面。我已经针对一些系统进行了检查，它似乎主要是Windows设备上的chrome渲染问题。 http://i.imgur.com/uYLtoxm.gif

我已经包含了一个codepen示例，其中我将光线移到了侧面，您可以看到在某些版本中它不会渲染前面的法线组。红点应该有一个发光应用于每个正面和背面（在示例中为左和右）。任何帮助将不胜感激，我对发生的事情感到难过。

Here is the shader material settings
local.glowNodeMat = new THREE.ShaderMaterial( 
        {
            uniforms: 
            { 
                "c":   { type: "f", value: 0 },
                "p":   { type: "f", value: 5.5 },
                glowColor: { type: "c", value: new THREE.Color(0xaaccff) },
                viewVector: { type: "v3", value: local.camera.position }
            },
            vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
            fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
            side: THREE.FrontSide,
            blending: THREE.AdditiveBlending,
            transparent: true
        });

http://codepen.io/sniejadlik/pen/oDarE

/////////////////// 感谢Volune。谢谢你的帮助！

修复了顶点着色器

<script id="vertexShader" type="x-shader/x-vertex">
    uniform vec3 viewVector;
    uniform float c;
    uniform float p;
    varying float intensity;
    void main() 
    {
        vec3 vNormal = normalize( normalMatrix * normal );
        vec3 vNormel = normalize( normalMatrix * viewVector );
        // incorrect intensity = pow( c - dot(vNormal, vNormel), p );
        intensity = pow( abs(c - dot(vNormal, vNormel) ), p );

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
    </script>

    <!-- fragment shader a.k.a. pixel shader -->
    <script id="fragmentShader" type="x-shader/x-vertex"> 
    uniform vec3 glowColor;
    varying float intensity;
    void main() 
    {
        vec3 glow = glowColor * intensity;
        gl_FragColor = vec4( glow, 1.0 );
    }
</script>

Answer 1

错误发生在您的顶点着色器中：

intensity = pow( c - dot(vNormal, vNormel), p );

您有c = 0和p = 0.5。 c - dot(vNormal, vNormel)可能为负数（当点积返回正值时），因此您尝试获取负值的平方。

由于某些未知原因，Firefox中的回退看起来像pow( abs(...), 0.5 )，而Chrome中的回退似乎是0.0。

尝试像这样修复着色器：

intensity = pow( abs( c - dot(vNormal, vNormel) ), p );

Three.js发光着色器前脸不能在chrome中渲染，适用于其他浏览器

1 个答案: