WebGL学习笔记2-入门画点

实现目标画一个点

案例流程

具体代码

<!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>使用WebGL绘制一个点</title>
  </head>

  <body onload="onInit()">
    <canvas id="webgl" width="500" height="500"></canvas>

    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 aPosition;
       attribute float aSize;
          void main() {
            //给内置变量gl_PointSize赋值像素大小
            gl_PointSize= aSize;//60.0
            //顶点位置，位于坐标原点
            gl_Position =aPosition; //vec4(0.0,0.0,0.0,1.0);
          }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
      precision mediump float;//设置精度
       uniform vec4 aColor;
          void main() {
            gl_FragColor=aColor;  //vec4(0.0,1.0,0.0,1.0);
          }
    </script>
    <script>
      function onInit() {
        //获取webgl
        var canvas = document.getElementById('webgl');
        var gl = canvas.getContext('webgl');
        //-----加载着色器-----
        //加载顶点着色器
        var vertexShaderSource = document.getElementById('vertexShader').innerText;
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.compileShader(vertexShader);

        //加载片元着色器
        var fragShaderSource = document.getElementById('fragmentShader').innerText;
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragShaderSource);
        gl.compileShader(fragmentShader);
        //-----链接程序-----
        var program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        gl.useProgram(program);
        //-----基本配置-----
        //设置视口
        gl.viewport(0, 0, canvas.width, canvas.height);
        //设置屏幕背景色RGBA
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.enable(gl.DEPTH_TEST); //开启深度检测
        //-----参数赋值----
        // //aPosition赋值
        let aPositionVal = [0.0, 0.0, 0.0, 1.0];
        let aPosition = gl.getAttribLocation(program, 'aPosition');
        //attribute vec4=>Attrib4f,Attrib1fv
        // gl.vertexAttrib4f(aPosition, ...aPositionVal);
        gl.vertexAttrib1fv(aPosition, new Float32Array(aPositionVal));

        //aSize赋值
        let aSizeVal = 60.0;
        let aSize = gl.getAttribLocation(program, 'aSize');
        //attribute float=>Attrib1f
        gl.vertexAttrib1f(aSize, aSizeVal);

        //aColor赋值
        let aColorVal = [1.0, 0.0, 0.0, 1.0];
        let aColor = gl.getUniformLocation(program, 'aColor');
        //uniform vec4=>uniform4f
        gl.uniform4f(aColor, ...aColorVal);
        //-----执行绘制-----
        //画点
        gl.drawArrays(gl.POINTS, 0, 1);
      }
    </script>
  </body>
</html>
posted @ 2023-02-10 11:36  xiaolidan00  阅读(61)  评论(0)    收藏  举报