2013-08-11 9 views
8

Próbuję przenieść to (http://madebyevan.com/webgl-water/) na TRZY. Myślę, że zbliżam się (po prostu chcę symulację na razie, nie przejmuj się już optyką/załamaniem). Chciałbym, aby działało z shaderem na zwiększenie GPU.Three.js Pobierz dane z WebGLRenderTarget (sim wody)

Oto moje aktualne TRZY konfiguracji za pomocą shaderów: http://jsfiddle.net/EqLL9/2/ (drugi mniejszy samolot jest do debugowania, co jest obecnie w WebGLRenderTarget)

Co mam zmaga się czyta dane z powrotem z WebGLRenderTarget (rtTexture w moim przykładzie). W tym przykładzie zobaczysz, że 4 wierzchołki otaczające punkt środkowy są przesunięte w górę. Jest to poprawne (po 1 etapie symulacji), ponieważ zaczyna się od punktu centralnego będącego jedynym punktem przemieszczenia.

Gdybym mógł odczytać dane z powrotem z rtTexture i zaktualizować teksturę danych (buf1) każdej klatki, to symulacja powinna prawidłowo animować. Jak odczytać dane bezpośrednio z WebGLRenderTarget? Wszystkie przykłady pokazują, jak przesłać dane do celu (renderować do niego), nie czytać z niego. Czy robię to wszystko źle? Coś mi mówi, że będę musiał pracować z wieloma teksturami i jakoś zamieniam się tam iz powrotem jak Evan.

TL; DR: W jaki sposób można skopiować dane z WebGLRenderTarget do DataTexture po wywołaniu takiego:
// render to rtTexture
renderer.render(sceneRTT, cameraRTT, rtTexture, true);

EDIT: może znaleźć rozwiązanie na jsfiddle/gero3/UyGD8/9/ Woli zbadaj i zgłoś ponownie.

Odpowiedz

10

Ok, zorientowali się, jak odczytywać dane z wykorzystaniem rodzimych połączeń WebGL:

// Render first scene into texture 
renderer.render(sceneRTT, cameraRTT, rtTexture, true); 

// read render texture into buffer 
var gl = renderer.getContext(); 
gl.readPixels(0, 0, simRes, simRes, gl.RGBA, gl.UNSIGNED_BYTE, buf1.image.data); 
buf1.needsUpdate = true; 


Symulacja teraz ożywia. Jednak wydaje się, że nie działa prawidłowo (prawdopodobnie głupi błąd, który przeoczyłem). Wydaje się, że wartości wysokości nigdy nie są tłumione i nie jestem pewien dlaczego. Dane z buf1 są używane w module cieniującym, który oblicza nową wysokość (czerwony w RGBA), tłumi wartość (mnoży się przez 0,99), a następnie renderuje ją do tekstury. Następnie odczytałem zaktualizowane dane z tekstury z powrotem do buf1.

Oto najnowsza skrzypce: http://jsfiddle.net/EqLL9/3/

Postaram aktualizowany jak przejść wzdłuż.

EDYCJA: Działa teraz świetnie. Właśnie zaimplementowano normy, a teraz pracuję nad odbiciem i refrakcją środowiska (znów czysto za pomocą shaderów). http://relicweb.com/webgl/rt.html

+2

OK, poprawiono symulację. Nie implementowałem podwójnego buforowania z podwójnym WebGLRenderTargets. Najnowsze jest: http://jsfiddle.net/EqLL9/4/ – relicweb

+1

Excellent. Oto inny przykład, który implementuje GPGPU w ramach three.js: http://jabtunes.com/labs/3d/gpuflocking/webgl_gpgpu_flocking3.html – WestLangley

+0

@WestLangley Dzięki za to, wygląda fajnie. Zaktualizowałem moją symulację i umieściłem ją na mojej głównej stronie (która nadal jest mocno WIP): [http://relicweb.com/webgl/rt.html](http://relicweb.com/webgl/rt. html) – relicweb