Web OpenGL封装
- 简介
- 上下文GLContext
- 基类GLObject
- 着色器GLShader
- 着色器程序GLProgram
- 着色器程序属性GLAttribute、GLUniform
- 数据缓存GLBuffer
- GLTexture和GLFrameBuffer
- html标签
- 主程序ShaderToyGame
- 主函数
简介
将OpenGL提供的库函数接口进行一层封装。
上下文GLContext
OpenGL自身是一个巨大的状态机(State Machine)：一系列的变量描述OpenGL此刻应当如何运行。OpenGL的状态通常被称为OpenGL上下文(Context)。我们通常使用如下途径去更改OpenGL状态：设置选项，操作缓冲。最后，我们使用当前OpenGL上下文来渲染。
<!--
GLContext单例
GL上下文对象
-->
<script type="text/javascript">
class GLContext {
static width = 0
static height = 0
constructor() {
this.gl = null
}
static getWebGL() {
if (!this.gl) {
// 获取html中的glCanvas
let canvas = document.getElementById('glCanvas') //.transferControlToOffscreen()
GLContext.width = canvas.width
GLContext.height = canvas.height
// 获取glCanvas中的gl上下文
this.gl = canvas.getContext('webgl2')
}
return this.gl
}
}
</script>
基类GLObject
由于大部分GL相关的封装类，都有着共同的方法，因此写一个基类。
<!--
GLObject
GL对象的基类
-->
<script type="text/javascript">
class GLObject {
constructor() {
this.gl = GLContext.getWebGL()
}
bind() {}
unbind() {}
}
</script>
着色器GLShader
OpenGL在创建一个“笔刷”的时候需要先创建vertex shader和fragment shader。
<!--
用于创建：顶点着色器 or 片元着色器
GLShader
GL着色器
-->
<script type="text/javascript">
class GLShader extends GLObject {
/**
* @param sourceCode 元素id、shaderCode字符串、元素对象
* @param type shader的类型
*/
constructor(sourceCode, type) {
super()
if (sourceCode == undefined || type.constructor != Number) {
// sourceCode为空 或者 type着色器类型不是数字
throw "sourceCode is undefined or type not number. \n";
} else if (sourceCode.constructor == String) {
// sourceCode本身是一个字符串, 要么是shader源码, 要么是标签的id
if (sourceCode[0] == '#') {
// sourceCode是一个id
sourceCode = $(sourceCode)[0].innerHTML
}
} else if (sourceCode.constructor == HTMLScriptElement) {
// sourceCode是一个元素对象
sourceCode = sourceCode.innerHTML
} else {
// 其他情况直接错误
throw "Create Shader Error. \n";
}
// 创建对应type的着色器
this.id = GLShader.createShader(this.gl, sourceCode, type)
}
/**
* @param gl gl上下文
* @param sourceCode shaderCode字符串
* @param type shader的类型
*/
static createShader(gl, sourceCode, type) {
// 创建对应type的shader句柄
let shader = gl.createShader(type);
// 绑定sourceCode和type
gl.shaderSource(shader, sourceCode);
// 编译shader
gl.compileShader(shader);
// 检查错误
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
// 获取shader编译信息
let info = gl.getShaderInfoLog(shader);
// 释放shader
gl.deleteShader(shader)
// 抛出错误
throw "Could not compile WebGL program. \n" + (type == gl.VERTEX_SHADER ? "vertex" : "fragment") + " shader error. \n" + info;
}
// 创建完成
return shader;
}
delete() {
// 释放shader
this.gl.deleteShader(this.id)
}
}
</script>
着色器程序GLProgram
真正的“笔刷(Program)”，需要传入vertex shader和fragment shader，才能成为一个program。
<!--
用于创建：笔刷(着色器程序)
GLProgram
着色器程序
-->
<script type="text/javascript">
class GLProgram extends GLObject {
/**
* @param vsCode vs元素id、vsCode字符串、元素对象(顶点着色器)
* @param fsCode fs元素id、fsCode字符串、元素对象(片元着色器)
*/
constructor(vsCode, fsCode) {
super()
if (vsCode == undefined || fsCode == undefined) {
// vsCode为空 或者 fsCode为空
throw "vsCode is undefined or fsCode is undefined. \n";
}
// gl句柄
let gl = this.gl
// 创建vs和fs
let vertexShader = new GLShader(vsCode, gl.VERTEX_SHADER)
let fragmentShader = new GLShader(fsCode, gl.FRAGMENT_SHADER)
// 创建shader program
let program = gl.createProgram()
// 将vs、fs与program绑定
gl.attachShader(program, vertexShader.id)
gl.attachShader(program, fragmentShader.id)
// 链接shader program
gl.linkProgram(program)
// 检查错误
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
// 获取program链接信息
let info = gl.getProgramInfoLog(program)
// 释放program
this.delete()
// 抛出错误
throw 'WebGL program compile error. \n' + info
}
// 保存vs、fs、program的句柄
this.vertexShader = vertexShader
this.fragmentShader = fragmentShader
this.id = program
}
/**
* 使用program脚本
*/
use() {
this.gl.useProgram(this.id)
}
/**
* 删除program脚本，释放内存
*/
delete() {
this.vertexShader.delete()
this.fragmentShader.delete()
this.gl.deleteProgram(this.id)
}
}
</script>
着色器程序属性GLAttribute、GLUniform
在use program后，program还可能需要颜料(attribute/uniform)，为此包装对应的attribute和uniform。
<!--
GLAtribute
GLUniform
-->
<script type="text/javascript">
class GLAttribute extends GLObject {
/**
* @param program 着色器对象、着色器id
* @param name 属性名
*/
constructor(program, name) {
super()
if (program == undefined || name == undefined) {
// program为空 或者 name为空
throw "program is undefined or name is undefined. \n";
} else if (program.constructor != GLProgram) {
// program不是GLProgram类型的
throw "typeof(" + program + ") != GLProgram. \n";
}
// program id
program = program.id
// gl句柄
let gl = this.gl
// 获取program中name的id
let id = gl.getAttribLocation(program, name)
if (id < 0) {
// 在gl中, 获取到的id不可能小于0 (小于0说明name错误)
throw "attribute " + name + " id < 0. \n";
}
// 保存id
this.id = id
}
/**
* 绑定Attribute
*/
bind() {
this.gl.enableVertexAttribArray(this.id)
}
/**
* 解绑定Attribute
*/
unbind() {
this.gl.disableVertexAttribArray(this.id)
}
/**
* 设置Attribute属性
*/
vertexAttribPointer(size, type, normalized, stride, offset) {
this.gl.vertexAttribPointer(this.id, size, type, normalized, stride, offset)
}
}
class GLUniform extends GLObject {
/**
* @param program 着色器对象、着色器id
* @param name 属性名
*/
constructor(program, name) {
super()
if (program == undefined || name == undefined) {
// program为空 或者 name为空
throw "program is undefined or name is undefined \n";
} else if (program.constructor != GLProgram) {
// program不是GLProgram类型的
throw "typeof(" + program + ") != GLProgram. \n";
}
// program id
program = program.id
// gl句柄
let gl = this.gl
// 获取program中name的id
let id = gl.getUniformLocation(program, name)
if (id < 0) {
// 在gl中, 获取到的id不可能小于0 (小于0说明name错误)
throw "uniform " + name + " id < 0 \n";
}
// 保存id
this.id = id
}
uniform1f(v0) {
this.gl.uniform1f(this.id, v0)
}
uniform1fv(value) {
this.gl.uniform1fv(this.id, value)
}
uniform1i(v0) {
this.gl.uniform1i(this.id, v0)
}
uniform1iv(value) {
this.gl.uniform1iv(this.id, v0)
}
uniform2f(v0, v1) {
this.gl.uniform2f(this.id, v0, v1)
}
uniform2fv(value) {
this.gl.uniform2fv(this.id, value)
}
uniform2i(v0, v1) {
this.gl.uniform2i(this.id, v0, v1)
}
uniform2iv(value) {
this.gl.uniform2iv(this.id, value)
}
uniform3f(v0, v1, v2) {
this.gl.uniform3f(this.id, v0, v1, v2)
}
uniform3fv(value) {
this.gl.uniform3fv(this.id, value)
}
uniform3i(v0, v1, v2) {
this.gl.uniform3i(this.id, v0, v1, v2)
}
uniform3iv(value) {
this.gl.uniform3iv(this.id, value)
}
uniform4f(v0, v1, v2, v3) {
this.gl.uniform4f(this.id, v0, v1, v2, v3)
}
uniform4fv(value) {
this.gl.uniform4fv(this.id, value)
}
uniform4i(v0, v1, v2, v3) {
this.gl.uniform4i(this.id, v0, v1, v2, v3)
}
uniform4iv(value) {
this.gl.uniform4iv(this.id, value)
}
uniformMatrix2fv(location, transpose, value) {
this.gl.uniformMatrix2fv(this.id, transpose, value)
}
uniformMatrix3fv(location, transpose, value) {
this.gl.uniformMatrix2fv(this.id, transpose, value)
}
uniformMatrix4fv(location, transpose, value) {
this.gl.uniformMatrix2fv(this.id, transpose, value)
}
}
</script>
数据缓存GLBuffer
OpenGL在绘制时需要知道画在**哪里(vertex/uv)**也就是buffer。
<!--
GLBuffer
-->
<script type="text/javascript">
class GLBuffer extends GLObject {
/**
* @param buffer 数据信息
*/
constructor(buffer) {
super()
if (buffer == undefined) {
// buffer为空
throw "buffer is undefined \n";
}
// gl句柄
let gl = this.gl
// vbo
let vbo = gl.createBuffer()
// 绑定vbo
gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
// vbo数据设置
gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW)
// 保存vbo id
this.id = vbo
}
/**
* 绑定vbo
*/
bind() {
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.id)
}
/**
* 释放vbo
*/
delete() {
this.gl.deleteBuffer(this.id)
}
}
</script>
GLTexture和GLFrameBuffer
已经准备好笔刷、颜料、画什么东西，最后还差画在哪里(fbo)。当然我们还可以直接拿一张图贴到fbo上，也就是直接拿一张**贴纸(texture)**画在fbo上。
<!--
GLTexture
GLFramebuffer
-->
<script type="text/javascript">
class GLTexture extends GLObject {
/**
* @param imageUrl 图片
*/
constructor(imageUrl) {
super()
if (imageUrl == undefined) {
// 路径为空
throw "imageUrl is undefined. \n";
} else if (imageUrl.constructor == String) {
// 路径不为空
if (imageUrl[0] == '#') {
// 获取src
imageUrl = $($(imageUrl)[0]).attr("src")
}
}
// gl句柄
let gl = this.gl
// this句柄
let that = this
// 创建image
let image = new Image()
// 服务器不支持跨域访问的话就会被拦截
image.crossOrigin = "Anonymous"
// image加载成功后的回调 (ps: 这里可能会出现加载的时序问题)
image.onload = function() {
// 创建texture id
let textureId = gl.createTexture()
// 绑定texture
gl.bindTexture(gl.TEXTURE_2D, textureId)
// 设置texture属性
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
// 设置像素存储模式
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
// 设置texture格式
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image)
if (textureId <= 0) {
// 创建成功的texture id必然大于0, 小于说明失败, 因此释放texture
gl.deleteTexture(textureId)
// 抛出错误
throw "texture create error. \n";
}
// 保存id
that.id = textureId
// 解绑定 (ps: 最好做, 为了保持一致, 这个原因是因为后面可能会有绘制也会用到gl.bindTexture(gl.TEXTURE_2D, textureId))
gl.bindTexture(gl.TEXTURE_2D, null)
}
// image加载失败后的回调
image.onerror = function() {
alert("get image error")
}
// 设置image的src, 设置后将加载
image.src = imageUrl
}
/**
* 绑定texture
*/
bind() {
this.gl.bindTexture(this.gl.TEXTURE_2D, this.id)
}
/**
* 释放texture
*/
delete() {
this.gl.deleteTexture(this.id)
}
}
class GLFramebuffer extends GLObject {
/**
* 一般来说, FBO是framebuffer和texture绑定
* @param texture 纹理
*/
constructor(texture) {
// 创建fbo
let framebuffer = gl.createFramebuffer()
// 绑定fbo
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)
// 保存texture对象
if (texture == undefined) {
this.texture = undefined
} else if (texture.constructor == GLTexture) {
this.texture = texture
} else if (texture.constructor == String) {
this.texture = new GLTexture(texture)
}
// 将fbo和texture绑定
if (texture != undefined) {
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture.id, 0)
}
// 保存fbo id
this.id = framebuffer
}
/**
* 绑定fbo
*/
bind() {
this.gl.bindFramebuffer(this.FRAMEBUFFER, this.id)
}
/**
* 释放fbo
*/
delete() {
this.texture.delete()
this.deleteFramebuffer(this.id)
}
}
</script>
html标签
Canvas
画布，WebGL需要先创建一个Canvas，通过Canvas拿到WebGLContext。
<div style="display: flex;">
<canvas id="glCanvas" width="680" height="640">
你的浏览器似乎不支持或者禁用了HTML5 <code><canvas></code> 元素.
</canvas>
</div>
vertex shader
顶点着色器的代码。
<!-- shader脚本 -->
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec4 iPosition;
attribute vec2 iTexcoord;
uniform float iTime;
varying highp vec2 vTexcoord;
void main(void) {
gl_Position = iPosition;
vTexcoord = iTexcoord;
}
</script>
fragment shader
片段着色器的代码。
<script id="shader-fs" type="x-shader/x-fragment">
uniform sampler2D iChannel0;
uniform highp float iTime;
varying highp vec2 vTexcoord;
void main(void) {
gl_FragColor = texture2D(iChannel0, vTexcoord);
}
</script>
iChannels
纹理图片。
<img id="iChannel0" src="images/src0.jpg" class="hidden"/>
<img id="iChannel1" src="images/src1.jpg" class="hidden"/>
<!--
..................
<img id="iChannel7" src="images/src7.jpg" class="hidden"/>
-->
主程序ShaderToyGame
这只是一个调用以上封装好GL接口的实例。
<script type="text/javascript">
class ShaderToyGame {
constructor() {
let gl = GLContext.getWebGL()
// 确认WebGL支持性
if (!gl) {
alert("无法初始化WebGL，你的浏览器、操作系统或硬件等可能不支持WebGL。")
return
}
// 使用完全不透明的黑色清除所有图像
gl.clearColor(0.0, 1.0, 0.0, 1.0)
// 用上面指定的颜色清除缓冲区
gl.clear(gl.COLOR_BUFFER_BIT)
// 设置视口
gl.viewport(0, 0, GLContext.width, GLContext.height)
}
run(isRun) {
if (this.isRun == isRun) {
// 状态一样, 直接返回
return;
}
// 是否运行, false会停止运行
this.isRun = isRun;
if (isRun) {
// 开启request
requestAnimationFrame(renderGL)
}
}
renderGL(now) {
// gl上下文
let gl = GLContext.getWebGL()
// 使用program
this.program.use()
// 绑定和输入顶点数据
this.verteBuffer.bind()
this.vertexPosition.bind()
this.vertexPosition.vertexAttribPointer(3, gl.FLOAT, false, 0, 0)
// 绑定和输入纹理数据
this.texcoordBuffer.bind()
this.texcoordPosition.bind()
this.texcoordPosition.vertexAttribPointer(2, gl.FLOAT, false, 0, 0)
// 输入时间数据
this.timeUniform.uniform1f(now * 0.001)
// 输入纹理数据
for(let i = 0; i < this.maxSize; i++) {
if(this.textures[i]) {
gl.activeTexture(gl.TEXTURE0+i)
this.textures[i].bind()
this.iChannels[i].uniform1i(i)
}
}
// 绘制
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
// 递归调用
if(this.isRun)
requestAnimationFrame(renderGL)
}
render() {
let gl = GLContext.getWebGL()
// 顶点坐标
let vertices = [
1.0, 1.0, 0.0, -1.0, 1.0, 0.0,
1.0, -1.0, 0.0, -1.0, -1.0, 0.0
]
// 纹理坐标
let texcoord = [
1.0, 1.0,
0.0, 1.0,
1.0, 0.0,
0.0, 0.0
]
// 顶点buffer
this.verteBuffer = new GLBuffer(new Float32Array(vertices))
// 纹理buffer
this.texcoordBuffer = new GLBuffer(new Float32Array(texcoord))
// 着色器program
let program = new GLProgram("#shader-vs", "#shader-fs")
this.program = program
// 顶点属性
let vertexPosition = new GLAttribute(program, "iPosition")
// 纹理属性
let texcoordPosition = new GLAttribute(program, "iTexcoord")
// 时间属性
let timeUniform = new GLUniform(program, "iTime")
// 纹理数组
let iChannels = []
this.textures = []
// texture最大数量
this.maxSize = 8
// 创建iChannels属性数组和texture数组
for(let i = 0; i < this.maxSize; i++) {
let iChannel = new GLUniform(program, 'iChannel'+i)
let texture = undefined
if(iChannel.id) { texture = new GLTexture('#iChannel'+i) }
iChannels.push(iChannel)
this.textures.push(texture)
}
// 开始渲染
run(true);
}
destory() {
this.isRun = false
this.program.delete()
this.verteBuffer.delete()
this.texcoordBuffer.delete()
for(let i = 0; i < this.maxSize; i++) {
if(this.textures[i]) { this.textures[i].delete() }
}
}
}
</script>
主函数
<script type="text/javascript">
// 主函数
function main() {
let stg = new ShaderToyGame()
stg.render()
}
main()
</script>