最后一个示例中如何使用“texcoord”?

问题描述 投票:0回答:0

关于这里的样品:

https://webglfundamentals.org/webgl/lessons/webgl-qna-how-to-import-a-heightmap-in-webgl.html

texcoord 在创建点网格时设置

         const u0 = x / cellsAcross;
         const v0 = z / cellsDeep;
         const u1 = (x + 1) / cellsAcross;
         const v1 = (z + 1) / cellsDeep;

然后通过顶点着色器:


  attribute vec4 position;
  attribute vec3 normal;
  attribute vec2 texcoord;

  uniform mat4 projection;
  uniform mat4 modelView;

  varying vec3 v_normal;
  varying vec2 v_texcoord;

  void main() {
    gl_Position = projection * modelView * position;
    v_normal = mat3(modelView) * normal;
    v_texcoord = texcoord;
  }

到片段着色器:

  precision highp float;

  varying vec3 v_normal;
  varying vec2 v_texcoord;
  varying float v_modelId;

  void main() {
    vec3 lightDirection = normalize(vec3(1, 2, -3));  // arbitrary light direction

    float l = dot(lightDirection, normalize(v_normal)) * .5 + .5;
    gl_FragColor = vec4(vec3(0,1,0) * l, 1);
  }

它看起来像是掉落的地方---我没看错吗?

我很快就会编写代码,然后看看我是否可以使用纹理。

webgl
© www.soinside.com 2019 - 2024. All rights reserved.