Three.js: क्यूबटेक्स्चर ओरिएंटेशन

आपका मतलब scene.background घुमाने में सक्षम होना है? यदि हां ... हां, निश्चित रूप से दिलचस्पी है।

हालांकि हमें शायद एक नए एपीआई की जरूरत है ...

scene.background = new THREE.Background( cubeTexture );`
scene.background.rotation.y = Math.PI / 2;

मैं अभी ठीक इसी से जूझ रहा हूं। एक क्यूबमैप से सूर्य की दिशा से मेल खाने के लिए बेक्ड ग्राउंड शैडो प्राप्त करने का प्रयास करना।
ऐसा लगता है जैसे कहीं मेरे क्यूबमैप को 180 डिग्री फ़्लिप किया जा रहा है। यह बहुत अच्छा होगा अगर मैं अपने क्यूबमैप को कई बार फिर से प्रस्तुत करने और यह पता लगाने की कोशिश कर रहा हूं कि यह कहां हो रहा है।

@fabienrohrer कोशिश करो

scene.rotation.y = Math.PI;

यदि वह काम नहीं कर रहा है, तो आप जो कर रहे हैं उसे प्रदर्शित करने के लिए कृपया एक जीवंत उदाहरण प्रदान करें।

ओह, यह काम करता है? हालांकि कैमरा दृश्य का बच्चा होना चाहिए?

कैमरा दृश्य का एक बच्चा होना चाहिए, हालांकि?

मुझे नहीं लगता कि यह मायने रखता है।

@mrdoob यह वही है जो मुझे भी चाहिए :-)

@वेस्टलैंगली :

समग्र दृश्य को घुमाना अधिक है और मेरे ऐप में कई दुष्प्रभाव हो सकते हैं।

मैं केवल पृष्ठभूमि को घुमाने में सक्षम होना चाहता हूं, और निश्चित रूप से, पर्यावरण मानचित्रों को उसी तरह काम करना चाहिए।

एक लाइव डेमो करना संभव नहीं है, क्योंकि एपीआई गायब है। पृष्ठभूमि क्यूबमैप (जैसे https://threejs.org/examples/#webgl_materials_cubemap) वाले किसी भी उदाहरण को लेना और y-अक्ष के चारों ओर केवल पृष्ठभूमि को घुमाने में सक्षम होना एक बात है। या अधिक आम तौर पर, पृष्ठभूमि में किसी भी रोटेशन को लागू करने के लिए।

किसी भी क्यूबमैप में कस्टम रोटेशन मैट्रिक्स/क्वाटरनियन लागू करने में सक्षम होने के कारण मेरे लिए सबसे सामान्य समाधान प्रतीत होता है।

three.js यह सुनिश्चित करने के लिए सावधान है कि भौतिक प्रतिबिंब सामग्री envMap अनुरूप हैं, जिसे विश्व अंतरिक्ष समन्वय प्रणाली में परिभाषित किया गया है। उपयोगकर्ताओं को दृश्य पृष्ठभूमि को घुमाने की अनुमति देने से एक ऐसी पृष्ठभूमि बन जाएगी जो भौतिक प्रतिबिंबों के साथ असंगत है।

आप अपने ऐप में सही वर्ल्ड-स्पेस क्यूब मैप क्यों नहीं बनाते?

कैमरा दृश्य का एक बच्चा होना चाहिए, हालांकि?

मुझे नहीं लगता कि यह मायने रखता है।

मैंने webgl_materials_standard में कंसोल में scene.rotation.y ++ करने की कोशिश की और बंदूक घूमती है। फिर मैंने scene.add( camera ) करने की कोशिश की और फिर अगर मैं scene.rotation.y ++ करता हूं तो यह वही करता है जो हम कर रहे हैं, लेकिन फिर कैमरा नियंत्रण गड़बड़ हो जाता है

यदि हम THREE.Background ऑब्जेक्ट पेश करते हैं, तो हम इसे संभालने के लिए एपीआई जोड़ सकते हैं, साथ ही रेंडरर में हम इस विचार को भी पेश कर सकते हैं:

var envMap = material.envMap;
if ( scene.background && scene.background.isBackground && envMap === null ) {
    envMap = scene.background.texture;
}

मैंने कहा

दृश्य का प्रयास करें.रोटेशन.y = Math.PI; अगर वह काम नहीं कर रहा है,...

इसका मतलब है कि यह काम नहीं कर सकता है। :-)

यह उपयोग-मामले पर निर्भर करता है। मैंने OrbitControls साथ प्रयास किया और यह ठीक काम किया।

असंबंधित: webgl_materials_standard उदाहरण कक्षा नियंत्रण का उपयोग करना चाहिए, वैसे भी आईएमओ।

आपका मतलब दृश्य को घुमाने में सक्षम होना है।पृष्ठभूमि? यदि हां ... हां, निश्चित रूप से दिलचस्पी है।

यह बनावट स्तर पर ऐसा करने के लिए और अधिक समझ में आता है, अन्यथा कोई भी आईबीएल प्रकाश पृष्ठभूमि से मेल नहीं खाएगा, मुझे लगता है।

हम सामान्य बनावट के रोटेशन की अनुमति देते हैं, क्या कोई कारण है कि हम घन बनावट के लिए ऐसा नहीं करना चाहेंगे? क्या इसे लागू करना बहुत जटिल है?

आप अपने ऐप में सही वर्ल्ड-स्पेस क्यूब मैप क्यों नहीं बनाते?

यह बहुत समय लेने वाला है। मैं पिछले कुछ दिनों में क्यूब मैप बनाने पर काम कर रहा हूं, और फिर क्यूब मैप को फिर से रेंडर करने में मुझे प्रत्येक बदलाव के लिए लगभग 15-20 मिनट का समय लगता है।

इसके लिए एक और संभावित दिलचस्प उपयोग मामला यह है कि आप वास्तविक समय में पर्यावरणीय प्रकाश व्यवस्था की दिशा बदल सकते हैं। मैं वर्तमान में रीयल-टाइम छाया के लिए एक दिशात्मक प्रकाश के साथ एक PMREM पर्यावरण मानचित्र का संयोजन कर रहा हूं, और मानचित्र को स्काईबॉक्स के रूप में उपयोग कर रहा हूं, जो काफी सभ्य दिन के उजाले प्रभाव देता है।
स्पष्ट रूप से पर्यावरण मानचित्र के रंग को बदले बिना आप क्या कर सकते हैं इसकी एक सीमा है, लेकिन आप .envMapIntensity को समायोजित करते हुए मानचित्र को दिशात्मक प्रकाश के साथ सिंक में घुमाकर कम से कम कुछ घंटों के दिन के उजाले का अनुकरण कर सकते हैं। .

मेरी चिंता प्रदर्शन को लेकर भी है। वर्तमान में मैंने ऊपर और नीचे की बनावट को घुमाने और दूसरे को स्वैप करने के बारे में एक हैक लागू किया। JS में 1024x1024 बनावट को घुमाने में लगभग 10ms लगते हैं।

वैकल्पिक रूप से, क्या क्यूबटेक्स्चर ओरिएंटेशन के लिए केवल दो विकल्प होना संभव हो सकता है, एक जो आपके पास वर्तमान में है और दूसरा (180 डिग्री रोटेशन के साथ) जो अन्य मानक के अनुकूल होगा जो बड़े पैमाने पर 3 डी प्रारूपों (एक्स 3 डी, वीआरएमएल, आदि) में उपयोग किया जाता है। ।) हम शायद दोनों प्रारूपों को संभालने के लिए भौतिक प्रतिबिंबों के साथ संगति को आसानी से अनुकूलित कर सकते हैं?

यह परिचित लगता है #11103

अगर मैं CubeMap.rotation = matrix3 , तो क्या आप r105 में विलय कर देते?

मेरी चिंता प्रदर्शन को लेकर भी है। वर्तमान में मैंने ऊपर और नीचे की बनावट को घुमाने और दूसरे को स्वैप करने के बारे में एक हैक लागू किया। JS में 1024x1024 बनावट को घुमाने में लगभग 10ms लगते हैं।

और आप इसे अपने ऐप में कितनी बार कर रहे हैं?

@WestLangley मैं आपको यहाँ एक विस्तृत उत्तर देता हूँ: https://github.com/mrdoob/three.js/pull/16507#discussion_r286337864

और आप इसे अपने ऐप में कितनी बार कर रहे हैं?

बहुत ज्यादा नहीं। एक बार प्रति ग्राहक लोड होने पर, और एक बार हर बार पृष्ठभूमि बदली जाती है (बहुत दुर्लभ मामला)। एक DEFINE भी काम करेगा।

मेरी चिंता प्रदर्शन के बारे में भी है ... इसमें लगभग 10ms लगते हैं।

और आप इसे अपने ऐप में कितनी बार कर रहे हैं?

बहुत ज्यादा नहीं। एक बार प्रति ग्राहक लोड होने पर, और एक बार हर बार पृष्ठभूमि बदली जाती है (बहुत दुर्लभ मामला)।

क्षमा करें, मैं उसके तर्क का पालन नहीं कर रहा हूं।

दुर्भाग्य से, @WestLangley रनटाइम ओवरहेड (एक पूरक mat3 गुणन) के कारण CubeTexture.rotation के बारे में मेरे संशोधन को मर्ज नहीं करना चाहता। इस मामले में, मैं तीनjs में इसे सफाई से हल करने के लिए विचारों से बाहर हो रहा हूं।
अगर threejs योगदानकर्ता इसे हल नहीं करेंगे, तो कृपया इस मुद्दे को बंद करें।

मैं इस सुविधा के लागू होने की प्रतीक्षा कर रहा हूं।

@FishOrBear दुर्भाग्य से, threejs अनुरक्षकों ने इसे लागू नहीं करने का निर्णय लिया। यदि आप इसे अपने प्रोजेक्ट में रखना चाहते हैं, तो आप इस अनमर्ज किए गए पैच को एक कांटे में लगा सकते हैं:

https://github.com/mrdoob/three.js/pull/16507

@mrdoob शायद हम #

मैं ऑटोकैड के समान एप्लिकेशन बनाने के लिए थ्रीजेएस का उपयोग कर रहा हूं, इसलिए हम एक विमान के रूप में बैठने के लिए xy का उपयोग करते हैं।

वर्तमान क्यूबटेक्स्चर हमारे साथ थोड़ा संघर्ष करता है।

BTW: Babylon.js के साथ, स्काईबॉक्स को y-अक्ष के चारों ओर घुमाना कम से कम संभव है:

https://www.babylonjs-playground.com/#UU7RQ #447

इंजन फ्रैगमेंट शेडर में परावर्तन वेक्टर को बदलकर इसका समर्थन करता है। तो ठीक वही दृष्टिकोण जिसे #16507 में स्वीकार नहीं किया गया था। बेबीलोन.जेएस फ्रैगमेंट शेडर से कोड:

https://github.com/BabylonJS/Babylon.js/blob/1c4627141f83c08fe4a7e30e2621c916b4e6c9c9/src/Shaders/ShadersInclude/reflectionFunction.fx#L114 -L117

@mrdoob मुझे लगता है कि हमें इस सुविधा को लागू करना चाहिए। मंच में एक और अनुरोध है:

https://discourse.threejs.org/t/rotate-a-scenes-background-skybox-texture/12199

मुझे संदेह है कि प्रति खंड एक अतिरिक्त मैट्रिक्स/वेक्टर गुणा प्रदर्शन को उल्लेखनीय रूप से प्रभावित करेगा।

मेरे ऐप में अभी भी वही समस्या है, और इसे हल करने के लिए हैक बदसूरत और इतना महंगा है ... मैं भी इस सुधार को स्वीकार करने की अनुशंसा करता हूं।

मैं भी इस सुविधा को जोड़ा देखना पसंद करूंगा।

ऐसा लगता है कि अवरोधक प्रदर्शन में संभावित कमी है, लेकिन इसका परीक्षण करना आसान होना चाहिए। हम इसे जोड़ने का प्रयास कर सकते हैं, और यदि कोई अस्वीकार्य प्रदर्शन गिरावट है तो हम इसे फिर से हटा सकते हैं।

यहां वही, मेरी पृष्ठभूमि प्रतिपादन को फिर से कार्यान्वित करने के बजाय इस सुविधा का उपयोग कर सकता है :)

मैं प्रदर्शन के मुद्दे पर पालन करने के लिए निश्चित नहीं हूं। कुछ भी नहीं हमें सीधे वर्टेक्स शेडर में किरण दिशा उत्पन्न करने से रोकता है? तब इसकी लागत किसी भी अन्य modelMatrix रूपांतरण जितनी होगी।

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

एक तरीका यह है कि मैंने यह किया है कि रोटेशन को एक चर के रूप में संग्रहीत करना है, इसे प्रतिपादन से ठीक पहले दृश्य पर लागू करना है, और फिर दृश्यों के रोटेशन को पहचान क्वाट पर रीसेट करने के बाद रीसेट करना है।

यह मेरे सभी दृश्य वस्तुओं के विश्व मैट्रिसेस में दो अनावश्यक अपडेट का कारण बनता है। इसका मतलब यह भी है कि मैं onBeforeRender में कोई भी स्थिति अपडेट नहीं कर सकता। लेकिन यह दृश्य को सामान्य स्थिति में रखता है अन्यथा।

बीटीडब्ल्यू (चूंकि किसी ने इसका उल्लेख नहीं किया है), ऐसा लगता है कि "क्लासिक" स्काईबॉक्स बनाना संभव है जो 6 सामग्रियों की एक सरणी का उपयोग करके घूमता है।

कुछ इस तरह :

const urls = [
  '/assets/skybox/right.png',
  '/assets/skybox/left.png',
  '/assets/skybox/top.png',
  '/assets/skybox/bottom.png',
  '/assets/skybox/front.png',
  '/assets/skybox/back.png',
];

const materials = urls.map((url) => {
  const texture = new THREE.TextureLoader().load(url);

  return new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide,
    fog: false,
    depthWrite: false,
  });
});

const skybox = new THREE.Mesh( new THREE.BoxBufferGeometry(10000, 10000, 10000), materials );
scene.add(skybox);

skybox.rotation.y = Math.PI / 2;

जैसा कि यहां दिखाया गया है: https://woodenraft.games/demos/skybox-rotation-threejs.html

@wmcmurray आपको इस

क्या हमें उसके लिए पीआर फिर से खोलना चाहिए? दो उपयोग के मामले हैं और यदि हम प्रदर्शन को प्रभावित नहीं करना चाहते हैं तो हम एक शेडर परिभाषित का उपयोग कर सकते हैं:

• केस 1 का उपयोग करें: पर्यावरण एक बार पूर्व-गणना की जाती है और इसे शेडर में घुमाने की आवश्यकता नहीं होनी चाहिए। यह उपयोगकर्ता द्वारा या तो CPU पर, या यहां तक ​​कि GPU पर भी किया जा सकता है यदि वह चाहता है
• केस 2 का उपयोग करें: एक दर्शक पर काम करते समय, उदाहरण के लिए माउस का उपयोग करके वास्तविक समय में पृष्ठभूमि को घुमाना काफी सामान्य है।

उपयोग के मामले 1 वाले उपयोगकर्ता को मैट्रिक्स गुणन से प्रभावित होने से रोकने के लिए, शायद हम बस एक ध्वज जोड़ सकते हैं जैसे:

renderer.dynamicBackground = true;

और तदनुसार पृष्ठभूमि शेडर संकलित करें?

इस बीच में

जैसा कि @wmcmurray और @capnmidnight ने बताया, आप मूल रूप से अपने बैकग्राउंड रेंडरिंग को फिर से कोड कर सकते हैं और यह उतना मुश्किल नहीं है। बस देखने के विमान (निकट और दूर के मूल्यों) के साथ अतिरिक्त सावधान रहें।

MeshBasicMaterial का उपयोग करने के बजाय, आप ShaderMaterial विस्तार करते हुए सीधे अपना खुद का शेडर भी बना सकते हैं और क्यूबमैप का नमूना ले सकते हैं।