[英]Using WebGL Shader Language (GLSL) for arbitrary vector mathematics in JavaScript
据我从看到规范 WebGL的支持帧缓冲区对象和回读操作。 这足以让您转换数据并将其恢复到客户端空间。 这是一系列操作:
glReadPixels
读回渲染缓冲区。 在浏览器中从着色器中获取浮点实际上非常简单,但约束是每像素1浮点数。
我们将4个整数转换为1个浮点数(r:int,g:int,b:int,a:int) - >(rgba:float)。
谢谢IEEE
float random(vec2 seed) {
return fract(cos(mod(123456780., 1024. * dot(seed / time, vec2(23.1406926327792690, 2.6651441426902251)))));
}
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(byte4, byte3, byte2, byte1);
}
用法:
着色器:
outputcolor = encode_float(420.420f);
JavaScript的:
// convert output to floats
output = new Float32Array(output.buffer);
是的,它是可行的 - Aaron Babcock 在这里有一个旧的演示(可能需要一些调整才能让它在1.0 WebGL规范上工作)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.