0

しばらく前に (何かブラウザーを試してみようと考えて)、2 つのカスタム シェーダーを使用してクワッドを描画する小さな three.js テストを作成しました。いくつかのサンプル コードをリッピングし、シェーダーを入れてください。私は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 に答える