Three.js: اتجاه CubeTexture

تقصد أن تكون قادرًا على تدوير scene.background ؟ إذا كان الأمر كذلك ... نعم ، بالتأكيد مهتم.

ربما نحتاج إلى واجهة برمجة تطبيقات جديدة على الرغم من ...

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

أنا أكافح مع هذا بالضبط الآن. محاولة الحصول على ظلال أرضية مخبوزة لتتوافق مع اتجاه الشمس من خريطة مكعب.
يبدو أنه في مكان ما على طول الطريق يتم قلب خريطة مكعباتي بمقدار 180 درجة. سيكون من الرائع أن أتمكن من إصلاح ذلك هنا بدلاً من إعادة عرض خريطة التكعيب عدة مرات ومحاولة اكتشاف مكان حدوث ذلك.

تضمين التغريدة

scene.rotation.y = Math.PI;

إذا لم يفلح ذلك ، يرجى تقديم مثال حي لتوضيح ما تفعله بالضبط.

أوه ، هذا يعمل؟ 😮 يجب أن تكون الكاميرا طفلًا في المشهد بالرغم من ذلك؟

يجب أن تكون الكاميرا طفل المشهد رغم ذلك؟

لا أعتقد أن هذا مهم.

@ mrdoob هذا هو بالضبط ما أحتاجه أيضًا :-)

WestLangley :

إن تدوير المشهد العام مبالغ فيه وقد يتسبب في العديد من الآثار الجانبية في تطبيقي.

أود أن أكون قادرًا على تدوير الخلفية فقط ، وبالتأكيد ، يجب أن تعمل خرائط البيئة بنفس الطريقة.

لا يمكن إجراء عرض توضيحي مباشر ، لأن واجهة برمجة التطبيقات مفقودة. من المهم أن نأخذ أي مثال باستخدام خريطة مكعب في الخلفية (مثل https://threejs.org/examples/#webgl_materials_cubemap) وأن تكون قادرًا على تدوير الخلفية فقط حول المحور ص. أو بشكل أعم ، لتطبيق أي دوران على الخلفية.

أن تكون قادرًا على تطبيق مصفوفة تناوب / رباعية مخصصة على أي خريطة مكعب هو الحل الأكثر عمومية بالنسبة لي.

تحرص three.js على التأكد من أن الانعكاسات المادية متسقة مع المادة envMap ، والتي تم تحديدها في نظام إحداثيات الفضاء العالمي. قد يؤدي السماح للمستخدمين بتدوير خلفية المشهد إلى خلفية غير متوافقة مع الانعكاسات المادية.

لماذا لا تنشئ خريطة مكعب العالم-الفضاء الصحيحة في تطبيقك؟

يجب أن تكون الكاميرا طفل المشهد رغم ذلك؟

لا أعتقد أن هذا مهم.

حاولت عمل scene.rotation.y ++ في وحدة التحكم في webgl_materials_standard وتدور البندقية. ثم حاولت عمل scene.add( camera ) ثم إذا قمت بعمل scene.rotation.y ++ فإنه يفعل ما نسعى إليه ، ولكن بعد ذلك تتسبب عناصر التحكم في الكاميرا في حدوث أخطاء 😁

إذا قدمنا ​​كائن THREE.Background ، يمكننا إضافة API للتعامل مع هذا ، بالإضافة إلى العارض يمكننا أيضًا تقديم فكرة:

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

انا قلت

جرب scene.rotation.y = Math.PI؛ إذا لم ينجح ذلك ، ...

هذا يعني أنه قد لا يعمل. :-)

ذلك يعتمد على حالة الاستخدام. حاولت باستخدام OrbitControls وعملت بشكل جيد.

غير ذي صلة: يجب أن يستخدم المثال webgl_materials_standard عناصر التحكم في المدار ، على أي حال IMO.

تقصد أن تكون قادرًا على تدوير خلفية المشهد؟ إذا كان الأمر كذلك ... نعم ، بالتأكيد مهتم.

من المنطقي القيام بذلك على مستوى النسيج ، وإلا فإن أي إضاءة IBL لن تتطابق مع الخلفية ، على ما أفترض.

نحن نسمح بتناوب القوام الطبيعي ، فهل هناك أي سبب يمنعنا من فعل الشيء نفسه بالنسبة للقوام المكعب؟ هل هو معقد للغاية للتنفيذ؟

لماذا لا تنشئ خريطة مكعب العالم-الفضاء الصحيحة في تطبيقك؟

هذا وقتا طويلا جدا. لقد كنت أعمل على إنشاء خرائط مكعب على مدار اليومين الماضيين ، واستغرق إجراء التغييرات ثم إعادة عرض خريطة المكعب مني حوالي 15-20 دقيقة لكل تغيير.

هناك حالة استخدام أخرى مثيرة للاهتمام وهي أنه يمكنك تغيير اتجاه الإضاءة البيئية في الوقت الفعلي. أقوم حاليًا بدمج خريطة بيئة PMREM مع ضوء اتجاهي للظلال في الوقت الفعلي ، واستخدام الخريطة كصندوق سماوي ، مما يعطي تأثير ضوء النهار اللائق.
من الواضح أن هناك حدًا لما يمكنك فعله دون تغيير لون خريطة البيئة ، ولكن يمكنك محاكاة مرور ساعتين على الأقل من ضوء النهار عن طريق تدوير الخريطة بالتزامن مع ضوء الاتجاه أثناء ضبط .envMapIntensity .

قلقي هو أيضا حول الأداء. قمت حاليًا بتنفيذ اختراق على وشك تدوير النسيج العلوي والسفلي ومبادلة الملمس الآخر. يستغرق الأمر حوالي 10 مللي ثانية لتدوير نسيج 1024 × 1024 في JS.

بدلاً من ذلك ، هل يمكن أن يكون لديك خياران فقط لاتجاه CubeTexture ، الخيار الذي لديك حاليًا والآخر (مع دوران 180 درجة) والذي سيكون مناسبًا للمعيار الآخر المستخدم بشكل كبير في تنسيقات ثلاثية الأبعاد (X3D ، VRML ، إلخ. .). ربما يمكننا بسهولة تكييف الاتساق مع الانعكاسات المادية للتعامل مع كلا الصيغتين؟

هذا يبدو مألوفًا # 11103

إذا قمت بتطبيق CubeMap.rotation = matrix3 ، فهل ستدمج في r105؟

قلقي هو أيضا حول الأداء. قمت حاليًا بتنفيذ اختراق على وشك تدوير النسيج العلوي والسفلي ومبادلة الملمس الآخر. يستغرق الأمر حوالي 10 مللي ثانية لتدوير نسيج 1024 × 1024 في JS.

وكم مرة تفعل هذا في تطبيقك؟

WestLangley أنا فقط أعطيك إجابة مفصلة هنا: https://github.com/mrdoob/three.js/pull/16507#discussion_r286337864

وكم مرة تفعل هذا في تطبيقك؟

ليس كثيرا. مرة واحدة عند التحميل لكل عميل ، ومرة ​​في كل مرة يتم تغيير الخلفية (حالة نادرة جدًا). DEFINE من شأنه أيضًا القيام بهذه المهمة.

قلقي أيضًا يتعلق بالأداء ... يستغرق حوالي 10 مللي ثانية.

وكم مرة تفعل هذا في تطبيقك؟

ليس كثيرا. مرة واحدة عند التحميل لكل عميل ، ومرة ​​في كل مرة يتم تغيير الخلفية (حالة نادرة جدًا).

آسف ، أنا لا أتبع منطق ذلك.

لسوء الحظ ، WestLangley لا تريد دمج تعديلي حول CubeTexture.rotation بسبب زيادة وقت التشغيل (مضاعفة mat3 إضافية). في هذه الحالة ، نفد من الأفكار لحل هذا بطريقة نظيفة في threejs.
إذا لم يتمكن مساهمو threejs من حل هذه المشكلة ، فالرجاء إغلاق هذه المشكلة.

أنتظر تنفيذ هذه الميزة.

FishOrBear للأسف ، threejs عدم تنفيذ ذلك. يمكنك تطبيق هذا التصحيح غير المدمج في شوكة ، إذا كنت ترغب في الحصول على هذا في مشروعك:

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

mrdoob ربما يمكننا إعادة النظر في طلبات الميزة هذه في # 18157؟

أنا أستخدم threejs لإنشاء تطبيق مشابه لبرنامج AutoCAD ، لذلك نستخدم xy للجلوس كطائرة.

يتعارض CubeTexture الحالي قليلاً مع نظامنا.

راجع للشغل: مع Babylon.js ، من الممكن على الأقل تدوير Skybox حول المحور y:

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

يدعم المحرك هذا عن طريق تحويل متجه الانعكاس في تظليل الشظايا. هذا هو بالضبط النهج الذي لم يتم قبوله في # 16507. كود من Babylon.js جزء تظليل:

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: تم حساب البيئة مسبقًا مرة واحدة ولا يلزم تدويرها في الظل. يمكن أن يقوم المستخدم بذلك إما على وحدة المعالجة المركزية أو حتى على وحدة معالجة الرسومات إذا أراد ذلك
• حالة الاستخدام 2: عند العمل على عارض ، من الشائع تمامًا تدوير الخلفية في الوقت الفعلي باستخدام الماوس على سبيل المثال.

من أجل منع المستخدم في حالة الاستخدام 1 من أن يتأثر بضرب المصفوفة ، ربما يمكننا ببساطة إضافة علامة مثل:

renderer.dynamicBackground = true;

وتجميع تظليل الخلفية وفقًا لذلك؟

في هذه الأثناء

كماwmcmurray وأشارcapnmidnight، يمكنك أساسا إعادة رمز جعل الخلفية الخاصة بك وانها ليست بهذه الصعوبة. فقط كن حذرا للغاية مع مستوى العرض (القيم القريبة والبعيدة).

بدلاً من استخدام MeshBasicMaterial ، يمكنك أيضًا إنشاء التظليل الخاص بك مباشرةً بتمديد ShaderMaterial وتجربة مخطط مكعب.