我希望在顶点着色器中发送一个大于4*4(mat4)的矩阵。我想将矩阵放入纹理中,然后将纹理发送到着色器中。
问题是我不知道具体该如何操作。您能否给我提供一个基本示例,演示如何将矩阵设置到纹理中,并如何在着色器中获取纹理中的元素?
以下是我的代码的一些部分:假设有两个矩阵:m1和m2:
将数据放入纹理中:
制作纹理:
问题是我不知道具体该如何操作。您能否给我提供一个基本示例,演示如何将矩阵设置到纹理中,并如何在着色器中获取纹理中的元素?
以下是我的代码的一些部分:假设有两个矩阵:m1和m2:
r1 = m1.rows,
r2 = m2.rows,
c1 = m1.cols,
c2 = m2.cols,
d1 = m1.data,
d2 = m2.data;
将数据放入纹理中:
count = Math.max(r1, r2) * Math.max(c1, c2);
var texels = new Float32Array(3 * count); // RGB
/* same dimensions for both matrices */
if (r1 == r2 && c1 == c2) {
/* put m1 in red channel and m2 in green channel */
var i = 0, index1 = 0, index2 = 0;
do {
texels[i++] = d1[index1++];
texels[i++] = d2[index2++];
i++; // skip blue channel
} while (--count);
} else {
var index, row = 0, col = 0;
for (index = 0; index < r1 * c1; index++) {
texels[index * 3] = d1[index];
}
for (index = 0; index < r2 * c2; index++) {
texels[index * 3 + 1] = d2[index];
}
}
制作纹理:
var texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, Math.max(m1.c, m2.c), Math.max(m1.r, m2.r), 0, gl.RGB, gl.FLOAT, texels);
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_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
var sampler = gl.getUniformLocation(program, "usampler");
gl.uniform1i(sampler, 0);
顶点着色器:
#ifdef GL_ES
precision highp float;
#endif
attribute vec3 a_position;
attribute vec2 a_texcoord;
varying vec2 vTex;
void main(void)
{
gl_Position = vec4(a_position, 1.0);
vTex = a_texcoord;
}
片元着色器:
#ifdef GL_ES
precision highp float;
#endif
// passed in from the vertex shader.
varying vec2 vTex; // row, column to calculate
uniform sampler2D usampler;
uniform int uLength;
uniform float uStepS; // increment across source texture
uniform float uStepT; // increment down source texture
uniform float uOutRows;
uniform float uOutCols;
// sum row r x col c
float sumrowcol(float row, float col) {
float sum = 0.; // sum
float ss = 0.; // column on source texture
float tt = 0.; // row on source texture
float r = row*uStepT; // moving texture coordinate
float c = col*uStepS; // moving texture coordinate
for (int pos=0; pos<2048; ++pos) {
if(pos >= uLength) break; // stop when we multiple a row by a column
float m1 = texture2D(usampler,vec2(r,ss)).r;
float m2 = texture2D(usampler,vec2(tt,c)).g;
sum += (m1*m2);
ss += uStepS;
tt += uStepT;
}
return sum;
}
float shift_right (float v, float amt) {
v = floor(v) + 0.5;
return floor(v / exp2(amt));
}
float shift_left (float v, float amt) {
return floor(v * exp2(amt) + 0.5);
}
float mask_last (float v, float bits) {
return mod(v, shift_left(1.0, bits));
}
float extract_bits (float num, float from, float to) {
from = floor(from + 0.5); to = floor(to + 0.5);
return mask_last(shift_right(num, from), to - from);
}
vec4 encode_float (float val) {
if (val == 0.0) return vec4(0, 0, 0, 0);
float sign = val > 0.0 ? 0.0 : 1.0;
val = abs(val);
float exponent = floor(log2(val));
float biased_exponent = exponent + 127.0;
float fraction = ((val / exp2(exponent)) - 1.0) * 8388608.0;
float t = biased_exponent / 2.0;
float last_bit_of_biased_exponent = fract(t) * 2.0;
float remaining_bits_of_biased_exponent = floor(t);
float byte4 = extract_bits(fraction, 0.0, 8.0) / 255.0;
float byte3 = extract_bits(fraction, 8.0, 16.0) / 255.0;
float byte2 = (last_bit_of_biased_exponent * 128.0 + extract_bits(fraction, 16.0, 23.0)) / 255.0;
float byte1 = (sign * 128.0 + remaining_bits_of_biased_exponent) / 255.0;
return vec4(byte1, byte2, byte3, byte4);
}
void main(void) {
// get the implied row and column from .s and .t of passed texel
float col = floor((vTex.s*uOutRows));
float row = floor((vTex.t*uOutCols));
// sum row x col for the passed pixel
float v = sumrowcol(row,col);
gl_FragColor = encode_float(v);
}
uniform float m[25]
来表示一个 5x5 的矩阵。 - vallentin