webGL 入门 画个点

Colin 2月前 ⋅ 88 阅读
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webgl学习笔记</title>
</head>
<body>

<canvas id="paper" height="500" width="500"></canvas>


  let lesson = 2;

  // 第一课 清屏 clear
  if (1 == lesson) {
    document.title = " 清屏 ";

    /*-
     * 获得画布DOM元素
     */
    let canvas = document.getElementById("paper");

    /*-
     * 返回一个用于在画布上绘图的环境
     * 可选参数: 2d
     *          webgl 基于 OpenGL ES 2.0
     *          webgl2 基于 OpenGL ES 3.0
     *          bitmaprenderer 位图处理
     * 除此之外的参数,返回null
     *
     * 注意:千万别写错,区别于getContent
     */
    let gl = canvas.getContext("webgl");

    /*-
     * 清空绘图区域 也就是指定canvas的背景色
     * gl.clearColor(r, g, b, a)	无返回值	(r,g,b,a)是颜色值和透明度,范围是(0.0 - 1.0),超出范围则截断为最大或最小值
     */
    gl.clearColor(0.0, 1.0, 1.0, 1.0);

    /*-
     * 用背景色填充,擦出已经绘制的内容
     * 可选参数:
     *    gl.COLOR_BUFFER_BIT(颜色缓存)
     *    gl.DEFTH_BUFFER_BIT(深度缓冲区)
     *    gl.STENCIL_BUFFER_BIT(模板缓冲区)
     */
    gl.clear(gl.COLOR_BUFFER_BIT);

  }

  // 第二课 着色器入门  顶点着色器 和 片元着色器 Shader
  if (2 == lesson) {

    document.title = " 画个点 ";
    let canvas = document.getElementById("paper");
    let gl = canvas.getContext("webgl");

    // 1 , 顶点着色器(vertexshader):它是用来描述顶点特性(如位置、颜色等)的程序。顶点是指二维或三维空间中的一个点;
    let VERTEX_SHADER = "" +
      // GLSL 
      "void main(){" +
      // 定义位置  坐标 -1 到 1 ;
      "gl_Position=vec4(0.0 /* 水平左右 -1.0 至 1.0 之间 */ , 0.0 /* 垂直上下 -1.0 至 1.0 之间 */ , 1.0 , 1.0);" +
      // 定义尺寸
      "gl_PointSize=30.0;" +
      "}";

    // 2 , 片元着色器(fragmentshader):进行逐片元处理过程,就是对像素颜色处理;一个像素也就是一个单元;
    let FRAG_SHADER = "" +
      "void main(){" +
      "gl_FragColor=vec4(1.0,0.0,0.0,1.0);" + // 红色
      // "gl_FragColor=vec4(1.0,1.0,1.0,1.0);" + // 白色
      // "gl_FragColor=vec4(0.0,0.0,0.0,1.0);" + // 黑色
      "}";

    // 3 , 初始化着色器
    let vertex = gl.createShader(gl.VERTEX_SHADER); // 创建顶点着色器
    let frag = gl.createShader(gl.FRAGMENT_SHADER); // 创建片元着色器

    // 引入顶点、片元着色器源代码
    gl.shaderSource(vertex, VERTEX_SHADER);
    gl.shaderSource(frag, FRAG_SHADER);

    gl.compileShader(vertex); // 编译顶点着色器
    gl.compileShader(frag); // 编译片元着色器

    //创建程序对象program
    let program = gl.createProgram();

    //附着顶点着色器和片元着色器到program
    gl.attachShader(program, vertex);
    gl.attachShader(program, frag);

    //链接program
    gl.linkProgram(program);
    //使用program
    gl.useProgram(program);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT); // 清屏

    // 4 , 开始绘画
    gl.drawArrays(gl.POINTS /*画个点*/, 1 /*从0开始*/, 1 /*绘制几个点*/);

  }



</body>
</html>

最终的样子如下:


全部评论: 0

    我有话说: