第一次知道webgl是因为项目需要,老板让我去看看webgl。打开网站一堆英文表示看不懂,心累。意外发现了threejs,它是一个基于webgl的库,封装了一些3D渲染需求中重要的工具方法与渲染循环。这都没啥,重要的是他太炫了。在浏览器上直接搞3d,不需要你搭建什么环境也不需要你引入什么库。只要你的浏览器支持webgl就行。这要求很低了吧,感觉瞬间上来了。真香~
上网买了一本《webgl编程指南》开始了痛并快乐的学习。所以本文的代码很多都可以从书上找到的。
先搞一个入门的例子,清空缓冲区:
1、准备一个canvas
<canvas id="example" width="500" height="500"></canvas>
2、获取canvas元素
let canvas = document.getElementById('example');
3、获取绘图上下文
let gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") || canvas.getContext("webgl2");
说到这里就要说到getContext了。
语法:canvas.getContext(contextID);
contextID指的是您想要在画布上绘制的类型,它可用的值有
- 2d 创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。用来画2维的东西。
- webgl 创建一个WebGLRenderingContext对象作为3D渲染的上下文,只在实现了WebGL 1(OpenGL ES 2.0)的浏览器上可用。
- experimental-webgl 和webgl一样(除了有些地方可能不稳定),实验性特性。
- webgl2 创建一个WebGLRenderingContext对象作为3D渲染的上下文,只在实现了WebGL 2(OpenGL ES 3.0)的浏览器上可用。
- bitmaprenderer 创建一个ImageBitmapRenderingContext,用于将位图渲染到canvas上下文上,实验性特性。
4、清空canvas
gl.clearColor(0.0, 10.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
第一次看到这个函数clearColor()还不明白为啥设置了颜色还没清空。还要执行clear()。你看人家函数名都是clearColor了。
其实是我想差了,这一步是设置清空颜色缓冲区的颜色。或者说是设置了用那种颜色清空颜色缓冲区,但是还没有清空颜色,还差一步执行。
举个例子:你在画板上画画,我拿给你一瓶白色的颜料说:你画好了,就用这个白色的颜料把你画的给覆盖掉。
你看,我给你颜料(clearColor()),你去覆盖你的画(gl.clear()))。很形象吧,你以为就这些吗,不。
我给你白的颜料了,在我不给你新的颜料之前,你都可以用她覆盖掉你的画。clearColor()也是如此,
clearColor()设置好后,就被保存在webgl系统中。除非你设置别的颜色,否则之后清空颜色缓冲区将会一直使用它。
5、效果
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>矩形框</title>
<script src="./index.js"></script>
</head>
<style>
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
.rectangle {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body onload="init3d()">
<div class="rectangle">
<canvas id="example" width="500" height="500"></canvas>
</div>
</body>
</html>
index.js
function init3d() {
//这一步就是获取指定的canvas元素了,接下来的操作都是在这个叫example的canvas上。
let canvas = document.getElementById('example');
//这一步是获取canvas绘图的上下文。
/**
* 说到这里就要说到getContext了。
* 语法:canvas.getContext(contextID);
* contextID指的是您想要在画布上绘制的类型,它可用的值有
* 2d 创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。用来画2维的东西。
* webgl 创建一个WebGLRenderingContext对象作为3D渲染的上下文,只在实现了WebGL 1(OpenGL ES 2.0)的浏览器上可用。
* experimental-webgl 和webgl一样(除了有些地方可能不稳定),实验性特性。
* webgl2 创建一个WebGLRenderingContext对象作为3D渲染的上下文,只在实现了WebGL 2(OpenGL ES 3.0)的浏览器上可用。
* bitmaprenderer 创建一个ImageBitmapRenderingContext,用于将位图渲染到canvas上下文上,实验性特性。
*
*/
let gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") || canvas.getContext("webgl2");
if (!gl) {
return false;
}
//
/**
* 第一次看到这个函数clearColor()还不明白为啥设置了颜色还没清空。还要执行clear()。你看人家函数名都是clearColor了。
* 其实是我想差了,这一步是设置清空颜色缓冲区的颜色。或者说是设置了用那种颜色清空颜色缓冲区,但是还没有清空颜色,还差一步执行。
*
* 举个例子:你在画板上画画,我拿给你一瓶白色的颜料说:你画好了,就用这个白色的颜料把你画的给覆盖掉。
*
* 你看,我给你颜料(clearColor()),你去覆盖你的画(gl.clear()))。很形象吧,你以为就这些吗,不。
* 我给你白的颜料了,在我不给你新的颜料之前,你都可以用她覆盖掉你的画。clearColor()也是如此,
* clearColor()设置好后,就被保存在webgl系统中。除非你设置别的颜色,否则之后清空颜色缓冲区将会一直使用它。
*/
gl.clearColor(0.0, 10.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}