WebGL
使用户 绘制和渲染3D图形
使用户 通过页面与三维图形交互
技术栈： HTML、HTML5、JavaScript、GLSL ES语言
手动绘制图形
WebGL坐标系统
画布中心为原点，向四周扩散
着色器
着色器是程序（使用OpenGL ES Shading Language语言编写的程序）
着色器记录像素点的 位置 和 颜色
着色器由 顶点着色器 和 片段着色器 组成
着色器绘制WebGL图形
着色器MDN
//获取画布元素
var cvs=document.getElementById("cvs");
//获取到元素的上下文环境对象
var gl=cvs.getContext('webgl');
//顶点着色器变量
var VSHADER_SOURCE =
'void main() {' +
//定义点的坐标并转换成变量保存
'gl_Position = vec4(0.0, 0.0, 0.0, 1.0); ' +
//设置缩放距离的直径
'gl_PointSize = 10.0; '+
'} ';
//片段着色器变量
var FSHADER_SOURCE =
'void main() {' +
//设置图形像素的颜色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一个用于装顶点字符串的着色器对象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加载保存好的顶点代码字符串变量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//编译顶点着色器
gl.compileShader(vertShader);
//新建一个用于装片段字符串的着色器对象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加载保存好的片段代码字符串变量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//编译片段着色器
gl.compileShader(fragShader);
//新建一个程序
var shaderProgram = gl.createProgram();
//分别附加两个已编译好的着色器对象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//链接两个附件加好的着色器程序
gl.linkProgram(shaderProgram);
//开启程序的使用
gl.useProgram(shaderProgram);
//绘制指定位置的图形
gl.drawArrays(gl.POINTS, 0, 1);
绘制三角形
attributes
//获取画布元素
var cvs=document.getElementById("cvs");
//获取到元素的上下文环境对象
var gl=cvs.getContext('webgl');
//顶点着色器变量
var VSHADER_SOURCE =
// 使用存储限定符定义一个接受顶点坐标的变量
'attribute vec4 a_Position;' +
'void main() {' +
//定义点的坐标并转换成变量保存
'gl_Position = a_Position; ' +
'} ';
//片段着色器变量
var FSHADER_SOURCE =
'void main() {' +
//设置图形像素的颜色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一个用于装顶点字符串的着色器对象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加载保存好的顶点代码字符串变量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//编译顶点着色器
gl.compileShader(vertShader);
//新建一个用于装片段字符串的着色器对象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加载保存好的片段代码字符串变量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//编译片段着色器
gl.compileShader(fragShader);
//新建一个程序
var shaderProgram = gl.createProgram();
//分别附加两个已编译好的着色器对象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//链接两个附件加好的着色器程序
gl.linkProgram(shaderProgram);
//开启程序的使用
gl.useProgram(shaderProgram);
// 定义一个类型数组保存顶点坐标值
// 数字对应三角形三个点的坐标
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 创建缓存对象
var vertexBuffer = gl.createBuffer()
// 说明缓存对象保存的类型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 写入坐标数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 获取到顶点着色器中变量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 将坐标值赋值给变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启变量值的使用
gl.enableVertexAttribArray(a_Position)
//绘制指定位置的图形
gl.drawArrays(gl.TRIANGLES, 0, 3);
webGL动画
平移三角形
uniform类型变量
用于保存和传输一致的数据，顶点着色器和片段着色器都可用。
//获取画布元素
var cvs=document.getElementById("cvs");
//获取到元素的上下文环境对象
var gl=cvs.getContext('webgl');
//顶点着色器变量
var VSHADER_SOURCE =
// 使用存储限定符定义一个接受顶点坐标的变量
'attribute vec4 a_Position;' +
// 使用存储限定符定义一个接受一致偏移量的变量
'uniform vec4 u_Translation;' +
'void main() {' +
//定义点的坐标并转换成变量保存
'gl_Position = a_Position + u_Translation; ' +
'} ';
//片段着色器变量
var FSHADER_SOURCE =
'void main() {' +
//设置图形像素的颜色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一个用于装顶点字符串的着色器对象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加载保存好的顶点代码字符串变量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//编译顶点着色器
gl.compileShader(vertShader);
//新建一个用于装片段字符串的着色器对象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加载保存好的片段代码字符串变量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//编译片段着色器
gl.compileShader(fragShader);
//新建一个程序
var shaderProgram = gl.createProgram();
//分别附加两个已编译好的着色器对象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//链接两个附件加好的着色器程序
gl.linkProgram(shaderProgram);
//开启程序的使用
gl.useProgram(shaderProgram);
// 定义一个类型数组保存顶点坐标值
// 数字对应三角形三个点的坐标
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 创建缓存对象
var vertexBuffer = gl.createBuffer()
// 说明缓存对象保存的类型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 写入坐标数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 获取到顶点着色器中变量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 将坐标值赋值给变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启变量值的使用
gl.enableVertexAttribArray(a_Position)
// 定义各个坐标点的统一偏移量
var Tx = 0.3, Ty = 0.5, Tz = 0.0;
// 获取顶点着色器中uniform变量
var u_Translation = gl.getUniformLocation(shaderProgram, 'u_Translation')
// 将多个偏移量赋值给uniform变量
gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0)
//绘制指定位置的图形
gl.drawArrays(gl.TRIANGLES, 0, 3);
旋转三角形
//获取画布元素
var cvs=document.getElementById("cvs");
//获取到元素的上下文环境对象
var gl=cvs.getContext('webgl');
//顶点着色器变量
var VSHADER_SOURCE =
// 使用存储限定符定义一个接受顶点坐标的变量
'attribute vec4 a_Position;' +
'uniform float u_CosB, u_SinB;' +
'void main() {' +
// 定义点的坐标并转换成变量保存
// w无实际意义，就是为了配合传参
'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;' +
'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;' +
'gl_Position.z= a_Position.z;'+
'gl_Position.w = 1.0;' +
'} ';
//片段着色器变量
var FSHADER_SOURCE =
'void main() {' +
//设置图形像素的颜色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一个用于装顶点字符串的着色器对象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加载保存好的顶点代码字符串变量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//编译顶点着色器
gl.compileShader(vertShader);
//新建一个用于装片段字符串的着色器对象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加载保存好的片段代码字符串变量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//编译片段着色器
gl.compileShader(fragShader);
//新建一个程序
var shaderProgram = gl.createProgram();
//分别附加两个已编译好的着色器对象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//链接两个附件加好的着色器程序
gl.linkProgram(shaderProgram);
//开启程序的使用
gl.useProgram(shaderProgram);
// 定义一个类型数组保存顶点坐标值
// 数字对应三角形三个点的坐标
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 创建缓存对象
var vertexBuffer = gl.createBuffer()
// 说明缓存对象保存的类型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 写入坐标数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 获取到顶点着色器中变量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 将坐标值赋值给变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启变量值的使用
gl.enableVertexAttribArray(a_Position)
// 设置需要旋转的角度
var ANGLE = 40.0;
// 将角度转换为弧度
var radian = Math.PI * ANGLE / 180.0;
// 计算正弦和余弦的值
var CosB = Math.cos(radian)
var SinB = Math.sin(radian)
// 从顶点着色器取出
var u_CosB = gl.getUniformLocation(shaderProgram, 'u_CosB')
var u_SinB = gl.getUniformLocation(shaderProgram, 'u_SinB')
// 将保存好的函数赋值给变量
gl.uniform1f(u_CosB, CosB)
gl.uniform1f(u_SinB, SinB)
//绘制指定位置的图形
gl.drawArrays(gl.TRIANGLES, 0, 3);
缩放三角形
//获取画布元素
var cvs=document.getElementById("cvs");
//获取到元素的上下文环境对象
var gl=cvs.getContext('webgl');
//顶点着色器变量
var VSHADER_SOURCE =
// 使用存储限定符定义一个接受顶点坐标的变量
'attribute vec4 a_Position;' +
'uniform mat4 u_xfomMatrix;' +
'void main() {' +
//定义点的坐标并转换成变量保存
'gl_Position = a_Position * u_xfomMatrix; ' +
'} ';
//片段着色器变量
var FSHADER_SOURCE =
'void main() {' +
//设置图形像素的颜色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一个用于装顶点字符串的着色器对象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加载保存好的顶点代码字符串变量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//编译顶点着色器
gl.compileShader(vertShader);
//新建一个用于装片段字符串的着色器对象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加载保存好的片段代码字符串变量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//编译片段着色器
gl.compileShader(fragShader);
//新建一个程序
var shaderProgram = gl.createProgram();
//分别附加两个已编译好的着色器对象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//链接两个附件加好的着色器程序
gl.linkProgram(shaderProgram);
//开启程序的使用
gl.useProgram(shaderProgram);
// 定义一个类型数组保存顶点坐标值
// 数字对应三角形三个点的坐标
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 创建缓存对象
var vertexBuffer = gl.createBuffer()
// 说明缓存对象保存的类型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 写入坐标数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 获取到顶点着色器中变量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 将坐标值赋值给变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启变量值的使用
gl.enableVertexAttribArray(a_Position)
// 设置缩放的距离
var Sx = 1.5; Sy = 1.5; Sz = 1.0;
// 定义矩阵
var xformMatrix = new Float32Array([
Sx, 0.0, 0.0, 0.0,
0.0, Sy, 0.0, 0.0,
0.0, 0.0, Sz, 0.0,
0.0, 0.0, 0.0, 1.0
]);
// 获取到顶点着色器中矩阵变量
var u_xfomMatrix = gl.getUniformLocation(shaderProgram, 'u_xfomMatrix');
// 将设置的值赋值给变量
gl.uniformMatrix4fv(u_xfomMatrix, false, xformMatrix)
//绘制指定位置的图形
gl.drawArrays(gl.TRIANGLES, 0, 3);
动画
//获取画布元素
var cvs=document.getElementById("cvs");
//获取到元素的上下文环境对象
var gl=cvs.getContext('webgl');
//顶点着色器变量
var VSHADER_SOURCE =
// 使用存储限定符定义一个接受顶点坐标的变量
'attribute vec4 a_Position;' +
'uniform float u_CosB, u_SinB;' +
'void main() {' +
// 定义点的坐标并转换成变量保存
// w无实际意义，就是为了配合传参
'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;' +
'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;' +
'gl_Position.z= a_Position.z;'+
'gl_Position.w = 1.0;' +
'} ';
//片段着色器变量
var FSHADER_SOURCE =
'void main() {' +
//设置图形像素的颜色并保存
'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
'}';
//新建一个用于装顶点字符串的着色器对象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加载保存好的顶点代码字符串变量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//编译顶点着色器
gl.compileShader(vertShader);
//新建一个用于装片段字符串的着色器对象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加载保存好的片段代码字符串变量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//编译片段着色器
gl.compileShader(fragShader);
//新建一个程序
var shaderProgram = gl.createProgram();
//分别附加两个已编译好的着色器对象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//链接两个附件加好的着色器程序
gl.linkProgram(shaderProgram);
//开启程序的使用
gl.useProgram(shaderProgram);
// 定义一个类型数组保存顶点坐标值
// 数字对应三角形三个点的坐标
var vertices = new Float32Array([
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
])
// 创建缓存对象
var vertexBuffer = gl.createBuffer()
// 说明缓存对象保存的类型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 写入坐标数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 获取到顶点着色器中变量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
// 将坐标值赋值给变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
// 开启变量值的使用
gl.enableVertexAttribArray(a_Position)
// 设置需要旋转的角度
var ANGLE = 40.0;
function draw(ANGLE) {
// 将角度转换为弧度
var radian = Math.PI * ANGLE / 180.0;
// 计算正弦和余弦的值
var CosB = Math.cos(radian)
var SinB = Math.sin(radian)
// 从顶点着色器取出
var u_CosB = gl.getUniformLocation(shaderProgram, 'u_CosB')
var u_SinB = gl.getUniformLocation(shaderProgram, 'u_SinB')
// 将保存好的函数赋值给变量
gl.uniform1f(u_CosB, CosB)
gl.uniform1f(u_SinB, SinB)
gl.clear(gl.COLOR_BUFFER_BIT);
//绘制指定位置的图形
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
// 计算每秒绘制的角度
// 旋转前时间
var cur_time = Date.now();
// 旋转角度
var ANGLE_STEP = -80.0;
// 初始角度
var ANGLE_INIT = 30.0;
// 执行角度
var ANGLE_ACT = 0.0;
function animate(c1, a1, a2) {
// 计算距离上次调用经过的时间
var act_time = Date.now();
// 得到这次调用和上次调用的时间间隔
var dif_time = act_time - c1;
c1 = act_time;
var ANGLE_NEW = a1 + a2 * (dif_time / 10000.0);
// 返回一个始终小于360的角度
return ANGLE_NEW %= 360;
}
function tick() {
// 获取每次旋转的角度
ANGLE_ACT = animate(cur_time, ANGLE_INIT, ANGLE_STEP);
draw(ANGLE_ACT);
// setInterval(tick, 100)
window.requestAnimationFrame(tick);
}
tick();
颜色
所有的颜色是片段着色器绘制的
绘制多顶点颜色的三角形
//获取画布元素
var cvs=document.getElementById("cvs");
//获取到元素的上下文环境对象
var gl=cvs.getContext('webgl');
//顶点着色器变量
var VSHADER_SOURCE =
//使用存储限定符定义一个接受顶点坐标的变量
'attribute vec4 a_Position;'+
'attribute vec4 a_Color;'+
'varying vec4 v_Color;'+
'void main() {' +
//定义点的坐标并转换成变量保存
'gl_Position = a_Position; ' +
'v_Color = a_Color; ' +
'} ';
//片段着色器变量
var FSHADER_SOURCE =
'precision mediump float;'+
'varying vec4 v_Color;'+
'void main() {' +
//设置图形像素的颜色并保存
'gl_FragColor = v_Color ;' +
'}';
//新建一个用于装顶点字符串的着色器对象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加载保存好的顶点代码字符串变量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//编译顶点着色器
gl.compileShader(vertShader);
//新建一个用于装片段字符串的着色器对象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加载保存好的片段代码字符串变量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//编译片段着色器
gl.compileShader(fragShader);
//新建一个程序
var shaderProgram = gl.createProgram();
//分别附加两个已编译好的着色器对象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//链接两个附件加好的着色器程序
gl.linkProgram(shaderProgram);
//开启程序的使用
gl.useProgram(shaderProgram);
// 定义一个类型数组保存顶点坐标值
// 数字对应三角形三个点的坐标
var vertices = new Float32Array([
// x y r g b
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
])
// 创建缓存对象
var vertexBuffer = gl.createBuffer()
// 说明缓存对象保存的类型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
// 写入坐标数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
// 获取到数组中单个元素的字节数
var FSIZE = vertices.BYTES_PER_ELEMENT;
// 获取到顶点着色器中变量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
// 将坐标值赋值给变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
// 开启变量值的使用
gl.enableVertexAttribArray(a_Position);
// 获取到顶点着色器中变量
var a_Color = gl.getAttribLocation(shaderProgram, 'a_Color');
// 将坐标值赋值给变量
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
// 开启变量值的使用
gl.enableVertexAttribArray(a_Color);
//绘制指定位置的图形
gl.drawArrays(gl.TRIANGLES, 0, 3);