WebGL编程指南12-通过片元着色器内置变量gl_FragCoord验证内插过程

最新推荐文章于 2023-08-21 14:14:27 发布

鸡米工程师

最新推荐文章于 2023-08-21 14:14:27 发布

阅读量520

点赞数 1

分类专栏： WebGL编程指南文章标签：着色器 javascript 前端

本文链接：https://blog.csdn.net/weixin_46773434/article/details/126837661

版权

WebGL编程指南专栏收录该内容

32 篇文章 6 订阅

订阅专栏

// 顶点着色器程序
var VSHADER_SOURCE = `attribute vec4 a_Position;
    void main() {
	gl_Position = a_Position;
	// gl_PointSize = 10.0; //由于只在绘制Point的时候有效，所欲可以去掉
}`;

// 片元着色器程序
var FSHADER_SOURCE = `
    precision mediump float;
    uniform float u_Width;
    uniform float u_Height;
    void main() {
	gl_FragColor = vec4(gl_FragCoord.x/u_Width, 0, gl_FragCoord.y/u_Height, 1.0);
}`;

const main = () => {
  let count = 0.1;
  //获取绘制dom
  const canvas = document.getElementById("webgl");

  //获取canvas上下文
  const gl = canvas.getContext("webgl");

  //初始化着色器
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    return console.log("Failed to initialize shaders.");
  }
  const initVertexBuffers = (gl) => {
    //类型化数组设置顶点坐标
    const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);

    const n = 3; //点的个数

    //创建缓冲区对象
    const vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
      console.log("Failed to create the buffer object");
      return -1;
    }

    //将缓冲区对象绑定到目标
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    //向缓冲区对象中写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    const a_Position = gl.getAttribLocation(gl.program, "a_Position");

    const u_Width = gl.getUniformLocation(gl.program, 'u_Width');
    const u_Height = gl.getUniformLocation(gl.program, 'u_Height');
    if ( !u_Width || !u_Height ) {
        console.error('Failed to get the uniform location!');
        return ;
    }
    gl.uniform1f(u_Width, 400.0);
    gl.uniform1f(u_Height, 400.0);

    //将缓冲区对象分配给a_Position变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

    //链接a_Position变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(a_Position);

    return n;
  };
  const n = initVertexBuffers(gl);
  if (n < 0) {
    console.error("n<0");
    return;
  }

  //设置canvas的背景色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  //清空canvas

  gl.clear(gl.COLOR_BUFFER_BIT);

  //绘制一个点
  gl.drawArrays(gl.TRIANGLES, 1, 3);
};
main();