WebGL渲染2D图形
WebGL是OpenGL ES 2.0的Web标准,它结合JavaScript在HTML5的<canvas></canvas>上渲染图形。WebGL现在已经是HTML5 Canvas的绘制上下文之一。
因此在使用上的流程和OpenGL ES存在了诸多相似之处,函数名和参数也几乎是相同的。
首先需要一个进行WebGL绘制的载体。可以在html里面直接写标签,也可以在js中创建DOM。
...
<canvas id="main-canvas"></canvas>
...
<script>const mainCanvas = document.querySelector("#main-canvas");
</script>
接下来主要是通过getContext()获取WebGL渲染上下文:
function createGLContext(canvas) {let names = ["webgl", "experimental-webgl"];let context = null;for (let i=0; i < names.length; i++) {try {context = canvas.getContext(names[i]);} catch(e) {}if (context) {break;}}if (context) {context.viewportWidth = canvas.width;context.viewportHeight = canvas.height;} else {alert("Failed to create WebGL context!");}return context;
}const gl = createGLContext(mainCanvas);
当然,如果是自己平时用来测试,可以写得很简单:
const gl = mainCanvas.getContext("webgl");
这样,就获取到了在canvas上渲染webgl的上下文。
接下来,在canvas上一切的渲染操作,最终都是要依靠这个gl变量来控制的。可以通过变量gl来使用WebGL API了。
着色器准备
需要先准备好着色器的源码,然后将源码编译、链接。
下面准备着色器的源码。着色器(shader)是由专门的着色器语言(Shadering Language)编写的,在OpenGL ES中,使用的是GLSL(OpenGL Shadering Language,一种类C++语言)。着色器是成对出现的,分别是顶点着色器:
<script type="notjs" id="vertex-shader-2d">attribute vec4 a_position;void main() {gl_Position = a_position;}
</script>
和片段着色器:
<script type="notjs" id="fragment-shader-2d">precision mediump float;void main() {gl_FragColor = vec4(1, 0.3, 0.5, 1);}
</script>
顶点着色器接受一些输入,输出的是裁剪平面的顶点坐标。
因为最终在canvas上渲染图形还是要使用JavaScript而不是GLSL,所以需要获取这些GLSL代码,然后编译处理成JavaScript的对象。
// 获取着色器源码
const vertex_shader_source = document.querySelector("#vertex-shader-2d").text,fragment_shader_source = document.querySelector("#fragment-shader-2d").text;
先编译着色器:
// 编译
function setupShader(gl, type, source) {let shader = gl.createShader(type); // 先创建空着色器对象gl.shaderSource(shader, source); // 载入着色器源码gl.compileShader(shader); // 编译let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (success) {return shader;}console.log(gl.getShaderInfoLog(shader));gl.deleteShader(shader);
}
然后链接顶点着色器和片段着色器,生成一个着色器程序的js对象:
// 链接
function createProgram(gl, vertexShader, fragmentShader) {let program = gl.createProgram(); // 先创建一个空的着色器程序gl.attachShader(program, vertexShader); // 载入编译好的顶点着色器gl.attachShader(program, fragmentShader); // 载入编译好的片段着色器gl.linkProgram(program); // 链接let success = gl.getProgramParameter(program, gl.LINK_STATUS);if (success) {return program;}console.log(gl.getProgramInfoLog(program));gl.deleteProgram(program);
}
然后调用该函数,program变量就是包含了这一对着色器源码的js对象:
let program = createProgram(gl, vertex_shader_source, fragment_shader_source);
因为在着色器中有一个输入值,即顶点着色器中的a_position,着色器接收输入值必须从缓冲区中获取,而获取到的值需要在着色器中的正确位置放入,所以要找到顶点着色器中a_position的位置:
let position_attribute_location = gl.getAttribLocation(program, "a_position");
缓冲区准备
着色器设置好了之后,就要开始准备数据,作为着色器的输入了。
上文说过,作为着色器的输入数据,必须是在缓冲区中的数据。而现在没有缓冲区,也没有数据,所以接下来创建这两个东西,然后把数据放入缓冲区中。
先创建缓冲区:
let position_buffer = gl.createBuffer();
然后使用ARRAY_BUFFER绑定点,绑定到这个position_buffer(使用ARRAY_BUFFER说明要用顶点数组方式绘图):
gl.bindBuffer(gl.ARRAY_BUFFER, position_buffer);
缓冲区准备好了,接下来准备数据:
let positions = [0, 0,0, 0.2,0.7, 0,-0.5, -0.5,-0.4, -0.2,-0.7, 0,
];
然后通过ARRAY_BUFFER绑定点,将数据放到缓冲区中:
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
准备画布
由于WebGL的裁剪空间是一个横纵坐标都是在[-1, 1]范围内的矩形,而我们的画布的尺寸一般不是这个,所以需要作一下尺寸上的映射:
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
然后清空一下画布:
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
渲染
要开始渲染了。首先我们要指定着色器程序:
gl.useProgram(program);
然后启用a_position这个输入值(属性):
gl.enableVertexAttribArray(position_attribute_location);
之后准备将缓冲区的数据输送到着色器:
var size = 2;
var type = gl.FLOAT;
var normalize = false;
var stride = 0;
var offset = 0;
gl.vertexAttribPointer(position_attribute_location, size, type, normalize, stride, offset);
对这里参数的说明:
- size=2表示每次迭代读取两个数据,即x和y。由于顶点着色器中gl_Position的类型是vec4,包含x,y,z,w四个数据,而这里只需要前两个x和y。
- type=gl_FLOAT表示使用的是32为浮点类型的数据。
- normalize=false表示不需要归一化数据。
- offset=0表示从缓冲区的开始位置读取数据。
最后设置图元类型、通过drawArrays(),使用顶点数组中的顶点数据绘制:
var primitiveType = gl.TRIANGLES;
var offset = 0;
var count = 6;
gl.drawArrays(primitiveType, offset, count);
结果:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>GLSL-test</title></head><body><canvas id="main-canvas"></canvas><!-- 顶点着色器 --><script type="notjs" id="vertex-shader-2d">attribute vec4 a_position;void main() {gl_Position = a_position;}</script><!-- 片段着色器 --><script type="notjs" id="fragment-shader-2d">precision mediump float;void main() {gl_FragColor = vec4(1, 0.3, 0.5, 1);}</script><script>// 全局变量let gl;// 准备WebGL上下文function prepareContext() {// 使用Canvaslet main_canvas = document.querySelector("#main-canvas");main_canvas.setAttribute("width", "640");main_canvas.setAttribute("height", "640");gl = main_canvas.getContext("webgl");if (!gl) {alert("无法使用WebGL!");} else {console.log(gl);}}// 编译function setupShader(gl, type, source) {let shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (success) {return shader;}console.log(gl.getShaderInfoLog(shader));gl.deleteShader(shader);}// 链接function linkShader(gl, vertexShader, fragmentShader) {let program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);let success = gl.getProgramParameter(program, gl.LINK_STATUS);if (success) {return program;}console.log(gl.getProgramInfoLog(program));gl.deleteProgram(program);}// 创建缓冲区,并填入顶点数据function createBuffer(data) {gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);}(function main() {// 环境上下文准备prepareContext();// 着色器准备const vertex_shader_source = document.querySelector("#vertex-shader-2d").text,fragment_shader_source = document.querySelector("#fragment-shader-2d").text;// 编译let vertex_shader = setupShader(gl, gl.VERTEX_SHADER, vertex_shader_source),fragment_shader = setupShader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);// 链接let shaderProgram = linkShader(gl, vertex_shader, fragment_shader);let position_attribute_location = gl.getAttribLocation(shaderProgram, "a_position");// 准备输入数据createBuffer([0, 0, -0.3, 0.2, 0.2, 0.5, -0.5, -0.5, -0.4, -0.2, -0.7, 0]);// 准备画布gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);gl.clearColor(0, 0, 0, 0);gl.clear(gl.COLOR_BUFFER_BIT);// 加载着色器,准备读取缓冲区的数据gl.useProgram(shaderProgram);gl.enableVertexAttribArray(position_attribute_location);gl.vertexAttribPointer(position_attribute_location, 2, gl.FLOAT, false, 0, 0);// 执行绘制gl.drawArrays(gl.TRIANGLES, 0, 6);})();</script></body>
</html>
参考
https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial
https://webglfundamentals.org/webgl/lessons/zh_cn/
https://thebookofshaders.com/?lan=ch
WebGL渲染2D图形相关推荐
- 使用Two.js绘制2D图形的初学者指南
Two.js一个API,可轻松使用代码创建2D形状. 继续学习,您将学习如何从JavaScript创建形状和设置动画效果. Two.js与渲染器无关,因此您可以依靠相同的API使用Canvas,SVG ...
- VB6编程:DirectX 2D图形学习日志20伽玛校正
VB6编程:DirectX 2D图形学习日志20伽玛校正 教程下载地址:https://download.csdn.net/download/gosub60/13696651 作用:通过按↑和下方向键 ...
- 使用Direct3D渲染2D图素
> > 使用Direct3D渲染2D图素 2001-09-22 中国游戏开发者.CN 图片及源代码请登陆下面网站: 合作翻译: 中国游戏开发者.CN – mays htt ...
- Xcode与C++之游戏开发: 2D图形
上一篇:Xcode与C++之游戏开发:创建环境 2D 图形 今天电视.电脑显示屏.手机.平板电脑用的显示图形基本都是光栅图形,我们常称之为位图.这些屏幕由像素点构成,每个像素点代表了不同颜色.分辨率就 ...
- 3ds Max 2D图形——猩猩+拱桥
3ds Max 2D图形--猩猩+拱桥练习 猩猩 绘制 猩猩 2D图形的绘制:就是line的运用,我觉得没什么好讲的. 拱桥 1.拱桥制作 二维图形 这里 就是line的运用,先绘制一个长方形,在绘制 ...
- VB6编程:DirectX 2D图形学习日志1创建一个全屏窗口
2020/12/11:从今天开始学习DirectX 2D图形编程,从0基础开始,希望能坚持下去.有兴趣一起学习的小伙伴可以关注我,当我有一周以上的时间没有发文,请发帖给我鼓鼓劲,毕竟自学编程是一件很辛 ...
- VB6编程:DirectX 2D图形学习日志4:总结前3课
VB6编程:DirectX 2D图形学习日志4:总结前1-3课 教程下载地址:https://download.csdn.net/download/gosub60/13696651 现在,我对源码中出 ...
- VB6编程:DirectX 2D图形学习日志22创建卡通动画
VB6编程:DirectX 2D图形学习日志22创建卡通动画 教程下载地址:https://download.csdn.net/download/gosub60/13696651 作用:使用多幅BMP ...
- WebGL实现三维图形
WebGL实现三维图形的步骤有四,这里我们以生成立方体为例 定义立方体顶点位置 定义顶点颜色 定义元素(三角形)数组 渲染立方体 定义立方体顶点位置 首先,更新 initBuffers() 函数代码创 ...
最新文章
- 从壹开始微服务 [ DDD ] 之一 ║ D3模式设计初探 与 我的计划书
- C语言程序设计 细节总结(第9章 结构体共用体枚举)
- python 单通道转3通道
- 在C#中快速实现拖放操作
- Python通过一个网页地址获得网页标题Title
- Phonegap 极光推送api 服务器端推送代码
- 利用 Python / R 对数据集进行「长」「宽」转换
- ArcGIS个人数据库(mdb)中矢量字段无法删除
- (11)python里面while到底有多少知识点
- Oracle中修改遇到“ORA-00054: 资源正忙, 但指定以 NOWAIT 方式获取资源, 或者超时失效”
- Fixed Function Shader
- 18.linux日志收集数据到hdfs上面
- 深度学习图像超分辨率最新综述:从模型到应用
- Linux内存管理:反向映射机制(匿名页,文件页和ksm页)
- sql backup database备份d盘_Oracle-备份与恢复(二)RMAN备份-自动备份计划任务脚本...
- Dagger2 学习
- 语音识别第4讲:语音特征参数MFCC
- 【科普】Kubectl基本操作命令
- Jlink在ADS下的配置说明及常见问题解决办法 (转载)
- Python渗透测试工具合集及书籍推荐(转)