30 تجارب WebGL التي هي مجرد نجاح باهر!

ها ، لأداة عظيمة مع وعود كبيرة يأتي إلى عينيك. إنه سريع وسلس. يجعل ثلاثي الأبعاد ، ومع التكامل الذي ينعش ، تخمين ما هو؟ HTML5؟ CSS3؟ لا ، يطلق عليه WebGL ، مكتبة البرامج التي تزيد من قدرة JavaScript على إنشاء رسومات ثلاثية الأبعاد تفاعلية ، ونعم ، دون أي ملحقات إضافية!

في هذه الواجهة ، لا نريد أن نريك الأشياء المعتادة. نريد أن نعرض لك 30 تجربة WebGLتم تصميمها بعناية من قِبل المطورين المحترفين لتتمكن من رؤية القوة الحقيقية لـ WebGL والتي ليست ملهمة فحسب ، بل تتيح لك أيضًا الحصول على لمحة حول كيفية ظهور مستقبل الويب. القفز الى المستقبل بعد النقر!

يوصى بشدة بمشاهدة هذه العروض التوضيحية باستخدام أحدث إصدار من إصدار المطور من Google Chrome. تدعم معظم العروض أحدث إصدار من Firefox و Google Chrome و Safari.

3 أحلام الأسود

تم تأليف 3 Dreams of Black بواسطة مؤلف من فريق Google Data Arts ، وهو ينقلك إلى ثلاثة عوالم أحلام تم إنشاؤها من خلال مجموعة من الرسومات ثنائية الأبعاد الغنية والرسوم المتحركة المتداخلة مع تسلسل ثلاثي الأبعاد تفاعلي. تحقق من عجائب لتجربة رائعة!

حجم الجسيمات المتحركة

هذا واحد هو حقا الحيوانات الرسوم المتحركة التي شيدت من قبل جزيئات 3D باستخدام القوام العائمة والأشياء العازلة الإطار. أكثر مفاجأة إذا قمت بتحريك الماوس!

حوض سمك

محاكاة بيئة تحت الماء؟ هذه ليست مشكلة في WebGL. يتميز العرض التوضيحي بنماذج ثلاثية الأبعاد بأنسجة عالية الجودة ورسوم متحركة للمشاهد ورسوم متحركة لتظليل البكسل وانعكاسات وانكسار ومواد كاوية ، كل شيء فقط لوضع المشهد الواقعي تحت الماء!

الآزوثيوبرين

ربما كان عرض WebGL الأكثر ملحمية ، قال بما فيه الكفاية. قبعة غيض للمؤلف جوشن فيلهلم.

رحلة جذابة

إذا كنت تريد تجربة 3D ، فهذا هو أفضل عرض لك ، كما يمكنك التأمل مع الجمال الهائل للرسومات التي تم إنشاؤها بواسطة WebGL باستخدام صيغة Martinal Hopalong.

قناديل البحر

“النمذجة الإجرائية المنجزة مع Side FX Houdini. تصديرها مع مصدر بيثون إلى تنسيق json. الملمس رسمت باستخدام Autodesk Mudbox. الرسوم المتحركة مع تظليل قمة الرأس.”

قراص البحر

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

HelloRacer

نقدم لك المحاكاة التفاعلية للسيارة المتطورة ، التي نقدمها لك حصريًا بواسطة HelloEnjoy.

المواد: السيارات

Bugatti Veyron و Lamborghini Gallardo و Ferrari F50 وشيفروليه كامارو في متصفحك. اختر رحلتك واستمتع بالمنظر. هيك ، يمكنك حتى اختيار ألوانها.

WebGL سيارات

سيكون مستقبل سلسلة Need For Speed ​​في متصفح الويب. طموح جدا؟ بالتأكيد لا إذا كنت قد زرت هذه السيارات التي يتم تقديمها باستخدام خرائط المكعب الديناميكية وخرائط الظل وتأثيرات ما بعد المعالجة.

بلدي روبوت الأمة

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

Pacmaze

ماذا عن لعبة 3D Pac-Man؟ الرسومية واللعب لطيفة ، والأهم من ذلك أنها ممتعة!

أحمر الرماية هود

الآن ها هو لطيف ... أو دموي. هذه اللعبة ليست سوى لعبة مثيرة للاهتمام لتظهر لك قدرات WebGL عندما تم تطويرها لتصبح لعبة إطلاق النار من أعلى إلى أسفل. المرح ومسلية بالتأكيد.

TankWorld

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

بولبو

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

سطح - المظهر الخارجي

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

صور الجسيمات

ما عليك سوى إسقاط صورتك المفضلة في هذا العرض التوضيحي والاستمتاع بمشاهدتها تنفجر في الكثير من الجزيئات وتفاعل مع شكل ما من المغناطيسية. التجربة عبارة عن مزيج من أربعة تقنيات: HTML5 في السحب والإفلات و API للملف و Canvas و WebGL.

Rutt-ETRA-Izer

Rutt-Etra-Izer هو محاكاة WebGL لمزج الفيديو Rutt-Etra الكلاسيكي. يتيح لك العرض التوضيحي وضع صورك في الداخل ومعالجتها. مع هذه الأشياء ، يمكن أن تبدو الصورة ثنائية الأبعاد حتى ثلاثية الأبعاد!

الرقص المتذبذب

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

Ultranoir

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

قرد متموج

“هذه المرة أردت فقط إجراء اختبار لمعرفة عدد مواقف وقواعد الرأس التي يمكنني تحديثها مباشرةً في JavaScript. يتحول 2000 على ما يرام :) لقد أضفت أيضا في قليلا من رسم الخرائط البيئة. والغرابة. دائما إضافة الغرابة.”

فيديو FX

تطبيق مثير للإعجاب تم تنفيذه بواسطة دانييل بيترسون والذي يسمح لك بتطبيق تأثيرات متعددة بعد المعالجة على مقطورة Happy Feet 2. حاول واستمتع!

Voxels السائل

يوضح التمثيل ثلاثي الأبعاد لخوارزمية التأثير المائي ثنائية الأبعاد ، أيضًا مدى تفاعل WebGL.

WebGL خزانة الكتب

استعرض أكثر من 10000 غلاف كتابي مع WebGL Bookcase ، التي طورها فريق Google Data Arts. يمكنك أيضًا البحث حسب الموضوع ، وفتح نموذج ثلاثي الأبعاد لكل منها عن طريق النقر فوقه ، وتنزيل الكتب على هاتفك باستخدام رمز الاستجابة السريعة.

WebGL غلوب

تجربة فريق Google الرائعة التي تجعلك تشعر وكأنك في المستقبل من خلال رؤية البيانات الجميلة والأنيقة والمستقبلية.

رحلات العالم

يبدو تطبيق آخر لتصور البيانات مرئيًا جذابًا والذي يصور مسارات رحلات شركات الطيران الرئيسية ، واعداً!

WebGL تصفية الصور

تطبيق محرر الجرافيك مع WebGL؟ هذا مستحيل أبدا. أفضل للجميع ، إنه سريع وسلس!

WebGL المياه

“مجموعة من المياه الناتجة عن الانعكاس ، الانكسار ، المواد الكاوية ، والانسداد المحيط. تم محاكاة المسبح بحقل مرتفع ويحتوي على كرة يمكن أن تتفاعل مع سطح الماء.”

انعكاس

أكبر مشكلة واجهتها WebGL هي أمانها. وفقًا لـ Wikipedia ، أصدر فريق الاستعداد للطوارئ بالكمبيوتر بالولايات المتحدة (US-CERT) تحذيرًا بأن WebGL يحتوي على العديد من مشكلات الأمان المحتملة التي قد تؤدي إلى تنفيذ تعليمات برمجية تعسفية ورفض الخدمة وحتى الهجمات عبر النطاقات. هذا يعني جدا جدا لصاحب الموقع.

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

أخبرنا بالتجربة التي تذهلك أكثر شيئ ، وبالطبع ، اظهر لنا إذا حصلت على واحدة!

المزيد من المشاركات ذات الصلة:

• موقع HTML5 على الويب: 48 من العروض التوضيحية المحتملة لفلاش فلاش
• موقع HTML5 الإلكتروني: 15 تجربة إضافية
• Inspiring CSS3 Animation Demos