Question

我正在Three.js中创建一个地形。我没有太多的GLSL经验，因此很难创建一个基于顶点高度混合各种颜色的着色器。

到目前为止，我有此功能，这是行不通的。我收到错误消息：

THREE.WebGLShader: Shader couldn't compile.
WebGLShader @ bundle.js:18176
bundle.js:18182 THREE.WebGLShader: gl.getShaderInfoLog() fragment ERROR: 0:253: 'mapTexelToLinear' : no matching overloaded function found
ERROR: 0:253: '=' : dimension mismatch
ERROR: 0:253: 'assign' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'

我对着色器或术语的了解不足，无法理解。但是，如果有人可以从下面的代码中告诉我我需要解决的问题，那么最终我将绞尽脑汁，以了解更多信息。

   vertexShader(){
        return `
            varying vec3 vUv; 

            void main() {
              vUv = position; 

              vec4 modelPosition = modelMatrix * vec4(position, 1.0);
              gl_Position = projectionMatrix * viewMatrix * modelPosition; 
            }
        `
    }

    fragmentShader(){
        return `
            precision mediump float;
            varying vec3 vUv;

            vec3 color_from_height( const float height ) {
                vec3 terrain_colours[4];
                terrain_colours[0] = vec3(0.0,0.0,0.6); 
                terrain_colours[1] = vec3(0.1, 0.3, 0.1);
                terrain_colours[2] = vec3(0.4, 0.8, 0.4);
                terrain_colours[3] = vec3(1.0,1.0,1.0);

                if (height < 0.0){
                    return terrain_colours[0];
                } else {
                    float hscaled = height*2.0 - 1e-05; // hscaled should range in [0,2]
                    int hi = int(hscaled); // hi should range in [0,1]
                    float hfrac = hscaled-float(hi); // hfrac should range in [0,1]
                    if (hi == 0)
                        return mix( terrain_colours[1],terrain_colours[2],hfrac); // blends between the two colours    
                    else
                        return mix( terrain_colours[2],terrain_colours[3],hfrac); // blends between the two colours
                }

                return vec3(0.0,0.0,0.0);
            }

            void main() {
                vec2 uv = gl_FragCoord.xy / iResolution.xy;
                vec3 col = color_from_height(uv.y*2.0-1.0);
                gl_FragColor = vec4(col, 1.0);
            }
        `
    }

    returnTerrainObj(){
        const terrainGeom =  new THREE.PlaneBufferGeometry( 7500, 7500, this.worldWidth - 1, this.worldDepth - 1 ),
              // texture = new THREE.CanvasTexture( this.generateTexture( this.data, this.worldWidth, this.worldDepth ) ),
              texture = new THREE.ShaderMaterial({
                fragmentShader: this.fragmentShader(),
                vertexShader: this.vertexShader()
              }),
              terrain = new THREE.Mesh( terrainGeom, new THREE.MeshBasicMaterial({ map: texture }) );
        let   vertices = terrainGeom.attributes.position.array;

        terrainGeom.rotateX( - Math.PI / 2 );

        for ( var i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
            vertices[ j + 1 ] = this.data[ i ] * 10;
        }

        texture.wrapS = THREE.ClampToEdgeWrapping;
        texture.wrapT = THREE.ClampToEdgeWrapping;

        return terrain;
    }
    ```

根据顶点高度为片段着色（Three.js着色器）

0 个答案: