顶点置换在 Three.js 中不起作用

Question

上周我一直在试验 Three.js 和 WebRTC，感觉我已经用尽了关于这个主题的文档。我正在尝试将uniform sampler2D tDiffuse; 映射到这个顶点着色器。 tDiffuse 中每个像素的亮度应该映射到输出的每个顶点上的顶点位移。但我收到以下错误：ERROR: 0:80: 'constructor' : not enough data provided for construction

现在，此着色器在模型渲染后位于效果管道中。我需要指定宽度和高度还是我遗漏了什么？我从几个不同的来源拼凑而成的代码有问题吗？我什至可以在此效果管道中进行顶点位移，还是需要以不同的方式将着色器应用于场景中的网格？我了解我需要做的事情背后的理论，但是 GLSL 以及这个 three.js 管道对我来说是新的，尽管我在类似的图形应用程序方面有很多经验。

THREE.RuttEtraShader = {

    uniforms: {

        "tDiffuse": { type: "t", value: null },
        "opacity":  { type: "f", value: 1.0 }
    },



    vertexShader: [

    'uniform sampler2D tDiffuse;',
    'varying vec3 vColor;',
    "varying vec2 vUv;",

    'void main() {',
        'vec4 newVertexPos;',
        'vec4 dv;',
        'float df;',
        "vUv = uv;",
        'dv = texture2D( tDiffuse, vUv.xy );',
        'df = 0.30*dv.x + 0.59*dv.y + 0.11*dv.z;',
        'newVertexPos = vec4( normalize( position ) * df * 10.0 ) + vec4( position, 1.0 );', 
        'vColor = vec3( dv.x, dv.y, dv.z );',

        'gl_Position = projectionMatrix * modelViewMatrix * newVertexPos;',
    '}'

    ].join("\n"),

    fragmentShader: [

        "uniform float opacity;",

        "uniform sampler2D tDiffuse;",

        "varying vec2 vUv;",

        "void main() {",

            "vec4 texel = texture2D( tDiffuse, vUv );",
            "gl_FragColor = opacity * texel;",

        "}"




    ].join("\n")

};

Answer 1

实际上，您的 GLSL 编译器是脑死的。

这行有问题：normalize (position) ...，因为您尚未声明职位。它没有给你一个有用的信息来解释这一点，而是抱怨position 没有合适的尺寸。

这当然假设您实际上已经粘贴了正确的顶点/片段着色器。我不相信，因为这些着色器都没有 80 行代码。