封装webgl初始化着色器函数

封装webgl初始化着色器函数_第1张图片

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>Documenttitle>
  <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')

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

  // 顶点着色器源码
  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) // 点
  //gl.drawArrays(gl.LINES, 0, 1) // 线
  //gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形
script>

html>

你可能感兴趣的:(WebGL,webgl,着色器)