कलाकृतियों को पारदर्शी ऑब्जेक्ट के दोनों किनारों को तीन.जेएस

Question

के साथ प्रस्तुत करते समय मैं तीन पारियों के साथ पारदर्शी ऑब्जेक्ट के दोनों तरफ प्रस्तुत करने का प्रयास करता हूं। पारदर्शी वस्तु के भीतर स्थित अन्य वस्तुओं को भी दिखाना चाहिए। अफसोस की बात है कि मुझे कलाकृतियां मिलती हैं जिन्हें मैं बहुत संभाल नहीं जानता हूं। यहां एक परीक्षण पृष्ठ है: https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

यहां कहा गया आर्टिफैक्ट की एक छवि है। वे अंतर्निहित क्षेत्र ज्यामिति से निकलते प्रतीत होते हैं।

दिलचस्प कलाकृतियों मोड THREE.SubtractiveBlending = 2.

किसी भी मदद की सराहना की सम्मिश्रण के लिए दिखाई नहीं देते हैं!

एलेक्स

Answer 1

वेब-एल और तीन.जेएस में स्वयं पारदर्शिता विशेष रूप से कठिन है। आपको बस मुद्दों को वास्तव में समझना होगा, और फिर अपने इच्छित प्रभाव को प्राप्त करने के लिए अपना कोड अनुकूलित करना होगा।

आप एक चाल के साथ, Three.js में एक दो तरफा, पारदर्शी क्षेत्र के रंग-रूप को प्राप्त कर सकते हैं: आप दो पारदर्शी क्षेत्रों रेंडर करने के लिए की जरूरत है - material.side = THREE.BackSide के साथ, और material.side = THREE.FrontSide के साथ एक।

यदि आप कलाकृतियों के बिना आत्म-पारदर्शिता चाहते हैं तो आमतौर पर ऐसी विधियों का उपयोग करना आवश्यक है - खासकर यदि आप कैमरे या ऑब्जेक्ट को स्थानांतरित करने की अनुमति देते हैं। http://jsfiddle.net/unkya/17/

संपादित करें:

यहाँ एक बेला है अपडेट किया गया बेला Three.js को r.71

Answer 2

अल्फा सम्मिश्रण के साथ उस दृश्य को सही ढंग से प्रस्तुत करना करने के लिए, त्रिकोण वापस सामने करने के लिए प्रत्येक फ्रेम से प्रदान की जा करने के लिए होगा। आपका दृश्य विशेष रूप से चुनौतीपूर्ण है क्योंकि आपके पास एक वस्तु है, और दोनों पक्षों को प्रतिपादित करता है, जिसके लिए क्षेत्र के भाग को प्रतिपादित करने की आवश्यकता होती है, फिर घन, फिर शेष क्षेत्र। मुझे संदेह है कि तीन.जेएस (या कोई अन्य दृश्य ग्राफ लाइब्रेरी) इस मामले को संभाल सकता है।

योजक या घटाव मिश्रण बिना छंटाई के काम करेगा, लेकिन यह अच्छा नहीं दिखता है।

Answer 3

आम तौर पर पारदर्शी वस्तुओं को करने के लिए आपको उन्हें आगे की ओर क्रमबद्ध करने की आवश्यकता होती है (मुझे लगता है कि तीन .js पहले से ही यह कर रहा है)। यदि आपका ऑब्जेक्ट उत्तल है (जैसे दोनों हैं) तो आप कभी-कभी प्रत्येक ऑब्जेक्ट को दो बार प्रतिपादित करके प्राप्त कर सकते हैं, एक बार gl.cullFace (gl.CCW) और फिर gl.cullFace (gl.CW) के साथ। उदाहरण के लिए यदि घन क्षेत्र के अंदर है आप को प्रभावी ढंग से

gl.enable(gl.CULL_FACE); 
gl.cullFace(gl.CW); 
drawSphere(); // draws the back of the sphere 
drawCube(); // draws the back of the cube 
gl.cullFace(gl.CCW); 
drawCube(); // draws the front of the cube. 
drawSphere(); // draws the front of the sphere. 

मैं पता नहीं कैसे कि Three.js

में यह केवल वस्तुओं है कि उत्तल हैं संभालती है और अन्तर्विभाजक नहीं (एक मुझे क्या करना होगा चाहते हैं ऑब्जेक्ट पूरी तरह से दूसरे के अंदर निहित है)।

Answer 4

मूल जाल का एक clon करें और अपने normals फ्लिप; फिर प्रत्येक नाम के लिए प्रत्येक के लिए दो समान "एक तरफा" सामग्री बनाएं। सबसे उत्तम दर्जे का दृष्टिकोण नहीं है लेकिन यह ठीक काम करता है।

.json फ़ाइल इस तरह दिखता है पी:

{ 
"materials":[ 
    { "name":"ext", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 }, 
    { "name":"int", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 } 
], 
"meshes":[ 
    { 
     "name":"Cylinder001", 
     "material":"ext", ... 

    { 
     "name":"Cylinder002", 
     "material":"int", ...