webGL入门（一）绘制一个点

原创

已于 2024-09-27 20:21:24 修改 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webgl

于 2024-09-22 10:47:01 首次发布

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./glMatrix.min.js"></script>
</head>
<body>
    <canvas id="webglCanvas" width="500" height="500"></canvas>
    <script>
        var webgl // 全局声明webgl
        var projMat4 // 全局声明投影矩阵
        var projMat4 = mat4.create() // 创建一个4*4的矩阵

        var vertexString = `
            attribute vec4 a_Position;
            uniform mat4 proj;
            void main() {
                gl_Position = proj * a_Position;
                gl_PointSize = 60.0;
            }
        ` // 顶点着色器字符串
        var fragmentString = `
            precision mediump float;
            void main() {
                gl_FragColor = vec4(0, 1.0, 1.0, 1.0);
            }
        ` // 片元着色器字符串