WebGL 小白入门学习-优快云博客

本文链接：https://blog.youkuaiyun.com/dlmyrt/article/details/142854962

1. WebGL是什么？

WebGL（Web Graphics Library）是一种JavaScript API，它允许你在不需要安装任何额外插件的情况下，直接在浏览器中渲染高性能的2D和3D图形。WebGL利用了用户的图形处理单元（GPU）来加快渲染速度，这意味着你可以在网页上创建类似桌面应用程序的视觉效果。

1.1 WebGL入门代码实现如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给画布换个颜色</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400">
        此浏览器不支持canvas
    </canvas>
    <script>
        const ctx = document.getElementById('canvas')
        const gl = ctx.getContext('webgl')
        gl.clearColor(1.0, 0.0, 0.0, 1.0)
        gl.clear(gl.COLOR_BUFFER_BIT)
    </script>
</body>
</html>

1.2 方法详解

（1）gl.clearColor(r,g,b,a) 指定清空<canvas>的颜色，接收四个参数取值区间为 0.0~1.0)

（2）gl.clear(buffer) 清空canvas参数分为三项

gl.COLOR_BUFFER_BIT 清空颜色缓存
gl.DEPTH_BUFFER_BIT 清空深度缓冲区
gl.STENCIL_BUFFER_BIT 清空模板缓冲区

（3）gl.clear 需要和 gl.clearColor 提到的函数搭配使用

gl.clear(gl.COLOR_BUFFER_BIT) 和 gl.clearColor(0.0,0.0,0.0,1.0)
gl.clear(gl.DEPTH_BUFFER_BIT) 和 gl.clearDepth(1.0)
gl.clear(gl.STENCIL_BUFFER_BIT) 和 gl.clearStencil(0)

2. WebGL的基本组件

2.1 什么是着色器

（1）着色器：就是让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染。

顶点着色器：处理每个顶点的数据，如位置、颜色和纹理坐标。
片元着色器：处理每个像素（片元）的颜色和其他属性，最终决定屏幕上显示的颜色。

2.2 webgl 绘制一个点的流程

2.2.1 创建着色器源码

// 顶点着色器源码
const vertexShaderSource = `
// 必须要存在 main 函数
void main() {
    // 要绘制的点的坐标
    gl_Position = vec4(0.0,0.0,0.0,1.0); // x, y, z, w齐次坐标(x/w，y/w， z/w)
    // 点的大小
    gl_PointSize = 10.0;
}`

// 片源着色器源码
const fragmentShaderSource = `
// 必须要存在 main 函数
void main() {
    gl_FragColor = vec4(0.0,0.0,0.0,1.0); // r, g, b, a
}`

2.2.2 创建着色器

// 创建顶点着色器对象
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 创建片段着色器对象
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

2.2.3 指定关联着色器源码

// 设置顶点着色器源代码
gl.shaderSource(vertexShader, vertexShaderSource);
// 设置片段着色器源代码
gl.shaderSource(fragmentShader, fragmentShaderSource);

2.2.4 编译着色器

// 编译顶点着色器
gl.compileShader(vertexShader);
// 编译片段着色器
gl.compileShader(fragmentShader);

2.2.5 创建程序对象

const program = gl.createProgram();
gl.attachShader(program,vertexShader)
gl.attachShader(program,fragmentShader)
gl.linkProgram(program)
gl.useProgram(program)

2.2.6 执行绘制

gl.drawArrays(gl.POINTS,0,1);    // 绘制一个点，需要1个点