Używanie języka WebGL Shader (GLSL) do dowolnych obliczeń wektorowych w JavaScript

Język WebGL Shader (GLSL) jest bardzo potężnym narzędziem do wielowymiarowej matematyki wektorowej.

Czy jest jakakolwiek możliwość wykorzystania tej mocy z JavaScript (działającego w przeglądarce internetowej) do prywatnych obliczeń Nie-3D? Pobieranie danych jest możliwe, ale czy jest jakiś sposób, aby uzyskać dane do JavaScript po obliczeniach shader są wykonane?

Nie jest konieczne rysowanie rzeczywiste, tylko obliczanie wektorów. (Bawię się pomysłem na hardware accelerated gravity simulator napisanym w JavaScript.)

Dziękuję!

W newsie: Khronos wydaje się rozwijać WebCL, który będzie dostępną dla JavaScript wersją OpenCL . Dokładnie tego szukam, ale to zajmie trochę czasu...

Author: Community, 2011-03-24
Source

3 answers

Z tego co widzę z spec WebGL obsługuje obiekty framebuffer i operacje read-back. Wystarczy to, aby przekształcić Dane i przywrócić je do przestrzeni klienta. Oto sekwencja operacji:

  1. Utwórz FBO z buforami renderowania załączników, które musisz zapisać wynik; bind it
  2. Prześlij wszystkie dane wejściowe do tekstur (ten sam rozmiar).
  3. Utwórz shader przetwarzania GLSL, który wykona obliczenia wewnątrz części fragmentu, odczytując wejście z tekstur i zapisanie wyjścia do docelowych buforów renderbufferów; bind it
  4. narysuj kwadrat; odczytaj bufory renderujące za pomocą glReadPixels.
 17
Author: kvark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-24 13:24:19

Uzyskanie pływaków z shadera w przeglądarce jest w rzeczywistości dość łatwe, ograniczenie to 1 pływak na piksel.

Zamieniamy 4 inty na 1 float (r: int, g: int, b: int, a: int) -> (rgba: float).

Dzięki 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); 
}

Użycie:

Shader: 

outputcolor = encode_float(420.420f);

JavaScript: 

// convert output to floats
output = new Float32Array(output.buffer);
 6
Author: Adrian Seeley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-12 18:02:01

Tak, jest to wykonalne -- jest stare demo (może wymagać pewnych poprawek, aby działało na specyfikacji 1.0 WebGL) autorstwa Aarona Babcocka tutaj .

 2
Author: Giles Thomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-24 14:19:00