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行代码。

顶点位移在Three.js中不起作用

1 个答案: