webgl/三个js着色器错误

Question

我是来问你三个 js 中遇到的问题。 我尝试制作视差映射。

顶点着色器：

varying vec3 v_pos;
  varying vec3 v_nrm;
  varying vec2 v_txc;

  void main(){
    v_pos = position;
    v_nrm = normal;
    v_txc = uv;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
  }

片段着色器：

  uniform vec3 camPos;
  uniform sampler2D heightMap;
  uniform sampler2D textureDiffuse;
  uniform float bumpness;

  varying vec3 v_pos;
  varying vec3 v_nrm;
  varying vec2 v_txc;

  float ApplyChainRule( float dhdu, float dhdv, float dud_, float dvd_ )
  {
      return dhdu * dud_ + dhdv * dvd_;
  }

  vec3 SurfaceGradient( vec3 n, vec3 dpdx, vec3 dpdy, float dhdx, float dhdy )
  {
      vec3 r1 = cross( dpdy, n );
      vec3 r2 = cross( n, dpdx );
      float det = dot( dpdx, r1 );

      return ( r1 * dhdx + r2 * dhdy ) / det;
  }
   
  void main()
  {
      vec3 wsViewDir = normalize( camPos - v_pos );
      vec3 wsNormal = normalize( v_nrm );
       
      vec3 dpdx = dFdx( v_pos );
      vec3 dpdy = dFdy( v_pos );
   
      vec2 uv = v_txc;
      vec2 duvdx = dFdx( uv );
      vec2 duvdy = dFdy( uv );
   
      // here will be the POM code
       
      vec2 dhduv = texture2D( heightMap, uv ).rg;
      dhduv = ( dhduv * 2.0 - 1.0 ) * bumpness;
       
      float dhdx = ApplyChainRule( dhduv.x, dhduv.y, duvdx.x, duvdx.y );
      float dhdy = ApplyChainRule( dhduv.x, dhduv.y, duvdy.x, duvdy.y );
       
      wsNormal = normalize( wsNormal - SurfaceGradient( wsNormal, dpdx, dpdy, dhdx, dhdy ) );

      gl_FragColor = vec4(texture2D( textureDiffuse, uv )+(wsNormal * 0.5 +0.5),1.0);
   
      // here will be the lighting and shading code
  }

我有这个错误：

THREE.WebGLShader: gl.getShaderInfoLog() 片段错误: 0:? : '' : 语法错误

我找不到我的错误，你能帮我吗？

谢谢 ;)

Answer 1

你的意思是：

gl_FragColor = texture2D(textureDiffuse, uv) + vec4(wsNormal * 0.5 + 0.5, 1.0);