封装WebGL初始化着色器函数

夏暖冬凉

已于 2024-03-27 10:23:38 修改

阅读量213

点赞数 1

分类专栏： Web3D 文章标签： webgl 着色器

于 2023-05-08 17:46:20 首次发布

本文链接：https://blog.csdn.net/qq_45487080/article/details/130564009

版权

Web3D 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

function initShader (gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
	// 创建着色器
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    
	// 绑定数据源
    gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE);
    gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE);

    // 编译着色器
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);

    // 创建着色器程序
    const program = gl.createProgram();

	// 绑定着色器
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);

	// 连接着色器
    gl.linkProgram(program);
    // 使用着色器
    gl.useProgram(program);

    return program;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./initShader.js"></script>
</head>

<body>
  <canvas id="canvas" width="300" height="400">
    不支持canvas
  </canvas>
</body>

<script>
  const ctx = document.getElementById('canvas')
  const gl = ctx.getContext('webgl')
  // 声明颜色 rgba
  gl.clearcolor(0, 0, 0, 1);
  // 刷底色
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 着色器： 通过程序代替固定的渲染管线，来处理图像的渲。着色器分为两种
  // 顶点着色器：顶点理解为坐标
  // 片元着色器：像素（颜色，纹理）

  // 顶点着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 必须要存在 main 函数 (浮点数)
    void main() {
      // 要绘制的点的坐标
      // x, y, z, w齐次坐标(x/w, y/w, z/w)
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      // 点的大小
      gl_PointSize = 10.0;
    }  
  `
  // 片元着色器源码
  const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }   
  `
  // 创建着色器
  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  // 执行绘制
  // gl.drawArrays(mode, first, count);
  gl.drawArrays(gl.POINTS, 0, 1) // 点 (参数2：从哪个点开始，参数3：绘制需要使用到多少个点)
  //gl.drawArrays(gl.LINES, 0, 1) // 线
  //gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形
</script>

</html>

夏暖冬凉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
封装WebGL初始化着色器函数

/gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形。// x, y, z, w齐次坐标(x/w, y/w, z/w)// 着色器：通过程序代替固定的渲染管线，来处理图像的渲。//gl.drawArrays(gl.LINES, 0, 1) // 线。// 必须要存在 main 函数 (浮点数)// 片元着色器：像素（颜色，纹理）// 要绘制的点的坐标。// 顶点着色器：顶点理解为坐标。// 顶点着色器源码。// 片元着色器源码。
复制链接

扫一扫