0

前一阵子（想让我们试试浏览器）我做了一个小的three.js测试，它绘制了一个带有2个自定义着色器的四边形来玩弄。撕掉一些示例代码，放入着色器，瞧。我直接从 Github 嵌入了 three.js，所以我当然容易出现迁移问题 :)

事情是这样的：几周后重新访问后，我的制服停止工作（使用 WebGL-Inspector 验证，它们都是零，而之前由 three.js 上传的制服仍然很好）。

正如 WebGL-Inspector 所确认的：

0   projectionMatrix    1   FLOAT_MAT4  
[ 1.000000000,  0.000000000,  0.000000000,  0.000000000, 
  0.000000000,  1.000000000,  0.000000000,  0.000000000, 
  0.000000000,  0.000000000, -0.002000200,  0.000000000, 
  0.000000000,  0.000000000, -1.000200033,  1.000000000 ] 
1   modelViewMatrix 1   FLOAT_MAT4  
[ 1.000000000,  0.000000000,  0.000000000,  0.000000000, 
  0.000000000,  1.000000000,  0.000000000,  0.000000000, 
  0.000000000,  0.000000000,  1.000000000,  0.000000000, 
  0.000000000,  0.000000000, -0.100000001,  1.000000000 ]
2   u_resolution    1   FLOAT_VEC2  
    [ 0.000000000,  0.000000000 ]
3   u_time  1   FLOAT     0.000000000
4   u_aspectRatio   1   FLOAT     0.000000000

这是“代码”（当谈到所有网络事物时，我有点像个傻瓜，所以不要抑制任何可能指出其他愚蠢行为的冲动=））：

<!-- 
next: texture!
also, it doesn't work anymore =) (uniforms are invalid?)
-->

<html>
<head>
    <title>taste the browser!</title>
    <style>canvas { width: 100%; height: 100% }</style>

    <script type="text/javascript" src="../WebGL-Inspector/core/embed.js">        </script>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js">  </script>
</head>

<body>
    <script id="vertexShader" type="x-shader/x-vertex">
//          varying vec2 v_UV;

        void main() {
//              vUV = uv;
            gl_Position = projectionMatrix * modelViewMatrix *     vec4(position, 1.0);
        }
    </script>

    <script id="fragmentShader" type="x-shader/x-fragment">
        uniform float u_aspectRatio;
        uniform float u_time;
        uniform vec2  u_resolution;

//          varying vec2 v_UV;

        void main() 
        {
            vec2 p = -1.0 + 2.0*(gl_FragCoord.xy/u_resolution);

            // cheapest trick in the book #1: tunnel
            float r = sqrt(dot(p, p));
            float a = atan(p.y, p.x); // abs(a)/3.1416
            float flower = r + 0.2*sin(a*4.0 + u_time);

            // cheapest trick in the book #2: 2D blobs
            vec2 blob1 = vec2(sin(u_time*0.66), cos(u_time*0.96));
            vec2 blob2 = vec2(cos(u_time*0.75 + 1.4), sin(u_time*0.4 - 3.0));
            vec2 dist1 = p - blob1;
            vec2 dist2 = p - blob2;
            dist1 *= 2.0; dist2 *= 3.0;
            float energy = 1.0/dot(dist1, dist1) + 1.0/dot(dist2, dist2);
            energy = pow(energy, 4.0);

                gl_FragColor = vec4(energy, flower, u_time, 1.0);
        }
    </script>

    <script>
        // initialize renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // setup scene & camera
        var scene = new THREE.Scene();
        var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);

        // setup uniforms
        var myUniforms = { 
            aspectRatio: { type: "f", value: window.innerWidth/window.innerHeight },
            time: { type: "f", value: 0.0 },
            resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
        };

        // build plane with custom shader material
        var geometry = new THREE.PlaneGeometry(2, 2, 1, 1);
        var material = new THREE.ShaderMaterial(
            {
                uniforms: myUniforms,
                attributes: null, 
                vertexShader: document.getElementById('vertexShader').textContent, 
                fragmentShader: document.getElementById('fragmentShader').textContent }
            );
        var plane = new THREE.Mesh(geometry, material);
        scene.add(plane);

        // anything non-zero will do
        camera.position.z = 0.1;

        // create timer
        var timer = new THREE.Clock(true);

        // render loop func.
        function render() {
            // update & render
            myUniforms.time.value = timer.getElapsedTime(); // % 1.0;
            renderer.render(scene, camera);

            // req. next frame
            requestAnimationFrame(render);
        }

        render();
    </script>
</body>
</html>

对此的任何指示：非常欢迎！

（是的，那是 1 个丑陋的着色器；））

4

1 回答 1

2

您的制服变量名称与着色器中的变量名称不匹配。

var myUniforms = { 
    u_aspectRatio: { type: "f", value: window.innerWidth/window.innerHeight },
    u_time: { type: "f", value: 0.0 },
    u_resolution: { type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
};
于 2013-04-11T18:12:38.893 回答