WebGL將紋理映射到畫布

Question

將紋理映射到WebGL中的HTML畫布的最簡單方法是什麼？我可以看到設置了正交投影並渲染了紋理四邊形，但有沒有更清晰的方法？

Answer 1

什麼意思是「紋理紋理到HTML5畫布」？你的意思是畫一個紋理1x1像素的畫布？不需要正投影。最簡單的事情就是製作一個四邊形和四邊形的單元，或者在像素座標系中繪製一個四邊形並繪製。

這裏的像素座標四着色器

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 * vec2(1, -1), 0, 1); 

    v_texCoord = a_texCoord; 
} 

這個例子就是從這裏開始。 （http://games.greggman.com/game/webgl-image-processing/）

規模的單元的四版本偏移將是

attribute vec2 a_position; 
attribute vec2 a_texCoord; 

uniform vec2 u_offset; 
uniform vec2 u_scale; 

varying vec2 v_texCoord; 

void main() { 
    gl_Position = vec4(a_position * u_scale + u_offset, 0, 1); 

    v_texCoord = a_texCoord; 
} 

最後，在任一情況下可以簡化代碼通過使用3x3矩陣運算

attribute vec2 a_position; 

uniform mat3 u_matrix; 

void main() { 
    // Multiply the position by the matrix. 
    gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1); 
} 

然後只設置矩陣。您可以使用單位四元組（添加比例矩陣來放大像素）或使用像素。

的

[ 
    2/canvasWidth, 0, 0, 
    0, -2/canvasHeight, 0, 
    -1, 1, 1 
] 

矩陣將從像素clipspace轉換。矩陣

[ 
    imageWidth, 0, 0, 
    0, imageHeight, 0, 
    0, 0, 1 
] 

將從單位四元組轉換爲圖像大小。

走進所有的矩陣數學似乎有太多的這個答案，但如果你有興趣，你可以在這裏找到它見http://games.greggman.com/game/webgl-2d-matrices/