【学习笔记】WebGL基础 - 用webgl画点

如何用webgl画点

效果展示：

const canvas = document.getElementById('canvas'); // 默认宽高300*150
const gl = canvas.getContext('webgl');

![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/509a9bd7be9a4b9eb3c77b16b176785b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgc2l4Z29kX2g=:q75.awebp?rk3s=f64ab15b&x-expires=1773911898&x-signature=JDgHaFZgVuzDqT%2BDxvRXPcft1nE%3D)

// 顶点着色器 GLSL代码 - 负责位置
const vertexShaderSource = `
    attribute vec4 a_position;

    void main() {
        gl_Position = a_position;
        gl_PointSize = 10.0;
    }
`;
// 片元着色器 GLSL代码 - 负责颜色
const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1, 0, 0.5, 1);
    }
`;

// 创建顶点着色器、片元着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vertexShader, vertexShaderSource); // 指定glsl代码
gl.compileShader(vertexShader); // 编译

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色器程序 并 添加着色器
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 绑定数据
var positionBuffer = gl.createBuffer();  // 创建一个缓冲
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // 跟gl.ARRAY_BUFFER绑定
/**
 * 位置数据x,y  ArrayBuffer 浮点型
 * canvas默认宽高300*150
 * 0,0.5 = 150, 112.5
 * 0,0 = 150, 75
 * 0,-0.5 = 150,37.5
 * 裁剪空间-1,1 和 屏幕空间300,150的转换
 */
const positions = new Float32Array(
 [
    0, 0.5,
    0, 0,
    0, -0.5,
]);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); // 填充数据，用Float32Array做一个转换

// 告诉webgl用哪个着色器程序
gl.useProgram(program);


// 获取要输入属性的位置，并 允许操作它
const aPositionAttriLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(aPositionAttriLocation);

// 告诉webgl数据怎么用
gl.vertexAttribPointer(
  aPositionAttriLocation, 2, gl.FLOAT, false, 0, 0);

// 绘制
gl.drawArrays(gl.POINTS, 0, 3);