Three.js 中的简单片段着色器答案

【问题标题】：Simple Fragment shader in Three.jsThree.js 中的简单片段着色器
【发布时间】：2016-01-11 17:47:41
【问题描述】：

我正在研究 Three.JS 中的着色器并尝试创建一个简单的电视静态效果。据我了解，我需要使用片段着色器作为网格中的材质。

我很难从教程切换到 Three.js 环境，因为事情是不确定的。我的问题似乎是位置变量未设置为统一，但我不确定如何执行此操作。

控制台错误：.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS true gl.getProgramInfoLog Varying 'position' has static-use in the frag shader, but is undeclared in the vert shader.

着色器：

<script type="x-shader/x-fragment" id="static">
        uniform float time;
        varying vec2 position;

        float rand(vec2 co){
            return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
        }

        void main()
        {
            vec2 uv = position.xy;
            float r = floor(rand(uv * time / 2.0) + 0.5);
            gl_FragColor = vec4(r, r, r, 1.0);
        }
</script>

JS：

var camera, scene, renderer, geometry, material, mesh, uniforms;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CylinderGeometry(100, 100, 20, 32);

    debugMaterial = new THREE.MeshNormalMaterial();

    uniforms = {
      time: { type: 'f', value: 0 }
    };

    var shaderMaterial = new THREE.ShaderMaterial({
      uniforms: uniforms,
      fragmentShader: document.getElementById('static').innerHTML
    });

    mesh = new THREE.Mesh(geometry, shaderMaterial);
    /* toggle the mesh variable to see the object */
    //mesh = new THREE.Mesh(geometry, debugMaterial);

    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render(delta) {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    uniforms.time += delta * 10;

    renderer.render(scene, camera);

}

render();

所需效果：圆柱几何体上的以下像素着色器。

Fiddle（输出是空白的，虽然我已经包含了一个 debugMaterial，所以你只需切换 mesh = 行来查看预期的几何图形）：https://jsfiddle.net/z688644L/2/

【问题讨论】：

像往常一样，我似乎在发布此 \ 的几分钟内修复了它：我使用 gl_FragCoord.xy 代替位置，时间统一值是 NaN，所以我确保它始终是号码。
您可以在 shaderfrog shaderfrog.com/app/view/7 中测试 3d 对象上的着色器，并将它们直接导出到 three.js。用于保存/调试游戏效果。

标签： three.js glsl webgl shader

【解决方案1】：

看起来你没有顶点着色器。通过将position 声明为varying，您就是在告诉系统该向量来自顶点着色器。你需要一个简单的顶点着色器来设置一个变量（你必须重命名它，因为position 已经在顶点着色器中定义了），以便你的片段着色器可以拾取它：

<script id="vertShader" type="shader">
varying vec2 vPosition;
void main() {
    vPosition = position.xy;
    gl_Position = projectionMatrix *
                  modelViewMatrix * vec4(position, 1.0 );
}
</script>

我已将position 重命名为vPosition，因此请相应地调整片段着色器。另外，我还没有对此进行测试，所以买者警告。它绝对不能处理灯光或类似的东西。这只是让你开始的东西。

【讨论】：