Three.js: طلب الميزة: انعكاسات مساحة الشاشة

قلقي الوحيد هنا هو أنه لا يعمل بشكل جيد مع عرض الاستريو ، لذلك سيكون صعبًا في WebVR ، لكن من فضلك لا تعتقد أنني ضد الميزة :): +1:

فقط قم بإيقاف تشغيله في VR. لا تعمل الكثير من التأثيرات المكلفة بشكل جيد في الواقع الافتراضي. يقترح UE4 حتى المضي قدمًا في العرض الأمامي بدلاً من تأجيله في سياق VR لأغراض السرعة.

بالضبط ، وهذا هو السبب في أنني لست ضدها.

لقد عثرت هنا بالصدفة أثناء العمل على تنفيذ React Native لرسم خرائط الانعكاس ، تعد انعكاسات مساحة الشاشة رائعة بالنسبة للألعاب بخلاف الواقع الافتراضي.

THREE.Reflector يعمل في الواقع الافتراضي ✌️
https://threejs.org/examples/webvr_sandbox.html

لطيف - جيد!

على الرغم من أنني أحصل على "لم يتم العثور على VR" حتى في Nightly ، لكنني سأتحقق من ذلك.

لم تكن مشكلتي الخاصة (التي ليست في OP) هي حل مشكلة الانعكاس ، بل كانت تتعلق بكيفية إنشاء كائنات three.js الأصلية ، وعرضها في مشهد وعارض ReactVR الحالي. لقد حصلت على نتائج جيدة ، الشيء الوحيد هو أن صورة الخلفية كانت غريبة بعض الشيء ، لذا تبدو الانعكاسات غريبة - ولكن هذا كما هو متوقع ، فإن React VR تخلق كرة من الداخل إلى الخارج من أجل بانوراما الخلفية. لم أجرب خريطة المكعب ، لكن هذا قد يعمل بشكل أفضل.

لقد انتهيت من صفحات الكتاب ، لذا من المحتمل أن أترك العرض التوضيحي الحالي كما هو ، لكن هذا يبدو وكأنه أسلوب رائع.

كنت أرغب في معرفة المزيد عن هذا النوع من التأثير ، لذلك حاولت يدي في صنع تأثير الملحن له. لا يزال هناك بعض العمل الذي يمكن القيام به ولكن هذا ما جمعته معًا بناءً على تطبيق Kode80 ومدونة Morgan McGuire (يستغرق مشهد sponza قليلاً للتحميل):

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

بعض الأشياء التي يجب القيام بها بعد ذلك هي تنظيف القطع الأثرية ، والانعكاسات اللامعة (مع تمويه التمويه أو أخذ عينات خريطة Mip + هرم خريطة العمق) والارتدادات المتعددة عبر إعادة الإسقاط الزمني.

إذا كان أي شخص مهتمًا بالفعل باستخدام هذا التأثير ، فسيسعدني العمل مع شخص ما لتحسين هذا الأمر أكثر قليلاً!

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

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

يبدو أن العرض التوضيحي الخاص بك لا يستجيب إلى حد كبير

هل أنت قادر على رؤية العرض؟ قد تكون الشاشة سوداء لبضع ثوانٍ أو نحو ذلك لأن مشهد Sponza سيستغرق قليلاً للتنزيل اعتمادًا على اتصالك.

إذا لم يكن يعمل على الإطلاق ، فيمكنني إلقاء نظرة على إنشاء شيء أبسط - إنه يعمل على Pixel 2 ، على الرغم من ذلك

سيكون التبديل على إيقاف التشغيل أمرًا رائعًا.

يبدو تحويل شريط التمرير "شدة" إلى 0 كما هو الحال عند إيقاف تشغيله ، على الرغم من استمرار تتبع الأشعة ، لذا لن يكون هناك أي اختلاف في الأداء في هذه الحالة إذا كان هذا هو ما تبحث عنه.

تضمين التغريدة على جهاز Mac الخاص بي ، يظهر العرض التوضيحي الخاص بك باللون الأسود لبعض الوقت ، ثم يكون معدل الإطارات 4.

WestLangley إنه تأثير يعتمد على الدقة للغاية ، لذا إذا قمت

gkjohnson كيف

bicubic في الوقت الحالي ، لم يتم أخذ أي سمات سطحية بعين الاعتبار ، لكن لا ينبغي أن يكون من الصعب جدًا إضافة نسخة أساسية من ذلك. يمكن أن يتلاشى التأثير أو يطمسه بناءً على خاصية الانعكاس / الخشونة للمادة.

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

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

سيكون من المفيد أكثر أن تكون قادرًا على تحديد الأشياء على أنها عاكسة / غير عاكسة. في الوقت الحالي ، كل شيء عاكس ، بما في ذلك أشياء مثل الستائر والنباتات. من الناحية المثالية ، يجب أن تكون الأرضية فقط عاكسة في هذا العرض التوضيحي.

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

أود أن أرى هذا يصبح جزءًا من إمكانيات three.js الافتراضية.

هناك الكثير من الأشياء مثل هذه التي تجعلك تتساءل عما إذا كان يجب أن تصبح بنية العارض المؤجلة جزءًا من العرض الافتراضي. خاصة بالنسبة لـ webgl2.0

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

تضمين التغريدة
أوافق على أنني أرغب حقًا في رؤية مسار عرض مؤجل مخصص أيضًا. مع WebGL2 ومواد العرض المتعددة ، يكون الأمر أكثر قابلية للتطبيق.

تضمين التغريدة
يعتمد ذلك على التأثير الذي تريده ولكن مع الطريقة التي وصفتها ، فإن قيمة الخشونة المعروضة ستعمل بشكل فعال كقناع للمشهد بقيمة خشونة 1 تعني "عدم عرض أي انعكاس عند هذا البكسل" وقيمة 0 تعني "العرض ممتلئًا انعكاس في هذه البكسل ". القيم الواقعة بينهما ستعرض الانعكاسات بكثافة جزئية. يظهر شريط التمرير intensity في العرض التوضيحي التأثير (ولكن من الواضح أنه للمشهد بأكمله بدلاً من كل بكسل).

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

قيمة الخشونة 1 تعني "عدم عرض أي انعكاس عند هذه البكسل" وقيمة 0 تعني "عرض انعكاس كامل عند هذه البكسل".

يبدو أن هذا يمكن أن يعمل بشكل جيد. يستخدم Unreal معامل "أقصى خشونة" ويوصي بضبطه على 0.8.

وجه الفتاة

تضمين التغريدة
هذا ممتع للغاية وأنا أحب نتيجتك ، أنا أدمجها في عارض WebGL2 / MRT الآن وسأجربها. هل لاحظت أنك قمت بإنشاء مادة في كل استدعاء للاستدعاء؟
this.scene.overrideMaterial = this.createPackedMaterial();

Fyrestar شكرا! وأنا لم ألاحظ ذلك! ولكن كما قلت ، أعتقد أنه لا يزال هناك القليل من التنظيف والأداء ربما لم يصل إلى نقطة يمكن استخدامها بشكل كبير ، حتى الآن.

هذه الأنواع من التأثيرات مناسبة بشكل أفضل للعارض المؤجل أكثر من إعادة التوجيه ، على أي حال (من المفترض أنك تعمل عليها). كنت أرغب في تجميع هذا وبعض التأثيرات الأخرى عالية الجودة ، لكنني أميل إلى الانتظار حتى يتوفر عارض مؤجل مناسب قبل تخصيص المزيد من الوقت لذلك. هل العارض المؤجل / عارض MRT الذي تعمل عليه متاح على Github؟

لقد قمت بدمجه الآن ، بينما تمرر SSR مخرجات إلى RT دقة أقل ، فقط الانعكاسات بشكل أساسي ثم دمجها باستخدام ضبابية العمق مع الصورة الرئيسية لإزالة / تقليل الأخطاء. أقدم قيم الخشونة إلى سمات RT واستخدمها مرة أخرى لتحديد قوة التمويه مع كون 1 غير مرئي لتجاهل الجزء.

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

أنا أستخدمه مع محرك مخصص في الأعلى على ثلاثة ، وليس باستخدام مكون THREE. THREE جاهزة بالفعل لاستخدام سياق WebGL2 في WebGLRenderer الحالي ، لقد أضفت MRT هناك. سأضعه على جيثب قريبًا على ما أعتقد. لا يزال يتطلب عرض المشهد مرة ثانية لمخزن عمق الواجهة الخلفية ، لكن هذا ليس مكلفًا للغاية.

تضمين التغريدة
يا أي أخبار عن؟

لقد قمت بكتابة رسالتي الخاصة وإجراء العلاقات العامة إلى three.js ، ولكن الآن فقط أدعم OrthographicCamera ، أحاول دعم PerspectiveCamera.
تجريبي تجريبي 2

دعم PerspectiveCamera على ما يرام الآن. https://github.com/mrdoob/three.js/pull/20156

تجريبي

هذا جميل و إنجاز. إنه بطيء جدًا على جهازي - أحصل على 5 إطارات في الثانية بدقة 1920 × 1080. ما هو الفرق بين التنفيذ الخاص بك و Sketchfab's؟ أظن أننا إذا عرفنا الاختلاف ، فسنعرف كيف نحسن لك ....

bhouston شكرا!

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

لقد حاولت عرض كود Sketchfab ، لكنني فشلت. سأحاول مرة أخرى ، لكني لا أشعر بالكثير من الأمل. إذا كان لدى أي شخص رمز Sketchfab ، فيرجى مشاركته ، شكرًا!

------تعديل------
بالإضافة إلى ذلك ، لا يتم ملء نافذة العرض في Sketchfab افتراضيًا ، ويتوقف العرض عند عدم وجود أي عملية.
إذا تم وضع ملء الشاشة واستمر في التدوير ، فسيكون حتى المشهد البسيط أيضًا استخدامًا عاليًا لوحدة معالجة الرسومات.

gonnavis يجب أن يكون رمز shader لهذا المثال قابلاً للعرض عبر امتداد Spector.js Chrome.

مجرد اللعب مع Sketchfab أستطيع أن أرى أنهم يغيرون دقة SSR الخاصة بهم ويقومون بتحسينها. لن أتفاجأ إذا كانت من 3 إلى 5 مستويات جودة يقفزون من خلالها تدريجياً. يضمن ذلك وجود معدل عرض تفاعلي للإطار ولكنه يتطور ليصبح مثاليًا عندما يكون ثابتًا.

يضمن ذلك وجود معدل عرض تفاعلي للإطار ولكنه يتطور ليصبح مثاليًا عندما يكون ثابتًا.

الجانب السلبي هو أن هناك قفزة ملحوظة عندما تتوقف الكاميرا عن الحركة ويتم تبديل مستويات الجودة. إنها أكثر وضوحا في بعض المشاهد من غيرها. هنا واحد حيث يكون واضحًا جدًا.

تحرير: يفعلون ذلك بأكثر من مجرد انعكاسات - يبدو أن الأضواء والظلال والانعكاسات وربما دقة النسيج يتم تحسينها تدريجياً. شاهد الضوء / الظل على الحائط الخلفي لهذا المشهد .

عندما كنت أقوم بتجربة SSRR أعلاه ، أشرت إلى مقال Morgan Mcguire هنا قليلاً ، وهو ما يشرح بعض التقنيات التي يبدو أن Sketchfab قد يستخدمها.

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

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

أشعر بالفضول لمعرفة كيفية تعامل Sketchfab مع الانعكاسات الخشنة التي تمويه بناءً على مسافة الانعكاس. لقد رأيت أن محرك Godot يقوم بعمل تمويه بعد ذلك بنصف قطر بناءً على مسافة الشعاع وخشونة السطح ولكن هذا ينتج عنه قطع أثرية لا أشعر أنني أراها هنا. سأضطر إلى البحث عن Spector.js عندما تسنح لي الفرصة (شكرًا للنصيحةWestLangley!). تقترح ورقة Frostbitebhouston المنشورة في البداية استخدام هرم عمق عندما يسير الشعاع ولكن توليد ذلك يمكن أن يكون ألمًا في webgl1 (وربما 2؟).

تبدو جيدة @ gonnavis! مسرور لرؤيتها قد تصل إلى المكتبة.

تضمين التغريدة ولكن عندما أستخدم Spector.js على Sketchfab ، حصلت على "لم يتم اكتشاف أي إطارات بها أوامر gl. حاول تحريك الكاميرا." خطأ.

أشك في أنه بعد تحسين SSRPass كما قلت سابقًا ، سيظل أداء Sketchfab رائداً بشكل كبير. خاصة في حالة تقديم المستمر وأي استراتيجية خفض كماlooeeebhouston المذكورة. حتى أنني أعتقد أنه إذا لم تتحدث عن تفاصيل التنفيذ ، فقد يكون المفهوم الأساسي لـ SSRPass هو الحل الأمثل بالفعل.

gkjohnson شكرًا على

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

أوصي بعلامة تبويب الرسومات في Safari:

إذا كنت تستخدم Linux ، فيمكنك استخدام Epiphany (المعروف أيضًا باسم Gnome Web):
https://webkit.org/downloads/

لا أعتقد أن هناك أي إصدار WebKit لنظام التشغيل Windows على الرغم من ...

@ mrdoob شكرا! على الرغم من أنني أستخدم النوافذ بشكل أساسي ، إلا أنني سأحاول استخدام نظام Mac إذا لزم الأمر.

لكنني أتساءل عما إذا كان مسموحًا بتحميل كود Sketchfab على مكتبة مفتوحة المصدر ، إذا وجدت أي أشياء مفيدة مثل وظيفة glsl؟

هيكل هذا SSRPass هو قاعدة على three.js SSAOPass ، وعرض استخدامات المشهد three.js سبيل المثال webgl_shading_physical ، مفتاح وظيفة pointToLineDistance تأتي من wolfram.com ، وغيرها كتب أساسا من بلدي (طبعا يعتمد على الكثير من الخبرة السابقة الأخرى، خاصة أمثلة three.js الأخرى). أعتقد أن هذه كلها ليست مشكلة ، لكن هل هي نفس حالة كود Sketchfab؟

شكرا! ولكن عندما أستخدم Spector.js على Sketchfab ، حصلت على "لم يتم اكتشاف أي إطارات بها أوامر gl. حاول تحريك الكاميرا." خطأ.

قم بالتمرير بالماوس لتكبير الكاميرا. يجب أن يكون ذلك كافيا لتحريك سبيكتور.

أيضًا ، استخدم مشهدًا ثابتًا في مثالك لا يتطلب حلقة تصيير. حاليًا ، معدل عرض الإطارات منخفض جدًا بدرجة لا يمكن قبولها.

WestLangley نجح في هذا المشهد ، شكرًا!

من فضلك لا تنشر كود Sketchfab. كنت أقترح فقط أننا نفهم
تقنياتهم. وهو ما يمكننا القيام به دون مشاركة التعليمات البرمجية الخاصة بهم. وانت كذلك
لا يمكن نسخ أي شيء من التعليمات البرمجية الخاصة بهم ، والتي من شأنها أن تكون ضد حقوق النشر.

في الثلاثاء ، 25 أغسطس 2020 ، الساعة 6:21 صباحًا ، كتب Vis [email protected] :

WestLangley https://github.com/WestLangley نجح في هذا المشهد
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 ،
شكرا!

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 ،
أو إلغاء الاشتراك
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANCNFSM4B4V62SQ
.

-
بن هيوستن ، CTO
م : + 1-613-762-4113
[email protected]
أوتاوا ، كندا
منصة تصور ThreeKit: 3D ، 2D ، AR ، VR
http: //https//threekit.com/

bhouston موافق ، للإشارة فقط إذا لزم الأمر.

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

على سبيل المثال ، هذه المرة ، ألهمني هذا الدليل بشكل أساسي ، ولكن من الصعب فهم معنى النص بوضوح في البداية ، وبسبب نظام الإحداثيات المختلف الذي يستخدمه ، ولا أعرف كيفية تشغيل. cxx ، لذلك قرأت نصًا صغيرًا فقط وبالكاد أقرأ الكود. في النهاية ، الصورتان imgA imgB ساعدتني أكثر.

أضف بعض العروض.

Demo ، Demo2 ، Demo3 ، SelectiveDemo ، OrthographicDemo.

مستوحاة من gonnavis ، تمكنت أخيرًا من تجربة بعض الأشياء الجديدة في تطبيق SSR الذي نشرته قبل عامين ، لذا اعتقدت أنني سأشاركها هنا. ليس لدي أي خطط لاستخدام هذا في مشروع حقيقي ، لذا لم يتم تحسينه وفي هذه المرحلة أصبح كومة من ميزات SSR المختلفة ولكنني تعلمت معظم ما أريده منه لذلك سأطلق عليه اسم " تم "في الوقت الحالي. ربما هناك بعض الأشياء التي يمكن للآخرين القيام بها. لا تزال هناك أشياء أعرف أنه يمكن إضافتها أو تحسينها ، ولكن ربما إذا قمت باختيارها احتياطيًا ، فسأستفيد من بعض الميزات في WebGL2 لتبسيط الأمور.

بعض الميزات الجديدة:

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

إنه تأثير مكثف جدًا ولكني أشعر أنه مع مزيج من الارتقاء بالانعكاس والتشويش والارتعاش وعدد الخطوات المنخفضة ، يمكنك شيئًا يعمل بشكل جيد خاصة مع اللوحات الصغيرة المدمجة بدلاً من تطبيقات النافذة الكاملة. من خلال حل الصورة النهائية عبر إطارات متعددة كما تمت مناقشته في https://github.com/mrdoob/three.js/issues/14048 ، من المحتمل أن تحصل على انعكاسات لامعة لائقة أيضًا. بالطبع كما تم ذكره في مكان آخر ، فإن الانعكاسات لن تكون صحيحة حقًا بدون ممرات منفصلة للانتشار وما إلى ذلك ، ولكن هناك دائمًا شيء آخر يجب تحسينه.

فيما يلي بعض لقطات الشاشة ذات عدد الخطوات الأعلى:

| لا لمعان | لمعان متعدد العينات | عمق اللمعان التسلسل الهرمي |
| --- | --- | --- |
| | | |

وإليك العرض التوضيحي:

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

هناك شريحة في Siggraph 2015 حول "Stochastic Screen-Space Reflections" قد تكون مهتمًا بها: http://advances.realtimerendering.com/s2015/index.html