当前位置：首页 > news >正文

WebGL系列教程二（环境搭建及初始化Shader）

news 2026/2/9 11:01:24

1 前言
2 新建html页面
3 着色器介绍
- 3.1 顶点着色器、片元着色器与光栅化的概念
- 3.2 声明顶点着色器
- 3.3 声明片元着色器
4 坐标系(右手系)介绍
5 着色器初始化
- 5.1 给一个画布canvas
- 5.2 获取WebGL对象
- 5.3 创建着色器对象
- 5.4 获取着色器对象的源
- 5.5 绑定着色器的源
- 5.6 编译着色器
- 5.7 创建并关联项目
6 绘制
- 6.1 声明点的位置、大小和颜色
- 6.2 绘制
- 6.3 完整代码
7 总结

1 前言

上一篇中我们对WebGL进行了简单的介绍，从本篇开始，正式进入实战。那么我们第一步需要做什么呢？当然是环境的搭建，以及Shader的初始化。废话不多说，咱们直接开整。

2 新建html页面

其实搭建WebGL的环境十分简单，因为WebGL在在浏览里运行的，因此只需要新建一个html页面就行了。

3 着色器介绍

3.1 顶点着色器、片元着色器与光栅化的概念

那么什么是顶点着色器？什么是片元着色器？什么叫做光栅化？这三个概念对我们学习WebGL还是很重要的，在学习WebGL的过程中，我曾经常困惑于片元、光栅化的概念，现在我们就用一张图来解释下。假设我们要在屏幕上画一个三角形。
在这里插入图片描述
如图所示，v1 v2 v3 就叫做顶点，三角形内部的一个个红色的点，就叫做片元，也叫片段，其实它的意思就是一个个像素。注意像素应该是密密麻麻占满了整个三角形，这里为了示意只画出来了少部分。屏幕是什么？屏幕是一种光栅设备，因此把任何一种图形，不论是二维三维的，画在屏幕上，就叫做光栅化。光栅化的概念就这么简单。看过很多其他教程，只说光栅化，不说光栅化是什么意思，很令人困惑。

3.2 声明顶点着色器

声明顶点着色器很简单，只需要写一个script标签，注意type

<script id="vertex-shader" type="x-shader/x-vertex"></script>

3.3 声明片元着色器

声明片元着色器也很简单，只需要写一个script标签，同样注意type

<script id="vertex-shader" type="x-shader/x-fragment"></script>

4 坐标系(右手系)介绍

现在我们来做一个最简单的例子，画一个点，这个点的坐标分别是x=0.5，y=0.5，z=0。在此之前我们先明确一下WebGL中的坐标系：X轴向右，Y轴向上，Z轴向外。右手握拳，四指从X到Y转动，大拇指的方向就是Z轴的方向。很明显，WebGL中默认是右手系。因为z=0，因此这个点在xy所形成的平面内。
在这里插入图片描述

5 着色器初始化

初始化着色也很简单，我们先给出步骤，然后一步步来说明

创建着色器对象
获取着色器对象的源代码
绑定着色器的源
编译着色器
创建并关联项目

5.1 给一个画布canvas

<canvas id="canvas" width="1080" height="720"></canvas>

5.2 获取WebGL对象

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

5.3 创建着色器对象

//创建着色器对象
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

5.4 获取着色器对象的源

//获取着色器对象的源
let vertexSource = document.getElementById("vertex-shader").innerText;
let fragmentSource = document.getElementById("fragment-shader").innerText;

因为这里我们要用的innerText,也就是script标签里的文本，因此也可以不把文本写在script标签里，而是直接手写字符串，这样的不好处就是没有智能提示，比如：
let vertexSource = “…”
let fragmentSource = “…”

5.5 绑定着色器的源

//绑定着色器的源
gl.shaderSource(vertexShader,vertexSource);
gl.shaderSource(fragmentShader,fragmentSource);

5.6 编译着色器

//编译着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

5.7 创建并关联项目

//创建并关联项目
let program = gl.createProgram();
gl.attachShader(program,vertexShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

6 绘制

现在我们的准备工作已经完事了，可以开始绘制了。首先需要补齐script标签的内容

6.1 声明点的位置、大小和颜色

<script id="vertex-shader" type="x-shader/x-vertex">//声明一个点，vec2表示2维向量attribute vec2 aPos;void main(){//点的大小10像素gl_PointSize = 10.0;//点的位置，将vec2补齐为vec4gl_Position = vec4(aPos,0.0,1.0);   }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">void main(){//点的颜色，rgba形式，红色gl_FragColor = vec4(1.0,0.0,0.0,1.0);}
</script>

6.2 绘制

//绘制
let aPos = gl.getAttribLocation(program,"aPos");
//设置顶点的值，该顶点是用二维坐标表示的，vertexAttrib2f表示vertex中的attribute属性，2个float值
gl.vertexAttrib2f(aPos,0.5,0.5);
//绘制点，从第0个点开始，绘制两个
gl.drawArrays(gl.POINTS,0,2);

在这里插入图片描述
改为x=0，y=0看看效果，点回到了正中间。

6.3 完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#canvas{border: 1px solid #ccc;}</style>
</head><body><canvas id="canvas" width="1080" height="720"></canvas><script id="vertex-shader" type="x-shader/x-vertex">attribute vec2 aPos;void main(){gl_PointSize = 10.0;gl_Position = vec4(aPos,0.0,1.0);   //gl_Position = aPos;   }</script><script id="fragment-shader" type="x-shader/x-fragment">void main(){gl_FragColor = vec4(1.0,0.0,0.0,1.0);}</script><script>const canvas = document.getElementById("canvas");const gl = canvas.getContext("webgl");//创建着色器对象let vertexShader = gl.createShader(gl.VERTEX_SHADER);let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//获取着色器对象的源let vertexSource = document.getElementById("vertex-shader").innerText;let fragmentSource = document.getElementById("fragment-shader").innerText;//绑定着色器的源gl.shaderSource(vertexShader,vertexSource);gl.shaderSource(fragmentShader,fragmentSource);//编译着色器gl.compileShader(vertexShader);gl.compileShader(fragmentShader);console.log(gl.getShaderInfoLog(vertexShader));//创建并关联项目let program = gl.createProgram();gl.attachShader(program,vertexShader);gl.attachShader(program,fragmentShader);gl.linkProgram(program);gl.useProgram(program);//绘制let aPos = gl.getAttribLocation(program,"aPos");//设置顶点的值，该顶点是用二维坐标表示的gl.vertexAttrib2f(aPos,0.0,0.0);gl.drawArrays(gl.POINTS,0,2);</script>
</body></html>

7 总结

本篇博文中我们梳理了WebGL中整个的绘制流程，右手坐标系的指向，顶点着色器、片元着色器、光栅化等概念的含义，并以一个最简单的示例，点绘制来演示Shader的初始化过程，代码并不复杂，希望读者仔细体会，回见~

目录