चित्र 1. पोस्ट में वर्णित WebGL रेंडरर द्वारा किए गए वॉल्यूमेट्रिक रेंडरिंग का एक उदाहरण। वाम: उच्च क्षमता वाले प्रोटीन अणु में इलेक्ट्रॉनों के स्थानिक संभाव्यता वितरण का अनुकरण। सही: एक बोन्साई वृक्ष का किलोग्राम। दोनों डेटासेट ओपन साइंविस डेटासेट रिपॉजिटरी से लिए गए हैं।

वैज्ञानिक दृश्य में, तीन आयामी स्केलर क्षेत्रों की कल्पना करने के लिए वॉल्यूमेट्रिक प्रतिपादन का व्यापक रूप से उपयोग किया जाता है। ये स्केलर फ़ील्ड अक्सर प्रतिनिधित्व करने वाले मूल्यों के सजातीय ग्रिड होते हैं, उदाहरण के लिए, अणु के चारों ओर चार्ज घनत्व, एक एमआरआई या सीटी स्कैन, विमान को कवर करने वाली हवा की एक धारा, आदि। वॉल्यूमेट्रिक रेंडरिंग इस तरह के डेटा को छवियों में परिवर्तित करने का एक वैचारिक सरल तरीका है: डेटा को आंखों की किरणों के साथ नमूना करके, और प्रत्येक नमूने को रंग और पारदर्शिता प्रदान करके, हम ऐसे स्केलर फ़ील्ड्स के उपयोगी और सुंदर चित्र बना सकते हैं (देखें 1 देखें)। GPU रेंडरर में, ऐसे त्रि-आयामी स्केलर फ़ील्ड को 3D बनावट के रूप में संग्रहीत किया जाता है; हालाँकि, WebGL1 3D बनावट का समर्थन नहीं करता है, इसलिए वॉल्यूम रेंडरिंग में उनका अनुकरण करने के लिए अतिरिक्त हैक की आवश्यकता होती है। WebGL2 ने हाल ही में 3D बनावट के लिए समर्थन जोड़ा, जिससे ब्राउज़र को एक सुरुचिपूर्ण और तेज़ वॉल्यूम रेंडरिंग को लागू करने की अनुमति मिली। इस पोस्ट में हम वॉल्यूमेट्रिक रेंडरिंग की गणितीय बुनियादों पर चर्चा करेंगे और एक पूरी तरह से ब्राउज़र में काम करने वाले एक इंटरेक्टिव वॉल्यूमेट्रिक रेंडरर बनाने के लिए इसे WebGL2 पर लागू करने के तरीके के बारे में बात करेंगे! शुरू करने से पहले, आप इस पोस्ट में वर्णित वॉल्यूमेट्रिक ऑनलाइन रेंडरर का परीक्षण कर सकते हैं।

1. परिचय

चित्र 2: भौतिक वॉल्यूमेट्रिक प्रतिपादन, मात्रा द्वारा प्रकाश के अवशोषण और उत्सर्जन को ध्यान में रखते हुए, साथ ही साथ बिखरने वाले प्रभाव भी।

वॉल्यूमेट्रिक डेटा से एक भौतिक रूप से यथार्थवादी छवि बनाने के लिए, हमें यह अनुकरण करने की आवश्यकता है कि प्रकाश किरणों को कैसे अवशोषित किया जाता है, उत्सर्जित किया जाता है और माध्यम से बिखरा हुआ होता है (चित्र 2)। यद्यपि इस स्तर पर एक माध्यम से प्रकाश के प्रसार का मॉडलिंग सुंदर और शारीरिक रूप से सही परिणाम बनाता है, यह इंटरैक्टिव प्रतिपादन के लिए बहुत महंगा है, जो विज़ुअलाइज़ेशन सॉफ़्टवेयर का लक्ष्य है। वैज्ञानिक विज़ुअलाइज़ेशन में, अंतिम लक्ष्य वैज्ञानिकों को अपने डेटा को अंतःक्रियात्मक रूप से अनुसंधान करने की अनुमति देना है, साथ ही साथ अपने शोध कार्य के बारे में प्रश्न पूछना और उनका उत्तर देना है। चूंकि पूरी तरह से भौतिक बिखरने वाला मॉडल इंटरैक्टिव रेंडरिंग के लिए बहुत महंगा होगा, इसलिए विज़ुअलाइज़ेशन एप्लिकेशन एक सरलीकृत उत्सर्जन-अवशोषण मॉडल का उपयोग करते हैं, या तो महंगा बिखरने वाले प्रभावों की अनदेखी करते हैं, या किसी तरह उन्हें अनुमान लगाते हैं। इस लेख में, हम केवल उत्सर्जन-अवशोषण मॉडल पर विचार करते हैं।

उत्सर्जन-अवशोषण मॉडल में, हम प्रकाश प्रभाव की गणना करते हैं जो चित्र 2 में केवल काली किरण के साथ दिखाई देते हैं, और उन पर ध्यान न दें जो बिंदीदार ग्रे किरणों से उत्पन्न होती हैं। आयतन से होकर गुजरने वाली किरणें और आँखों तक पहुँचने वाली मात्रा द्वारा उत्सर्जित रंग को जमा करती हैं और धीरे-धीरे फीकी पड़ जाती हैं जब तक कि वे पूरी तरह से मात्रा में अवशोषित न हो जाएँ। अगर हम वॉल्यूम के माध्यम से आंखों से किरणों को ट्रैक करते हैं, तो हम किरण के साथ उत्सर्जन और अवशोषण जमा करने के लिए वॉल्यूम पर बीम को एकीकृत करके आंख में प्रवेश करने वाले प्रकाश की गणना कर सकते हैं। एक बिंदु पर आयतन में आने वाली किरण को लें

s = 0

$s = 0$ और एक बिंदु पर मात्रा से बाहर

s = L

$s = L$ । हम निम्नलिखित अभिन्न का उपयोग करके आंख में प्रवेश करने वाले प्रकाश की गणना कर सकते हैं:

C (r) = i n t_{0}^{L} C (s) m u (s) e^{- i n t_{0}^{s} m u (t) d t} d s

$C (r) = \ int_0 ^ L C (s) \ mu (s) e ^ {- \ int_0 ^ s \ mu (t) dt} ds$

चूंकि किरण वॉल्यूम से गुजरती है, हम उत्सर्जित रंग को एकीकृत करते हैं

C (s)

$C (s)$ और अवशोषण

m u (s)

$\ mu (s)$ हर बिंदु पर

ए स

$एस$ किरण के साथ। प्रत्येक बिंदु पर उत्सर्जित प्रकाश फीका हो जाता है और आंख तक इस बिंदु तक आयतन का अवशोषण होता है, जिसकी गणना शब्द द्वारा की जाती है

e^{- i n t_{0}^{s} m u (t) d t}

$e ^ {- \ int_0 ^ s \ mu (t) dt}$ ।

सामान्य स्थिति में, इस अभिन्नता की गणना विश्लेषणात्मक रूप से नहीं की जा सकती है, इसलिए, संख्यात्मक अनुमान का उपयोग किया जाना चाहिए। हम कई नमूने लेकर इंटीग्रल के अनुमान को पूरा करते हैं

ए न

$एन$ अंतराल में किरण के साथ

s = [0, L]

$s = [0, L]$ जिनमें से प्रत्येक दूरी पर स्थित है

D e l t a s

$\ Delta s$ एक दूसरे (चित्रा 3) के अलावा, और इन सभी नमूनों को संक्षेप में लिखें। प्रत्येक नमूने बिंदु पर भिगोना शब्द पिछले नमूनों में अवशोषण संचय श्रृंखला का उत्पाद बन जाता है।

C (r) = s u m_{i = 0}^{N} C (i D e l t a s) m u (i D e l t a s) D e l t a s p r o d_{j = 0}^{i - 1} e^{- म ् य ू (j D e l t a s) D e l t a s}

$C (r) = \ sum_ {i = 0} ^ NC (i \ Delta s) \ mu (i \ Delta s) \ Delta s \ prod_ {j = 0} ^ {i-1} e ^ {- \ म्यू (j \ Delta s) \ Delta s}$

इस राशि को और भी सरल बनाने के लिए, हम भिगोना अवधि ()

e^{- m u (j D e l t a s) D e l t a s}

$e ^ {- \ mu (j \ Delta s) \ Delta s}$ ) उसे टेलर के पास। सुविधा के लिए भी हम अल्फा का परिचय देते हैं

अ ल ् फ ा (i D e l t a s) = m u (i D e l t a s) D e l t a s

$\ अल्फा (i \ Delta s) = \ mu (i \ Delta s) \ Delta s$ । यह हमें सामने से पीछे तक की गई अल्फा कंपोज़िंग का समीकरण देता है:

C (r) = s u m_{i = 0}^{N} C (i D e l t a s) A l p h a (i D e l t a s) p r o d_{j = 0}^{i - 1} (1 - A l p h a (j_{)} ड े ल ् ट ा s))

$C (r) = \ sum_ {i = 0} ^ NC (i \ Delta s) \ Alpha (i \ Delta s) \ prod_ {j = 0} ^ {i-1} (1 - \ Alpha (j \ _) डेल्टा s))$

चित्रा 3: मात्रा में उत्सर्जन-अवशोषण के प्रतिपादन के अभिन्न की गणना।

उपरोक्त समीकरण एक लूप के लिए कम हो जाता है, जिसमें हम किरण चरण के माध्यम से वॉल्यूम के माध्यम से कदम बढ़ाते हैं और पुनरावृत्त रूप से रंग और अस्पष्टता जमा करते हैं। यह सिलसिला तब तक जारी रहता है जब तक या तो किरण मात्रा छोड़ देती है या संचित रंग अपारदर्शी हो जाता है (

अ ल ् फ ा = 1

$\ अल्फा = 1$ )। उपरोक्त योग की पुनरावृत्ति गणना परिचित फ्रंट-टू-बैक कंपोज़िंग समीकरणों का उपयोग करके की जाती है:

h a t C_{i} = h a t C_{i - 1} + (1 - A l p h a_{i - 1}) h a t C (i D e l t a s)

$\ hat {C} _i = \ hat {C} _ {i-1} + (1 - \ Alpha_ {i-1}) \ hat {C} (i \ Delta s)$

A l p h a_{i} = A l p h a_{i - 1} + (1 - A l p h a_{i - 1}) A l p h a (i D e l t a s)

$\ Alpha_i = \ Alpha_ {i - 1} + (1 - \ Alpha_ {i-1}) \ Alpha (i \ Delta s)$

इन अंतिम समीकरणों में उचित मिश्रण के लिए पहले की अस्पष्टता शामिल है,

h a t C (i D e l t a s) = C (i D e l t a s) A l p h a (i D e l t a s)

$\ hat {C} (i \ Delta s) = C (i \ Delta s) \ Alpha (i \ Delta s)$ ।

वॉल्यूम छवि को रेंडर करने के लिए, बस आंखों को किरण से प्रत्येक पिक्सेल पर ट्रेस करें, और फिर वॉल्यूम को पार करने वाली प्रत्येक किरण के लिए ऊपर दिखाए गए पुनरावृत्ति को निष्पादित करें। प्रत्येक संसाधित किरण (या पिक्सेल) स्वतंत्र है, इसलिए यदि हम छवि को जल्दी से प्रस्तुत करना चाहते हैं, तो हमें समानांतर में बड़ी संख्या में पिक्सेल को संसाधित करने का एक तरीका चाहिए। यह वह जगह है जहाँ GPU काम आता है। टुकड़ा shader में किरण की प्रक्रिया को लागू करके, हम बहुत तेजी से वॉल्यूम रेंडरर को लागू करने के लिए समानांतर GPU कंप्यूटिंग की शक्ति का उपयोग कर सकते हैं!

चित्र 4: आयतन ग्रिड के ऊपर कटाई करना।

2. WebGL2 पर GPU कार्यान्वयन

खंडन शेडर में निष्पादित होने वाली किरण के लिए, जीपीयू को पिक्सेल पर टुकड़े टुकड़े करने वाले को निष्पादित करने के लिए मजबूर करना आवश्यक है जिसके साथ हम किरण का पता लगाना चाहते हैं। हालांकि, ओपनगेल पाइपलाइन ज्यामितीय प्राइमेटिव्स (चित्रा 5) के साथ काम करती है, और स्क्रीन के एक विशिष्ट क्षेत्र में एक टुकड़ा shader को निष्पादित करने के लिए कोई सीधा तरीका नहीं है। इस समस्या को हल करने के लिए, हम कुछ प्रकार की इंटरमीडिएट ज्योमेट्री को पिक्सल पर टुकड़े टुकड़े को निष्पादित करने के लिए प्रस्तुत कर सकते हैं, जिसे हमें प्रस्तुत करना होगा। रेंडरिंग वॉल्यूम के लिए हमारा दृष्टिकोण शैडर टॉय और डेमो दृश्य रेंडरर्स के समान होगा, जो एक टुकड़ा shader प्रदर्शन करने के लिए दो पूर्ण-स्क्रीन त्रिकोण प्रस्तुत करता है, और फिर यह रेंडरिंग का असली काम करता है।

चित्र 5: वेबजीएल में ओपेनलाइन पाइपलाइन में प्रोग्रामेबल शेड्स के दो चरण होते हैं: एक वर्टेक्स शेडर, जो इनपुट वर्टिकल को क्लिप स्पेस में परिवर्तित करने के लिए जिम्मेदार होता है, और एक टुकड़ा शैडर, जो त्रिकोण द्वारा कवर किए गए पिक्सेल को शेड करने के लिए जिम्मेदार होता है।

हालांकि ShaderToy के तरीके में दो पूर्ण-स्क्रीन त्रिकोण प्रदान करना काम करेगा, यह अनावश्यक टुकड़ा प्रसंस्करण करेगा जब वॉल्यूम पूरे स्क्रीन को कवर नहीं करता है। यह मामला काफी सामान्य है: उपयोगकर्ता सामान्य रूप से बहुत सारे डेटा को देखने या बड़े विशेषता भागों का अध्ययन करने के लिए कैमरे को वॉल्यूम से दूर ले जाते हैं। वॉल्यूम से प्रभावित केवल पिक्सेल तक टुकड़े प्रसंस्करण को सीमित करने के लिए, हम वॉल्यूम ग्रिड के बाउंडिंग समांतर चतुर्भुज को फिर से व्यवस्थित कर सकते हैं, और फिर टुकड़े टुकड़े में किरण का प्रदर्शन कर सकते हैं। इसके अलावा, हमें समानांतर चतुर्भुज के सामने और पीछे के चेहरे को प्रस्तुत करने की आवश्यकता नहीं है, क्योंकि त्रिकोण के प्रतिपादन के एक निश्चित क्रम के साथ, इस मामले में टुकड़ा shader दो बार किया जा सकता है। इसके अलावा, यदि हम केवल सामने वाले के चेहरे को प्रस्तुत करते हैं, तो हम समस्याओं का सामना कर सकते हैं जब उपयोगकर्ता ज़ूम करता है क्योंकि सामने वाले चेहरे को कैमरे के पीछे पेश किया जाएगा, जिसका अर्थ है कि उन्हें क्लिप किया जाएगा, अर्थात ये पिक्सेल प्रस्तुत नहीं करेंगे। उपयोगकर्ताओं को पूरी तरह से कैमरे को वॉल्यूम के करीब लाने की अनुमति देने के लिए, हम केवल समांतर चतुर्भुज के व्युत्क्रम चेहरे को प्रस्तुत करेंगे। परिणामी रेंडरिंग पाइपलाइन को चित्र 6 में दिखाया गया है।

चित्रा 6: किरण की मात्रा के लिए वेबजीएल पाइपलाइन। हम बाउंडिंग वॉल्यूम समांतर चतुर्भुज के व्युत्क्रम चेहरों को फिर से व्यवस्थित करेंगे ताकि इस वॉल्यूम को छूने वाले पिक्सेल के लिए टुकड़ा shader निष्पादित हो। टुकड़े टुकड़े के अंदर, हम प्रतिपादन के लिए कदम से मात्रा कदम के माध्यम से किरणों को प्रस्तुत करते हैं।

इस पाइपलाइन में, असली रेंडरिंग का थोक टुकड़ा शेडर में किया जाता है; हालांकि, हम अभी भी उपयोगी गणना करने के लिए कार्यों के निश्चित प्रक्षेप के लिए वर्टेक्स शेडर और उपकरण का उपयोग कर सकते हैं। वर्टेक्स शेडर उपयोगकर्ता के कैमरे की स्थिति के आधार पर वॉल्यूम को परिवर्तित करेगा, वॉल्यूम स्पेस में आंख की दिशा और आंखों की स्थिति की गणना करेगा, और फिर उन्हें टुकड़े टुकड़े करने वाले को स्थानांतरित कर देगा। प्रत्येक शीर्ष पर गणना की गई बीम दिशा को तब GPU में फिक्स्ड-फंक्शन प्रक्षेप उपकरणों द्वारा त्रिभुज-प्रक्षेपित किया जाता है, जिससे हमें प्रत्येक खंड के लिए किरण दिशाओं की गणना थोड़ी कम खर्चीली करने की अनुमति मिलती है, हालांकि, जब टुकड़े टुकड़े करने वाले को हस्तांतरित किया जाता है, तो इन दिशाओं को सामान्य नहीं किया जा सकता है, इसलिए अभी भी उन्हें सामान्य करना है।

हम एक एकल घन [0, 1] के रूप में बाउंडिंग समांतर चतुर्भुज को प्रस्तुत करेंगे और असमान मात्रा के संस्करणों के लिए समर्थन प्रदान करने के लिए वॉल्यूम कुल्हाड़ियों के मूल्यों द्वारा इसे स्केल करेंगे। आंख की स्थिति को एक ही क्यूब में बदल दिया जाता है, और इस स्थान में बीम की दिशा की गणना की जाती है। एक ही क्यूब स्पेस में Raymarching हमें टुकड़े टुकड़े में किरण के दौरान बनावट के नमूने के संचालन को सरल बनाने की अनुमति देगा। क्योंकि वे पहले से ही बनावट के स्थान में होंगे त्रि-आयामी मात्रा के [0, 1]।

हमारे द्वारा उपयोग किए जाने वाले वर्टेक्स शेडर को ऊपर दिखाया गया है, दृश्यता बीम की दिशा में चित्रित रेखागणित पीठ चेहरे को चित्र 7 में दिखाया गया है।

#version 300 es layout(location=0) in vec3 pos; uniform mat4 proj_view; uniform vec3 eye_pos; uniform vec3 volume_scale; out vec3 vray_dir; flat out vec3 transformed_eye; void main(void) { // Translate the cube to center it at the origin. vec3 volume_translation = vec3(0.5) - volume_scale * 0.5; gl_Position = proj_view * vec4(pos * volume_scale + volume_translation, 1); // Compute eye position and ray directions in the unit cube space transformed_eye = (eye_pos - volume_translation) / volume_scale; vray_dir = pos - transformed_eye; };

चित्रा 7: बीम की दिशा में चित्रित बाउंडिंग वॉल्यूम समांतर चतुर्भुज के व्युत्क्रम चेहरे।

अब जब टुकड़े टुकड़े करने वाले पिक्सल्स को संसाधित करते हैं, जिसके लिए हमें वॉल्यूम को रेंडर करने की आवश्यकता होती है, तो हम वॉल्यूम को फिर से व्यवस्थित कर सकते हैं और प्रत्येक पिक्सेल के लिए रंग की गणना कर सकते हैं। बीम की दिशा और आंख की स्थिति के अलावा, शीर्ष छाया में गणना की जाती है, वॉल्यूम प्रदान करने के लिए, हमें अन्य इनपुट डेटा को टुकड़ा shader में स्थानांतरित करना होगा। बेशक, शुरुआत के लिए, हमें वॉल्यूम का नमूना करने के लिए एक 3 डी बनावट नमूना की आवश्यकता है। हालाँकि, आयतन अदिश मानों का एक खंड है, और यदि हम उन्हें सीधे रंग मानों के रूप में प्रयोग करेंगे -

C (s)

$C (s)$ ) और अपारदर्शिता (

अ ल ् फ ा (s)

$\ अल्फा (s)$ ), फिर ग्रेस्केल में एक प्रदान की गई छवि उपयोगकर्ता के लिए बहुत उपयोगी नहीं होगी। उदाहरण के लिए, अलग-अलग रंगों के साथ दिलचस्प क्षेत्रों को उजागर करना, शोर जोड़ना और उन्हें छिपाने के लिए पृष्ठभूमि क्षेत्रों को पारदर्शी बनाना असंभव होगा।

प्रत्येक नमूना मूल्य को सौंपे गए रंग और अस्पष्टता पर उपयोगकर्ता को नियंत्रण देने के लिए, ट्रांसफर फ़ंक्शन नामक एक अतिरिक्त रंग मानचित्र का उपयोग वैज्ञानिक विज़ुअलाइज़ेशन के रेंडरर्स में किया जाता है। स्थानांतरण फ़ंक्शन रंग और अपारदर्शिता को वॉल्यूम से सैंपल किए गए एक विशिष्ट मूल्य को निर्दिष्ट करता है। यद्यपि अधिक जटिल स्थानांतरण कार्य हैं, आमतौर पर सरल रंग खोज तालिकाओं का उपयोग ऐसे कार्यों के रूप में किया जाता है, जिन्हें रंग और अपारदर्शिता (RGBA प्रारूप में) की एक आयामी बनावट के रूप में दर्शाया जा सकता है। वॉल्यूम किरणों का प्रदर्शन करते समय स्थानांतरण फ़ंक्शन को लागू करने के लिए, हम वॉल्यूम बनावट से नमूना किए गए स्केलर मान के आधार पर स्थानांतरण फ़ंक्शन की बनावट का नमूना ले सकते हैं। वापसी रंग मूल्यों और अस्पष्टता के रूप में उपयोग किया जाता है

C (s)

$C (s)$ और

अ ल ् फ ा (s)

$\ अल्फा (s)$ नमूना।

टुकड़ा shader के लिए अंतिम इनपुट डेटा मात्रा आयाम है जिसका उपयोग हम बीम चरण आकार की गणना करने के लिए करते हैं (

D e l t a s

$\ Delta s$ ) कम से कम एक बार बीम के साथ प्रत्येक स्वर का नमूना करने के लिए। चूंकि पारंपरिक बीम समीकरण का रूप है

r (t) = v e c o + t v e c d

$r (t) = \ vec {o} + t \ vec {d}$ , अनुपालन के लिए, हम कोड में शब्दावली को बदल देंगे, और निरूपित करेंगे

D e l t a s

$\ Delta s$ कैसे

t e x t t t d t

$\ texttt {dt}$ । इसी तरह, अंतराल

s = [0, L]

$s = [0, L]$ बीम के साथ, मात्रा द्वारा कवर, हम के रूप में निरूपित करते हैं

[t e x t t t t m i n, t e x t t t t m a x]

$[\ texttt {tmin}, \ texttt {tmax}]$ ।

खंड टुकड़े में वॉल्यूम किरण का प्रदर्शन करने के लिए, हम निम्नलिखित कार्य करेंगे:

हम दृश्यमान किरण की दिशा को सामान्य करते हैं, जो कि शीर्ष की छाया से इनपुट के रूप में प्राप्त होती है;
अंतराल निर्धारित करने के लिए वॉल्यूम की सीमाओं के साथ दृष्टि की रेखा को पार करें $[\ texttt {tmin}, \ texttt {tmax}]$ वॉल्यूम प्रदान करने के लक्ष्य के साथ किरण का प्रदर्शन करना;
हम इस तरह के एक कदम लंबाई की गणना करते हैं $\ texttt {dt}$ ताकि प्रत्येक स्वर कम से कम एक बार नमूना लिया जाए;
प्रवेश बिंदु पर शुरू जब तक हम अंतिम बिंदु तक नहीं पहुंच जाते, तब तक वॉल्यूम के माध्यम से बीम पर जाएं
1. प्रत्येक बिंदु पर हम मात्रा का नमूना लेते हैं और रंग और अस्पष्टता को असाइन करने के लिए स्थानांतरण फ़ंक्शन का उपयोग करते हैं;
2. हम आगे से पीछे की ओर कंपोजिटिंग समीकरण का उपयोग करते हुए बीम के साथ रंग और अपारदर्शिता जमा करेंगे।

एक अतिरिक्त अनुकूलन के रूप में, आप संचयित रंग को समय से पहले समाप्त करने के लिए स्थिति जोड़ सकते हैं जब इसे संचित रंग लगभग अपारदर्शी हो जाता है। जब रंग लगभग अपारदर्शी हो जाता है, तो इसके बाद के किसी भी नमूने का पिक्सेल पर लगभग कोई प्रभाव नहीं होगा, क्योंकि उनका रंग पर्यावरण द्वारा पूरी तरह से अवशोषित हो जाएगा और आंख तक नहीं पहुंचेगा।

हमारे वॉल्यूम रेंडरर के लिए पूर्ण टुकड़ा shader नीचे दिखाया गया है। इस प्रक्रिया में प्रत्येक चरण को चिह्नित करते हुए टिप्पणियाँ जोड़ी गई हैं।

चित्रा 8: चित्रा 7 में के रूप में एक ही दृष्टिकोण से तैयार बोन्साई दृश्य परिणाम प्रस्तुत किया।

वह सब है!

इस आलेख में वर्णित रेंडरर चित्र 8 और चित्र 1 में दिखाए गए चित्रों के समान चित्र बनाने में सक्षम होगा। आप इसे ऑनलाइन भी परख सकते हैं। संक्षिप्तता के लिए, मैंने WebGL संदर्भ तैयार करने, वॉल्यूम टेक्सचर लोड करने और फ़ंक्शंस को लोड करने, शेड्स सेट करने और वॉल्यूम रेंडर करने के लिए क्यूब तैयार करने के लिए आवश्यक जावास्क्रिप्ट कोड को छोड़ दिया; पूर्ण रेंडर कोड Github पर संदर्भ के लिए उपलब्ध है।

WebGL में वॉल्यूमेट्रिक रेंडरिंग

1. परिचय

2. WebGL2 पर GPU कार्यान्वयन

More articles: