لقد شاركت مؤخرًا في المشهد التجريبي Revision 2019 في فئة مقدمة الكمبيوتر الشخصي 4K ، وحصلت المقدمة على المركز الأول. فعلت الترميز والرسومات ، ويتألف ديكسان الموسيقى. تتمثل القاعدة الأساسية للمسابقة في إنشاء ملف قابل للتنفيذ أو موقع ويب بحجم 4096 بايت فقط. هذا يعني أنه يجب إنشاء كل شيء باستخدام الرياضيات والخوارزميات ؛ لا يمكنني بأي حال من الأحوال الضغط على الصور والفيديو والصوت في هذه المساحة الضئيلة من الذاكرة. في هذه المقالة ، سأتحدث عن خط الأنابيب الخاص بتقديم مقدمة نيوتن. فيما يلي يمكنك رؤية النتيجة النهائية ، أو
انقر هنا لترى كيف بدت حية على Revision ، أو
انتقل إلى pouet للتعليق وتنزيل المقدمة التي شاركت في المسابقة. يمكنك أن
تقرأ عن أعمال المنافسين وتصويباتهم
هنا .
تحظى تقنية حقول مسيرة Ray بشعبية كبيرة في نظام إدخال 4k لأنه يتيح لك تحديد أشكال معقدة في بضعة أسطر من التعليمات البرمجية. ومع ذلك ، فإن عيب هذا النهج هو سرعة التنفيذ. لعرض المشهد ، تحتاج إلى العثور على نقطة تقاطع الأشعة مع المشهد ، وتحديد ما تراه أولاً ، على سبيل المثال ، شعاع من الكاميرا ، ثم الأشعة التالية من الكائن إلى مصادر الضوء لحساب الإضاءة. عند العمل مع مسيرة الشعاع ، لا يمكن العثور على هذه التقاطعات في خطوة واحدة ، تحتاج إلى اتخاذ العديد من الخطوات الصغيرة على طول الشعاع وتقييم جميع الكائنات في كل نقطة. من ناحية أخرى ، عند استخدام تتبع الشعاع ، يمكنك العثور على التقاطع الدقيق عن طريق فحص كل كائن مرة واحدة فقط ، ولكن مجموعة الأشكال التي يمكن استخدامها محدودة للغاية: يجب أن يكون لديك صيغة لكل نوع لحساب التقاطع مع الشعاع.
في هذه المقدمة ، أردت محاكاة الإضاءة الدقيقة للغاية. نظرًا لأنه كان من الضروري عكس ملايين الأشعة الموجودة في المشهد ، فقد بدا تتبع الأشعة خيارًا منطقيًا لتحقيق هذا التأثير. حصرت نفسي في شخصية واحدة - كرة ، لأن تقاطع الشعاع والكرة محسوب بكل بساطة. حتى الجدران في المقدمة هي في الواقع كرات كبيرة جدا. بالإضافة إلى ذلك ، فإنه يبسط محاكاة الفيزياء. كان يكفي أن تأخذ في الاعتبار فقط الصراعات بين المجالات.
لتوضيح مقدار الكود الذي يناسب 4096 بايت ، أدناه قدمت الكود المصدري الكامل للمقدمة النهائية. يتم تشفير جميع الأجزاء باستثناء HTML في النهاية كصورة PNG لضغطها بحجم أصغر. بدون هذا الضغط ، قد يستغرق الرمز 8900 بايت تقريبًا. الجزء المسمى Synth هو نسخة مجردة من
SoundBox . لحزم الكود في هذا التنسيق المصغر ، استخدمت
Google Closure Compiler و
Shader Minifier . في النهاية ، يتم ضغط كل شيء تقريبًا في PNG باستخدام
JsExe . يمكن رؤية خط أنابيب التجميع الكامل في الكود المصدري في مقدمة 4k السابقة الخاصة بي ،
Core Critical ، لأنها تتطابق تمامًا مع الخط المقدم هنا.
يتم تطبيق الموسيقى والمزج بالكامل في Javascript. الجزء على WebGL ينقسم إلى قسمين (مظللة باللون الأخضر في الكود) ؛ انها تضع خط أنابيب تقديم. العناصر الفيزيائية وتتبع الأشعة هي تظليل GLSL. يتم تشفير بقية الكود في صورة PNG ، ويتم إضافة HTML إلى نهاية الصورة الناتجة دون تغيير. يتجاهل المستعرض بيانات الصورة وينفذ تعليمات HTML البرمجية فقط ، والتي بدورها تقوم بفك تشفير PNG مرة أخرى إلى javascript وتنفيذه.تقديم خط أنابيب
الصورة أدناه توضح خط أنابيب التقديم. يتكون من جزأين. الجزء الأول من خط الأنابيب هو محاكاة الفيزياء. يحتوي المشهد التقديمي على 50 كرة تصطدم مع بعضها البعض داخل الغرفة. تتكون الغرفة نفسها من ستة مجالات ، بعضها أصغر من غيرها لإنشاء جدران منحنية. هناك أيضًا مصدران رأسيان للإضاءة في الزوايا هما مجالان ، أي ما مجموعه 58 مجالًا في المشهد. الجزء الثاني من خط الأنابيب هو جهاز تتبع الأشعة الذي يجعل المشهد. يوضح الرسم البياني أدناه تقديم إطار واحد في الوقت t. تأخذ محاكاة الفيزياء الإطار السابق (t-1) وتحاكي الحالة الحالية. يأخذ جهاز تتبع الأشعة المواضع الحالية ومواقع الإطار السابق (لقناة السرعة) ويعرض المشهد. ثم تجمع المعالجة اللاحقة بين الإطارات الخمسة السابقة والإطار الحالي لتقليل التشويش والضوضاء ، ثم تقوم بإنشاء نتيجة نهائية.
تقديم إطار في وقت ر.الجزء المادي بسيط للغاية ، على الإنترنت ، يمكنك العثور على العديد من البرامج التعليمية حول إنشاء المحاكاة البدائية للمجالات. يتم تخزين الموضع ، نصف القطر ، السرعة والكتلة في نسجين بدقة 1 × 58. لقد استخدمت وظيفة Webgl 2 ، والتي تسمح بالتقديم لأهداف التجسيد المتعددة ، وبالتالي يتم تسجيل بيانات اثنين من القوام في وقت واحد. يتم استخدام نفس الوظيفة بواسطة جهاز تتبع الشعاع لإنشاء ثلاثة مواد. لا توفر Webgl أي وصول إلى واجهات برمجة التطبيقات لتتبع أشعة NVidia RTX أو DirectX Raytracing (DXR) ، لذلك يتم كل شيء من البداية.
راي التتبع
راي تتبع نفسها هي تقنية بدائية إلى حد ما. نطلق شعاعًا في المشهد ، وينعكس 4 مرات ، وإذا دخل إلى مصدر الضوء ، يتراكم لون الانعكاسات ؛ خلاف ذلك ، نحصل على اللون الأسود. في 4096 بايت (بما في ذلك الموسيقى ، المزج ، الفيزياء ، والتقديم) لا يوجد مجال لإنشاء هياكل معقدة لتعقب أشعة تسارع. لذلك ، نحن نستخدم طريقة البحث التقريبية ، أي فحص جميع المجالات الـ 57 (يتم استبعاد الجدار الأمامي) لكل شعاع ، دون إجراء أي تحسينات لاستبعاد جزء من المجالات. هذا يعني أنه لتوفير 60 إطارًا في الثانية بدقة 1080 بكسل ، يمكنك إرسال أشعة 2-6 فقط أو عينات لكل بكسل. هذا وثيق بما فيه الكفاية لخلق إضاءة سلسة.
1 عينة لكل بكسل.6 عينات لكل بكسل.كيفية التعامل مع هذا؟ في البداية ، بحثت خوارزمية تتبع الأشعة ، لكن تم تبسيطها بالفعل إلى هذه النقطة. تمكنت من زيادة الأداء بشكل طفيف عن طريق التخلص من الحالات عندما تبدأ الشعاع داخل الكرة ، لأن مثل هذه الحالات لا تنطبق إلا في وجود تأثيرات الشفافية ، وكانت الكائنات غير الشفافة فقط موجودة في مشهدنا. بعد ذلك ، قمت بدمج كل حالة شرطية في بيان منفصل لتجنب التفريق غير الضروري: على الرغم من الحسابات "الزائدة عن الحاجة" ، فإن هذا النهج لا يزال أسرع من مجموعة من العبارات الشرطية. يمكنك أيضًا تحسين نمط أخذ العينات: بدلاً من إصدار أشعة بشكل عشوائي ، يمكننا توزيعها عبر المشهد في نمط أكثر تماثلًا. لسوء الحظ ، هذا لم يساعد وأدى إلى تحف فنية متموجة في كل خوارزمية حاولت. ومع ذلك ، خلقت هذه الطريقة نتائج جيدة للصور الثابتة. كنتيجة لذلك ، عدت إلى استخدام توزيع عشوائي تمامًا.
يجب أن تحتوي وحدات البكسل المجاورة على إضاءة مشابهة جدًا ، فلماذا لا تستخدمها عند حساب إضاءة وحدة بكسل واحدة؟ لا نريد طمس القوام ، والإضاءة فقط ، لذلك نحتاج إلى عرضها في قنوات منفصلة. لا نريد أيضًا طمس الكائنات ، لذلك نحتاج إلى مراعاة معرفات الكائنات من أجل معرفة البيكسلات التي يمكن بسهولة طمسها. نظرًا لوجود كائنات عاكسة للضوء ونحتاج إلى انعكاسات واضحة ، لا يكفي فقط العثور على معرّف الكائن الأول الذي تصطدم به الحزمة. لقد استخدمت حالة خاصة للمواد العاكسة الخالصة لتضمين معرفات الكائنات الأولى والثانية المرئية في الانعكاسات في قناة معرف الكائن. في هذه الحالة ، يمكن أن يؤدي التمويه إلى تخفيف الإضاءة في الكائنات في الانعكاسات ، مع الحفاظ في الوقت نفسه على حدود الكائنات.
قناة نسيج ، لسنا بحاجة إلى طمسها.هنا في القناة الحمراء يحتوي على معرف الكائن الأول ، باللون الأخضر - الثاني والأزرق - الثالث. في الممارسة العملية ، يتم ترميزها جميعًا في قيمة تعويم واحدة ، حيث يخزن الجزء الصحيح معرفات الكائنات ، ويشير الجزء الكسري إلى الخشونة: 332211.RR.نظرًا لوجود أشياء ذات خشونة مختلفة في المشهد (بعض المناطق خشنة ، ينتشر الضوء على مناطق أخرى ، في حين يوجد انعكاس مرآة في الثالثة) ، أقوم بتخزين الخشونة للتحكم في نصف قطر التمويه. لا توجد تفاصيل صغيرة في المشهد ، لذلك استخدمت مجموعة كبيرة 50x50 مع طمس في شكل مربعات عكسية لعدم وضوح. لا تأخذ مساحة العالم في الاعتبار (يمكن تحقيق ذلك من أجل الحصول على نتائج أكثر دقة) ، لأنه على الأسطح الموجودة بزاوية في بعض الاتجاهات ، يؤدي إلى تآكل مساحة أكبر. مثل هذا التشويش يخلق صورة سلسة إلى حد ما ، لكن القطع الأثرية واضحة للعيان ، خاصة في الحركة.
قناة الإضاءة مع طمس والتحف لا تزال ملحوظة. في هذه الصورة ، تكون النقاط الضبابية على الجدار الخلفي مرئية ، والتي تنتج عن خطأ صغير مع معرّفات الكائن المنعكس الثاني (تترك الأشعة المشهد). في الصورة النهائية ، هذا ليس ملحوظًا جدًا ، لأن الانعكاسات الواضحة مأخوذة من قناة النسيج. تصبح مصادر الإضاءة ضبابية ، لكني أحببت هذا التأثير وتركته. إذا رغبت في ذلك ، يمكن منع ذلك عن طريق تغيير معرفات الكائنات وفقًا للمادة.عندما تكون الكائنات في المشهد وتتحرك الكاميرا التي تلتقط المشهد ببطء ، يجب أن تظل الإضاءة في كل إطار ثابتة. لذلك ، يمكننا أداء التشويش ليس فقط في إحداثيات XY من الشاشة ؛ يمكننا طمس في الوقت المناسب. إذا افترضنا أن الإضاءة لا تتغير كثيرًا في 100 مللي ثانية ، فيمكننا متوسطها لمدة 6 إطارات. ولكن خلال هذه الفترة الزمنية ، ستظل الكائنات والكاميرا بعيدة بعض الشيء ، وبالتالي فإن الحساب البسيط لمتوسط 6 إطارات سيخلق صورة ضبابية للغاية. ومع ذلك ، نحن نعرف أين كانت جميع الكائنات والكاميرا في الخريطة السابقة ، حتى نتمكن من حساب متجهات السرعة في مساحة الشاشة. وهذا ما يسمى الرفض المؤقت. إذا كان لديّ بكسل في الوقت t ، فيمكنني أن أستغل سرعة البيكسل وحساب المكان الذي كان فيه في الوقت t-1 ، ثم أحسب حيث البيكسل في الوقت t-1 في الوقت t-2 ، وهكذا. 5 إطارات الظهر. على عكس الضبابية في مساحة الشاشة ، استخدمت نفس الوزن لكل إطار ، على سبيل المثال فقط متوسط اللون بين جميع الإطارات ل "طمس" مؤقت.
تقوم قناة سرعة البكسل بالإبلاغ عن مكان وجود البيكسل في الإطار الأخير بناءً على حركة الكائن والكاميرا.لتجنب عدم وضوح مفصل الكائنات ، سوف نستخدم قناة معرفات الكائنات مرة أخرى. في هذه الحالة ، نعتبر فقط الكائن الأول الذي اصطدمت به الحزمة. يوفر هذا صقل الحواف داخل الكائن ، أي في الأفكار.بالطبع ، قد لا يكون بكسل مرئيًا في الإطار السابق ؛ قد يكون مخفيًا بواسطة كائن آخر أو يكون خارج مجال رؤية الكاميرا. في مثل هذه الحالات ، لا يمكننا استخدام المعلومات السابقة. يتم إجراء هذا الفحص بشكل منفصل لكل إطار ، لذلك نحصل على 1 إلى 6 عينات أو إطارات لكل بكسل ، ونستخدم تلك الممكنة. يوضح الشكل أدناه أنه بالنسبة للأجسام البطيئة ، هذه ليست مشكلة خطيرة للغاية.
عندما تتحرك الكائنات وتفتح أجزاء جديدة من المشهد ، لا يوجد لدينا 6 إطارات معلومات لمتوسط هذه الأجزاء. تُظهر هذه الصورة المساحات التي تحتوي على 6 إطارات (بيضاء) ، وكذلك تلك التي تفتقر إليها (ظلال داكنة تدريجيًا). سبب ظهور الخطوط هو العشوائية لمواقع أخذ العينات للبكسل في كل إطار وحقيقة أننا نأخذ معرف الكائن من العينة الأولى.وبلغ متوسط الإضاءة غير واضحة على ستة إطارات. تعتبر القطع الأثرية غير مرئية تقريبًا والنتيجة مستقرة مع مرور الوقت ، لأنه في كل إطار لا يوجد سوى إطار واحد من أصل ستة تغييرات يتم فيها أخذ الإضاءة في الاعتبار.الجمع بين كل هذا ، نحصل على صورة كاملة. الإضاءة غير واضحة على البيكسلات المجاورة ، بينما تظل القوام والانعكاسات واضحة. ثم يتم حساب كل هذا بين ستة إطارات لإنشاء صورة أكثر سلاسة وأكثر استقرارًا مع مرور الوقت.
الصورة النهائية.لا تزال آثار التوهين ملحوظة ، لأنني قمت بتحديد متوسط عدة عينات لكل بكسل ، على الرغم من أنني أخذت قناة معرف الكائن وسرعة التقاطع الأول. يمكنك محاولة إصلاح هذا والحصول على تجانس في الانعكاسات عن طريق التخلص من العينات إذا لم تتزامن مع الأولى ، أو على الأقل إذا لم يتزامن التصادم الأول بالترتيب. في الممارسة العملية ، تكون الآثار غير مرئية تقريبًا ، لذلك لم أكن أزعجك التخلص منها. يتم تشويه حدود الكائنات أيضًا ، لأنه لا يمكن سلاسة قنوات السرعة ومعرفات الكائنات. كنت أفكر في إمكانية تقديم الصورة بأكملها في 2160 بكسل مع مزيد من التخفيض في الحجم إلى 1080 بكسل ، لكن جهاز NVidia GTX 980ti غير قادر على معالجة هذه الدقة بسرعة 60 إطارًا في الثانية ، لذلك قررت التخلي عن هذه الفكرة.
بشكل عام ، أنا سعيد جدًا بكيفية ظهور المقدمة. تمكنت من الضغط عليه بكل شيء كان يدور في ذهني ، وعلى الرغم من الأخطاء الطفيفة ، كانت النتيجة النهائية عالية الجودة. في المستقبل ، يمكنك محاولة إصلاح الخلل وتحسين مكافحة التعرجات. يجدر أيضًا تجربة ميزات مثل الشفافية وطمس الحركة والأشكال المختلفة وتحويلات الكائنات.