WebGL 图像处理.pdf

WebGL 图像处理 WebGL 图像处理 在 WebGL 中图像处理是很简单的，多么简单？ 为了在 WebGL 中绘制图像，我们需要使⽤纹理。类似于当 染代替像素时，WebGL 会需要操作投影矩阵的坐标，WebGL 读取纹理时需要获取纹理坐标。纹理坐标范围 是从 0 .0 到 1.0 。 因为我们仅需要绘制由两个三⾓形组成的矩形，我们需要告诉 WebGL 在矩阵中纹理 对应的那个点。我们可以使⽤特殊的被称为多变变量，会将这些信息从顶点着⾊器传 递到⽚段着⾊器。WebGL 将会插⼊这些值，这些值会在顶点着⾊器中，当对每个像 素绘制时均会调⽤⽚段着⾊器。 我们需要在纹理坐标传递过程中添加更多的信息，然后将他们传递到⽚段着⾊器中。 attribute vec2 a_texCoord; ... varying vec2 v_texCoord; void main() { ... // pass the texCoord to the fragment shader // The PU will interpolate this value between points v_texCoord = a_texCoord; } 然后，我们提供⼀个⽚段着⾊器来查找颜⾊纹理。 script id=2d-fragment-shader type=x-shader/x-fragment precision mediump float; // our texture uniform sampler2D u_image; // the texCoords passed in from the vertex shader. varying vec2 v_texCoord; void main() { // Look up a color from the texture. gl_FragColor = texture2D(u_image, v_texCoord); } /script 最后，我们需要加载⼀个图⽚，然后创建⼀个问题，将该图⽚传递到纹理⾥⾯。因 为，是在浏览器⾥⾯显⽰，所以图⽚是异步加载，所以我们安置我们的代码来等待纹 理的加载。⼀旦，加载完成就可以绘制。 function main() { var image = new Image(); image.src = http://someimage/on/our/server; // MUST BE SAME image.onload = function() { render(image); } } function render(image) { ... // all the code we had before. ... // look up where the texture coordinates need to go. var texCoordLocation = gl.getAttribLocation(program, a_texCoor // provide texture coordinates for the rectangle. var texCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0]), gl.STATIC_DRAW); gl.enableVertexAttribArray(texCoordLocation); gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, // Create a texture. var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); // Set the parameters so we can ren