2013-08-11 5 views
8

मैं इस (http://madebyevan.com/webgl-water/) को तीन से अधिक पोर्ट करने का प्रयास कर रहा हूं। मुझे लगता है कि मैं करीब आ रहा हूं (बस अभी सिमुलेशन चाहते हैं, अभी तक कास्टिक/अपवर्तन की परवाह नहीं है)। मैं इसे जीपीयू बूस्ट के लिए शेडर्स के साथ काम करना चाहता हूं।Three.js WebGLRenderTarget (पानी सिम) से डेटा पुनर्प्राप्त करें

यहाँ मेरे वर्तमान तीन का उपयोग करके सेटअप shaders है: http://jsfiddle.net/EqLL9/2/ (दूसरा छोटा विमान डिबगिंग क्या WebGLRenderTarget में वर्तमान में है के लिए है)

मुझे अपने उदाहरण में WebGLRenderTarget (rtTexture से वापस डेटा पढ़ रही है के साथ संघर्ष कर रहा हूँ)। उदाहरण में आप देखेंगे कि केंद्र बिंदु के आस-पास के चार कोने ऊपर की ओर विस्थापित हैं। यह सही है (1 सिमुलेशन चरण के बाद) क्योंकि यह केंद्र बिंदु से विस्थापन का एकमात्र बिंदु है।

यदि मैं आरटीटेक्चर से डेटा वापस पढ़ सकता हूं और डेटा फ्रेम (buf1) प्रत्येक फ्रेम को अपडेट कर सकता हूं, तो सिमुलेशन सही ढंग से एनिमेट होना चाहिए। WebGLRenderTarget से सीधे डेटा कैसे पढ़ता है? सभी उदाहरण दर्शाते हैं कि लक्ष्य को डेटा कैसे भेजना है (इसे प्रस्तुत करना), इसे पढ़ने से नहीं। या मैं यह सब गलत कर रहा हूँ? कुछ मुझे बता रहा है कि मुझे कई बनावट के साथ काम करना होगा और किसी भी तरह से इवान ने इसे कैसे किया था इसके समान आगे और पीछे स्वैप करना होगा।

टी एल; डॉ:
// render to rtTexture
renderer.render(sceneRTT, cameraRTT, rtTexture, true);

संपादित करें: jsfiddle पर समाधान मिल गया है मई/gero3/UyGD8/9/ विल कैसे मैं इस तरह एक फोन के बाद एक DataTexture करने के लिए एक WebGLRenderTarget से डेटा कॉपी कर सकते हैं जांच और रिपोर्ट करें।

उत्तर

10

ठीक है, मैं पता लगा देशी 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; 


अनुकरण अब एनिमेट। हालांकि, यह ठीक से काम नहीं कर रहा प्रतीत होता है (शायद एक गूंगा त्रुटि जो मैं देख रहा हूं)। ऐसा लगता है कि ऊंचाई मूल्यों को कभी भी डंप नहीं किया जा रहा है और मुझे यकीन नहीं है कि क्यों। Buf1 से डेटा का उपयोग टुकड़ा शेडर में किया जाता है, जो नई ऊंचाई (आरजीबीए में लाल) की गणना करता है, मूल्य को डंप करता है (0.9 9 से गुणा करता है), फिर इसे बनावट में प्रस्तुत करता है। मैं फिर इस अद्यतन डेटा को बनावट से वापस buf1 में पढ़ता हूं। http://jsfiddle.net/EqLL9/3/

मैं इस की जानकारी देते रहेंगे मैं साथ प्रगति:

यहाँ नवीनतम बेला है।

संपादित करें: अब बढ़िया काम करता है। बस मानक लागू किए गए, और अब पर्यावरण प्रतिबिंब और अपवर्तन (फिर से पूरी तरह से शेडर्स) पर काम कर रहे हैं। http://relicweb.com/webgl/rt.html

+2

ठीक है, सिमुलेशन को ठीक किया गया है। मैं दोहरी WebGLRenderTargets के साथ डबल-बफरिंग लागू नहीं कर रहा था। नवीनतम है: http://jsfiddle.net/EqLL9/4/ – relicweb

+1

उत्कृष्ट। यहां एक और उदाहरण है जो जीपीजीपीयू को तीन.जेएस के ढांचे के भीतर लागू करता है: http://jabtunes.com/labs/3d/gpuflocking/webgl_gpgpu_flocking3.html – WestLangley

+0

@WestLangley इसके लिए धन्यवाद, अच्छा लगता है। मैंने अपना सिमुलेशन अपडेट किया है और इसे अपनी मुख्य साइट पर रखा है (जो अभी भी एक डब्ल्यूआईपी है): [http://relicweb.com/webgl/rt.html ](http://relicweb.com/webgl/rt। एचटीएमएल) – relicweb

संबंधित मुद्दे