我本来打算写一个教程并将其发布在我的博客上,但我不知道什么时候有时间完成,所以这就是我所拥有的这是我博客上的一组更详细的帖子 http://games.greggman.com/game/webgl-fundamentals/.
WebGL实际上是一个光栅化库。我接受属性(数据流)、制服(变量),并期望您提供二维中的“剪辑空间”坐标和像素的颜色数据。
这是 WebGL 中 2d 的简单示例(省略了一些细节)
// Get A WebGL context
var gl = canvas.getContext("experimental-webgl");
// setup GLSL program
vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
// Create a buffer and put a single clipspace rectangle in
// it (2 triangles)
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
// draw
gl.drawArrays(gl.TRIANGLES, 0, 6);
这是 2 个着色器
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(0,1,0,1); // green
}
</script>
这将绘制一个整个画布大小的绿色矩形。
在 WebGL 中,您有责任提供一个提供剪辑空间坐标的顶点着色器。无论画布大小如何,剪辑空间坐标始终从 -1 到 +1。如果您想要 3d,则需要您提供从 3d 转换为 2d 的着色器,因为 WebGL 只是一个光栅化 API
在一个简单的示例中,如果您想以像素为单位进行工作,您可以传入一个使用像素而不是剪辑空间坐标的矩形,并在着色器中转换为剪辑空间
例如:
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
uniform vec2 u_resolution;
void main() {
// convert the rectangle from pixels to 0.0 to 1.0
vec2 zeroToOne = a_position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace, 0, 1);
}
</script>
现在我们可以通过更改我们提供的数据来绘制矩形
// set the resolution
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
// setup a rectangle from 10,20 to 80,30 in pixels
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
10, 20,
80, 20,
10, 30,
10, 30,
80, 20,
80, 30]), gl.STATIC_DRAW);
您会注意到 WebGL 将右下角视为 0,0。为了使其成为用于 2d 图形的更传统的右上角,我们只需翻转 y 坐标。
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
您想要操作需要传入纹理的图像。同样,画布的大小由剪辑空间坐标表示,纹理由从 0 到 1 的纹理坐标引用。
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_resolution;
varying vec2 v_texCoord;
void main() {
// convert the rectangle from pixels to 0.0 to 1.0
vec2 zeroToOne = a_position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace, 0, 1);
// pass the texCoord to the fragment shader
// The GPU will interpolate this value between points.
v_texCoord = a_texCoord;
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision float mediump;
// our texture
uniform sampler2D u_image;
// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>
要绘制图像需要加载图像,由于这是异步发生的,我们需要稍微更改一下代码。将我们拥有的所有代码放入一个名为“render”的函数中
var image = new Image();
image.src = "http://someimage/on/our/server"; // MUST BE SAME DOMAIN!!!
image.onload = function() {
render();
}
function render() {
...
// all the code we had before except gl.draw
// look up where the vertex data needs to go.
var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
// provide texture coordinates for the rectangle.
var texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 1.0,
0.0, 0.0,
1.0, 0.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(texCoordLocation);
gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.draw(...)
如果你想做图像处理,你只需改变你的着色器。示例,交换红色和蓝色
void main() {
gl_FragColor = texture2D(u_image, v_texCoord).bgra;
}
或者与其旁边的像素混合。
uniform vec2 u_textureSize;
void main() {
vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;
gl_FragColor = (texture2D(u_image, v_texCoord) +
texture2D(u_image, v_texCoord + vec2(onePixel.x, 0.0)) +
texture2D(u_image, v_texCoord + vec2(-onePixel.x, 0.0))) / 3.0;
}
我们必须传入纹理的大小
var textureSizeLocation = gl.getUniformLocation(program, "u_textureSize");
...
gl.uniform2f(textureSizeLocation, image.width, image.height);
等等...单击下面的最后一个链接以获取卷积示例。
以下是进度略有不同的工作版本
在剪辑空间中绘制矩形 http://greggman.com/downloads/examples/webgl/webgl-fundamentals.html
以像素为单位绘制矩形 http://greggman.com/downloads/examples/webgl/webgl-2d-rectangle.html
绘制矩形,原点位于左上角 http://greggman.com/downloads/examples/webgl/webgl-2d-rectangle-top-left.html
用不同颜色绘制一堆矩形 http://greggman.com/downloads/examples/webgl/webgl-2d-rectangles.html
绘制图像 http://greggman.com/downloads/examples/webgl/webgl-2d-image.html
绘制红色和蓝色交换的图像 http://greggman.com/downloads/examples/webgl/webgl-2d-image-red2blue.html
绘制左右像素平均的图像 http://greggman.com/downloads/examples/webgl/webgl-2d-image-blend.html
使用 3x3 卷积绘制图像 http://greggman.com/downloads/examples/webgl/webgl-2d-image-3x3-convolution.html
绘制具有多种效果的图像 http://greggman.com/downloads/examples/webgl/webgl-2d-image-processing.html