WebGL学习(1) - 三角形
原文地址:WebGL学习(1) - 三角形
还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果。结合《HTML5 Canvas核心技术》和网上的教程,经过半年断断续续的学习,对canvas的学习终于完结,对常用的canvas特效基本能做到信手拈来的。canvas特效请看:样例列表
众所周知,canvas是2D绘图技术,虽然可以通过坐标变换,位置计算也能做到3D的效果。但3D场景数据量毕竟比2D要高一个数量级的,纯粹用canvas的话,不管是性能和开发的复杂度会成为一个瓶颈。
这也是webGL出现的原因,解决web端3D渲染的场景。webGL会调用到GPU,处理大量重复的3D场景数据时,性能非常有优势。同时webGL是基于openGL ES 2.0, 因此它处理3D场景是非常成熟的。但为什么不直接学习three.js呢?因为本人对图形学感兴趣,只是希望做一些自己喜欢的效果的同时深入了解计算机图形学,没指望通过它做商业项目。
为了让学习更有动力和目的性,我们以实例为导向学习webGL,再从中展开到需要学习哪些知识点。这次我们来实现如下的动画,该教程参考了《WebGL编程指南》
实际效果请看:旋转的三角形
webGL渲染流程
webGL的渲染流程如下,其中第2,3,4步是重点,里面细节比较多。接着我们就按这个流程一步一步解决问题
- 获取webGL绘图上下文
- 初始化着色器
- 创建、绑定缓冲区对象
- 向顶点着色器和片元着色器写入数据
- 设置canvas背景色,清空canvas
- 绘制
webGL绘图上下文
webGL是canvas基础之上的3D绘图技术,只是上下文不同,get3DContext函数作用就是依次降级获取上下文。
var canvas = document.getElementById("canvas"),
gl = get3DContext(canvas, true);
function get3DContext(canvas, opt) {
var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
var context = null;
for (var i = 0, len = names.length; i < len; i++) {
try {
context = canvas.getContext(names[i], opt);
} catch (e) {}
if (context) {
break;
}
}
return context;
}
着色器
着色器就是嵌入到js中的webGL代码,是由GLSL语言编写的,可以把着色器看成是js代码连接webGL的中间件。顶点着色器和片元着色器分别用于操作顶点和颜色光照,《WebGL编程指南》中是把着色器写成字符串,但从可维护性考虑,还是写在script标签中比较好。GLSL语言与C语言非常像,只要熟悉了GLSL特有的部分,其实还是比较简单的。
限定符
限定符只能用于全局变量,有3种类型:
- attribute用于表示顶点信息
- uniform用于表示除顶点外的其他信息,可以是除结构体和数组之外的任意类型
- varying用于顶点着色器向片元着色器传输数据
GLSL特有的数据类型
向量:
vec2, vec3, vec4 : 表示有2,3,4个浮点数的向量
ivec2, ivec3, ivec4 : 表示有2,3,4个整形的向量
bvec2, bvec3, bvec4 : 表示有2,3,4个布尔值的向量矩阵:
mat2, mat3, mat4 : 表示有2x2,3x3,4x4的浮点数的矩阵
顶点着色器
<script type="x-shader/x-vertex" id="vs">
attribute vec4 a_Position; //顶点,4个浮点的矢量,attribute变量传输与顶点有关的数据,表示逐顶点的信息
uniform mat4 u_xformMatrix; //变换矩阵,4*4浮点矩阵, uniform变量传输的是所有顶点都相同的数据
void main() {
gl_Position=u_xformMatrix*a_Position;
}
</script>
片元着色器
<script type="x-shader/x-fragment" id="fs">
precision mediump float; // 精度限定
uniform vec4 u_FragColor; // 颜色
void main() {
gl_FragColor = u_FragColor;
}
</script>
接着就是创建着色器了,首先从页面script标签取出着色器代码,初始化着色器;接着创建程序对象,最后连接程序对象。中间的步骤其实非常的啰嗦,已经把这几个步骤封装,我们只需要调用createShaders就可以了。
/**
* 根据script id创建着色器
* @param {Object} gl context
* @param {String} vid script id
* @param {String} fid script id
* @return {Boolen}
*/
function createShaders(gl, vid, fid) {
var vshader, fshader, element, program;
[vid, fid].forEach(function(id) {
element = document.getElementById(id);
if (element) {
switch (element.type) {
// 顶点着色器的时候
case "x-shader/x-vertex":
vshader = element.text;
break;
// 片段着色器的时候
case "x-shader/x-fragment":
fshader = element.text;
break;
default:
break;
}
}
});
if (!vshader) {
console.log("VERTEX_SHADER String not exist");
return false;
}
if (!fshader) {
console.log("FRAGMENT_SHADER String not exist");
return false;
}
program = createProgram(gl, vshader, fshader);
if (!program) {
console.log("Failed to create program");
return false;
}
gl.useProgram(program);
gl.program = program;
return true;
}
/**
* 创建连接程序对象
* @param {Object} gl 上下文
* @param {String} vshader 顶点着色器代码
* @param {String} fshader 片元着色器代码
* @return {Object}
*/
function createProgram(gl, vshader, fshader) {
// 创建着色器对象
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
if (!vertexShader || !fragmentShader) {
return null;
}
// 创建程序对象
var program = gl.createProgram();
if (!program) {
return null;
}
// 连接着色器对象
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// 连接程序对象
gl.linkProgram(program);
// 检查连接结果
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
var error = gl.getProgramInfoLog(program);
console.log("Failed to link program: " + error);
gl.deleteProgram(program);
gl.deleteShader(fragmentShader);
gl.deleteShader(vertexShader);
return null;
}
return program;
}
/**
* 加载着色器
* @param {Object} gl 上下文
* @param {Object} type 类型
* @param {String} source 代码字符串
* @return {Object}
*/
function loadShader(gl, type, source) {
// 创建着色器对象
var shader = gl.createShader(type);
if (shader == null) {
console.log("unable to create shader");
return null;
}
// 设置着色器程序
gl.shaderSource(shader, source);
// 编译着色器
gl.compileShader(shader);
// 检查编译结果
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
var error = gl.getShaderInfoLog(shader);
console.log("Failed to compile shader: " + error);
gl.deleteShader(shader);
return null;
}
return shader;
}
缓冲区
创建好缓冲区对象后,需要把它分配给变量,然后使它生效。注意顶点数组使用的是类型化数组Float32Array,这样更加高效。vertexAttribPointer方法这里指定了每个顶点分量的个数为2,因为我们目前只定义x,y坐标,z坐标使用系统默认。
/**
* 创建缓冲区
* @param {Array} data
* @param {Object} bufferType
* @return {Object}
*/
function createBuffer(data, bufferType) {
// 生成缓存对象
var buffer = gl.createBuffer();
if (!buffer) {
console.log("Failed to create the buffer object");
return null;
}
// 绑定缓存(gl.ARRAY_BUFFER<顶点>||gl.ELEMENT_ARRAY_BUFFER<顶点索引>)
gl.bindBuffer(bufferType || gl.ARRAY_BUFFER, buffer);
// 向缓存中写入数据
gl.bufferData(bufferType || gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
// 将绑定的缓存设为无效
// gl.bindBuffer(gl.ARRAY_BUFFER, null);
// 返回生成的buffer
return buffer;
}
// 创建缓冲区并传人顶点
var vertices = new Float32Array([-0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5]);
if (!createBuffer(vertices)) return;
// 分配缓冲区对象给a_Position变量
// (地址,每个顶点分量的个数<1-4>,数据类型<整形,符点等>,是否归一化,指定相邻两个顶点间字节数<默认0>,指定缓冲区对象偏移量<默认0>)
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// 启动
gl.enableVertexAttribArray(a_Position);
写入数据
首先要获取变量的地址,然后再给变量赋值,感觉挺麻烦的。attribute标记的变量使用getAttribLocation获取,同理uniform标记的变量使用getUniformLocation获取。
我们的动画要使图形绕坐标原点旋转,那么这就需要用到矩阵的变换,矩阵相关的知识就不详细说明了。要注意webGL使用的是列主序的矩阵,计算好变换矩阵后,把值赋予变量就ok。
// 获取 u_FragColor变量的存储地址并赋值
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColor) return;
//颜色模式为rgba,值范围0~1
gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0);
// 绕z轴旋转
var deg=Math.PI/180*(angle++),
cos=Math.cos(deg),
sin=Math.sin(deg);
// webgl中是按列主序 旋转加位移
var xformMatrix=new Float32Array([
cos,sin,0.0,0.0,
-sin,cos,0.0,0.0,
0.0,0.0,1.0,0.0,
0.3,0.0,0.0,1.0
]);
// v表示可以向着色器传输多个数值(地址变量,webgl中必须false,矩阵)
gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);
背景操作
每次执行动画前进行清屏,和canvas中的设置fillStyle,执行clearRect,效果一样。
// 设置清屏颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清屏
gl.clear(gl.COLOR_BUFFER_BIT);
绘制
最后渲染图形,注意第一个参数,指定不同的值,它就渲染为不同的图形,大家可以用不同的值试试效果。
- POINTS 点
- LINES 线段
- LINE_STRIP 线条
- LINE_LOOP 回路
- TRIANGLES 三角形
- TRIANGLE_STRIP 三角带
- TRIANGLE_FAN 三角扇
// (基本图形,第几个顶点,执行几次),修改基本图形项可以生成点,线,三角形,矩形,扇形等
gl.drawArrays(gl.TRIANGLES, 0, 3);
最后主体代码如下:
var canvas = document.getElementById("canvas"),
gl = get3DContext(canvas, true);
function main() {
if (!gl) {
console.log("Failed to get the rendering context for WebGL");
return;
}
if (!createShaders(gl, "fs", "vs")) {
console.log("Failed to intialize shaders.");
return;
}
// 创建缓冲区并传人顶点
var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]);
if (!createBuffer(vertices)) {
console.log("Failed to create the buffer object");
return;
}
// 获取顶点位置
var a_Position = gl.getAttribLocation(gl.program, "a_Position");
if (a_Position < 0) {
console.log("Failed to get the storage location of a_Position");
return;
}
// 分配缓冲区对象给a_Position变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
// 获取 u_FragColor变量的存储地址并赋值
var u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
if (!u_FragColor) {
console.log("Failed to get the storage location of u_FragColor");
return;
}
gl.uniform4f(u_FragColor, 1.0, 0.0, 0.0, 1.0);
// 获取矩阵变量
var u_xformMatrix = gl.getUniformLocation(gl.program, "u_xformMatrix");
if (!u_xformMatrix) {
console.log("Failed to get the storage location of u_xformMatrix");
return;
}
var xformMatrix,
angle = 0;
// 设置清屏颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 执行动画
(function animate() {
var deg = (Math.PI / 180) * angle++,
cos = Math.cos(deg),
sin = Math.sin(deg);
// 旋转加位移
xformMatrix = new Float32Array([
cos, sin, 0.0, 0.0,
-sin, cos, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.3, 0.0, 0.0, 1.0
]);
// v表示可以向着色器传输多个数值(地址变量,webgl中必须false,矩阵)
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
gl.clear(gl.COLOR_BUFFER_BIT);
// (基本图形,第几个顶点,执行几次),修改基本图形项可以生成点,线,三角形,矩形,扇形等
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(animate);
})();
}
main();
总结
相比canvas,webGL的api要原始得多,涉及到很多底层的openGL细节,但经过封装后,我们可以把那部分细节看成一个黑箱。大部分的操作都是基于矩阵变换,尽管有很多方便的第三方矩阵库,但有牢固的线性代数基础还是大有裨益的,GLSL编程语言也是一样需要熟练掌握。
WebGL学习(1) - 三角形的更多相关文章
- WebGL学习(2) - 3D场景
原文地址:WebGL学习(2) - 3D场景 经过前面WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等.有了2D绘图的 ...
- webgl学习笔记五-纹理
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...
- WebGL学习之法线贴图
实际效果请看demo:纹理贴图 为了增加额外细节,提升真实感,我们使用了漫反射贴图和高光贴图,它们都是向三角形进行附加纹理.但是从光的视角来看是表面法线向量使表面被视为平坦光滑的表面.以光照算法的视角 ...
- WebGL学习笔记二——绘制基本图元
webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...
- WebGL学习(3) - 3D模型
原文地址:WebGL学习(3) - 3D模型 相信很多人是以创建逼真酷炫的三维效果为目标而学习webGL的吧,首先我就是
- WebGL学习之纹理贴图
为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图.其中漫反射贴图可以同时实现漫反射光和环境光的效果. 实际效果请看demo:纹理贴图 2D纹理 ...
- webgl学习笔记四-动画
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...
- webgl学习笔记三-平移旋转缩放
写在前面 建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 平移 1.关键点说明 顶点着色器需要加上 uniform vec4 u_Translation ...
- webgl学习笔记二-绘图多点
写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...
随机推荐
- 实例讲解js正则表达式的使用
前言:正则表达式(regular expression)反反复复学了多次,学了又忘,忘了又学,这次打算把基本的东西都整理出来,加强记忆,也方便下次查询. 学习正则表达式之前首先需要掌握记忆这些基本概念 ...
- java基础解析系列(八)---fail-fast机制及CopyOnWriteArrayList的原理
fail-fast机制及CopyOnWriteArrayList的原理 目录 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系列( ...
- 57、Bootstrap中文文档
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...
- python-实现一个贴吧图片爬虫
今天没事回家写了个贴吧图片下载程序,工具用的是PyCharm,这个工具很实用,开始用的Eclipse,但是再使用类库或者其它方便并不实用,所以最后下了个专业开发python程序的工具,开发环境是Pyt ...
- C-一行或多行文章垂直居中
1 样式效果 2 table布局 li span
- SQL SERVER 根据地图经纬度计算距离函数
前些天客户提出一个这样的要求:一个手机订餐网,查询当前所在位置的5公里范围的酒店,然后客户好去吃饭. 拿到这个请求后,不知道如何下手,静静地想了一下,在酒店的表中增加两个字段,用来存储酒店所在的经度和 ...
- WPF ListBox数据绑定
本文来源 http://wshoufeng1989.blog.163.com/blog/static/202047033201282911633670/ 风随影动的博客 使用数据库AllData , ...
- Java 对象复制
Java 对象的一共有 3 种复制对象的方式. 1.直接赋值 (引用复制 ),此种复制方式比较常用. 诸如 A a = b ; a 是直接复制了b的引用 ,也就是说它俩指向的是同一个对象. 此时 ...
- 重学C语言---04字符串和格式化输入/输出
1.程序示例 //talkback.c一个能为你提供一些信息的对话框 #include <stdio.h> #include <string.h> //提供strlen函数原型 ...
- 无限大地图:lightmap拆分
无缝地图涉及到地形.物件的分块加载,同样,lightmap也需要动态加载.而场景烘焙时,所有物件都是一起烘焙的,那怎么把某些物件指定烘焙到某一张lightmap贴图中?网上找了很久,也没有看到具体的实 ...