WebGL入门

小白啥时候能进阶成功

已于 2024-04-19 16:34:53 修改

阅读量675

点赞数 5

文章标签： webgl

于 2024-04-09 19:39:36 首次发布

本文链接：https://blog.csdn.net/qq_34754747/article/details/137564724

版权

这篇博客介绍了WebGL的基础知识，从Canvas元素到WebGL的使用，包括设置背景色、绘制点、理解着色器及其工作原理，以及如何通过鼠标点击和改变颜色来交互。内容深入浅出，适合初学者入门。

摘要由CSDN通过智能技术生成

WebGL采用HTML5中新引入的<canvas>元素（标签），它定义了网页上的绘图区域。

1、Canvas是什么

在HTML5出现之前，如果你想在网页上显示图像，只能使用HTML提供的原生方案<img>标签。用这个标签显示图像虽然简单，但只能显示静态的图片，不能进行实时绘制和渲染。HTML5引入了<canvas>标签，允许JavaScript动态地绘制图形。

艺术家们将画布作为绘画的地方，类似地，<canvas>标签定义了网页上的绘图区域。有了<canvas>，你就可以使用JavaScript绘制任何你想画的东西。

<canvas>提供一些简单的绘图函数，用来绘制点、线、矩形、圆等。

1.1 使用<canvas>标签

默认情况下，canvas是透明的，如果不用JavaScript在上面画些什么，你是看不到<canvas>的。

为<body>元素指定onload属性，告诉浏览器<body>元素加载完成后（即页面加载完成后）执行main()函数，并作为JavaScript程序的入口。

<body onload="main()">
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script src="./test.js"></script>

</body>

在canvas上绘制二维图形，需经过以下三个步骤：

获取<canvas>元素；
向该元素请求二维图形的“绘图上下文”；
在绘图上下文上调用相应的绘图函数，以绘制二维图形。

//test.js
function main() {
    //获取<canvas>元素
    var canvas = document.getElementById('myCanvas');
    if (!canvas) {
        console.log("failed to retrieve the canvas element");
        return;
    }
    //获取绘制二维图形的绘图上下文
    var ctx = canvas.getContext('2d');

    //绘制蓝色矩形
    ctx.fillStyle = 'rgba(0,0,255,1.0)';//设置填充颜色为蓝色
    ctx.fillRect(120, 10, 150, 150);//使用填充颜色填充矩形
}

1.2 获取<canvas>元素

获取<canvas>元素，通过<canvas>标签的id属性，使用document.getElementById来获取<canvas>元素。

1.3 获取绘图上下文

通过canvas.getContext('2d')获取canvas的2d上下文。

1.4 绘制二维图形

使用上下文支持的方法来绘制二维图形，使用rgba格式来指定填充颜色（字符串）

如上图所示，<canvas>的坐标系统为x轴朝右，y轴朝下。灰色区域是canvas的区域，400*400。fillRect前两个参数为左上角顶点坐标。后两个参数为矩形的宽和高。

2、最短的WebGL程序：清空绘图区

使用背景色清空<canvas>标签的绘图区。

function main() {
    //获取<canvas>元素
    var canvas = document.getElementById('myCanvas');
    if (!canvas) {
        console.log("failed to retrieve the canvas element");
        return;
    }
    //获取WebGL的绘图上下文
    var gl = canvas.getContext('webgl');
    if (!gl) {
        console.log("failed to get webgl context");
        return;
    }
    //设置canvas的背景色
    gl.clearColor(1.0,0.0,0.0,1.0);//背景色为红色
    //清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT);
}

2.1 设置<canvas>的背景色

指定背景颜色，gl.clearColor(red,green,blue,alpha)；

rgba的取值范围[0.0,1.0]
如果任何值小于0.0或者大于1.0，那么就会分别截断为0.0或1.0
rgb的值越高，颜色越亮。类似地，a值越高，颜色越不透明。

一旦指定了背景色，背景色会存储在WebGL系统中，在下一次调用gl.clearColor()方法前不会改变。

2.2 清空<canvas>

调用gl.clear()函数，用之前指定的背景色清空绘图区域（即用背景色填充，擦除已经绘制的内容）。gl.clear(gl.COLOR_BUFFER_BIT)。

WebGL是基于多基本缓冲区模型。清空绘图区域，实际上是在清空颜色缓冲区，传递参数gl.COLOR_BUFFER_BIT就是在告诉WebGL清空颜色缓冲区。除了颜色缓冲区，WebGL还会使用其他种类的缓冲区，比如深度缓冲区和模板缓冲区。

gl.clear(buffer)
将指定缓冲区设定为预定的值。如果清空的是颜色缓冲区，那么将使用gl.clearColor()指定的值（作为预定值）
参数	buffer	指定待清空的缓冲区，位操作符OR(\|)可用来指定多个缓冲区
	gl.COLOR_BUFFER_BIT	指定颜色缓存
	gl.DEPTH_BUFFER_BIT	指定深度缓冲区
	gl.STENCIL_BUFFER_BIT	指定模板缓冲区
返回值	无
错误	INVALID_VALUE	缓冲区不是以上三种类型

如果没有指定背景色（即没有调用gl.clearColor()），那么使用的默认值如下：

缓冲区名称	默认值	相关函数
颜色缓存区	(0.0,0.0,0.0,0.0)	gl.clearColor(r,g,b,a)
深度缓冲区	1.0	gl.clearDepth(depth)
模板缓冲区	0	gl.clearStencil(s)

3、绘制一个点

绘制一个位于原点（0.0,0.0,0.0）处的10个像素大的红色的点。因为WebGL处理的是三维图形，所以我们有必要为这个点指定三维坐标。（绘制矩形比绘制圆更快）

要绘制一个点，需要使用着色器，WebGL依赖于一种称为着色器的绘图机制。着色器提供了灵活且强大的绘制二维或三维图形的方法，所有的WebGL程序必须使用它。着色器不仅强大，而且更复杂，仅仅通过一条简单的绘图命令是不能操作它的。着色器是WebGL的一项重要的核心机制，我们将一步一个脚印地去仔细研究和理解它。