דף הבית » עיצוב אתרים » 30 WebGL ניסויים זה רק וואו!

    30 WebGL ניסויים זה רק וואו!

    הנה, עבור כלי נהדר עם הבטחות גדולות מגיע לעיניים שלך. הוא מהיר וחלק. זה מעבד 3D, ועם שילוב זה animates, לנחש מה זה? HTML5? CSS3? לא, זה נקרא WebGL, ספריית תוכנה שמרחיבה את היכולת של JavaScript ליצירת גרפיקה אינטראקטיבית 3D, וכן, ללא כל plugins!

    בחלון הראווה הזה, אנחנו לא רוצים להראות לך את הדברים הרגילים. אנחנו רוצים להראות לך 30 ניסוי WebGLs כי הם מעוצבים בקפידה על ידי מפתחים מקצועיים בשבילך כדי לחזות את העוצמה האמיתית של WebGL אשר אינם רק השראה, אלא גם לתת לך הצצה על איך את העתיד של האינטרנט עשוי להיראות. קפיצה אל העתיד אחרי קליק!

    מומלץ מאוד להציג הדגמות אלה באמצעות הגרסה העדכנית ביותר של גרסת המפתח של Google Chrome. רוב הדגמות תומכות בגרסה העדכנית ביותר של Firefox, Google Chrome ו- Safari.

    3 חלומות של שחור /

    מחבר על ידי Google Data Arts צוות, 3 חלומות של שחור מביא אותך לתוך 3 עולמות חלום שנבנו באמצעות שילוב של עשיר 2 ציורים ואנימציות שזור עם רצפים אינטראקטיביים 3D. בדוק את נפלאות לחוויה נפלאה!

    הנפח חלקיקי נפח

    זה אחד הוא אמנותי - חיות אנימציה שנבנו על ידי חלקיקים 3D באמצעות מרקמים לצוף אובייקטים חיץ מסגרת. הפתעה נוספת אם אתה מזיז את העכבר!

    אקווריום

    לדמות סביבה מתחת למים? זו לא בעיה עבור WebGL. הדגמה תכונות מודלים 3D עם טקסטורות באיכות גבוהה, אנימציה סצנה, אנימציה פיקסל Shader, השתקפות, שבירה ו caustics, רק הכל כדי לשים את סצנה מציאותית מתחת למים!

    אזתיופרין

    כנראה הדגמה WebGL אפית ביותר, אמר מספיק. כובע קצה המחבר יוכן וילהלמי.

    טיול אטרקטיביים

    אם אתה רוצה לחוות את 3D זה ההדגמה הטובה ביותר עבורך, גם לקבל meditated עם היופי העצום של WebGL שנוצר גרפיקה באמצעות נוסחה של מרטין Hopalong.

    מדוזה

    “מודלים פרוצדורליים נעשה עם Side FX הודיני. מיוצא עם יצואנית Python לתבנית json. מרקם צבוע באמצעות Autodesk Mudbox. אנימציה עם Shader קדקוד.”

    כריזארה

    זה לא הדגמה אנימציה רגיל, אבל זה כולל שלד סימולציה דינמי, סימולציה בצד השרת חלקית סינכרון עם WebSocket, מצלמה מול מערכת החלקיקים, אפקט אור נפח, ספריית מטריקס של ולדימיר Vukićević. בקיצור, ניסוי מדהים עם יצירות מורכבות.

    HelloRacer

    היכרות עם סימולציה גבוהה רכב אינטראקטיבי, הביא לך בלעדי HelloEnjoy.

    חומרים: מכוניות

    בוגאטי וירון, למבורגיני גאלרדו, פרארי F50 ו שברולט Camaro בדפדפן שלך. בחר את הנסיעה שלך ליהנות מהנוף. לעזאזל, אתה יכול גם לבחור את הצבעים.

    WebGL מכוניות

    העתיד של סדרת הצורך מהירות יהיה בדפדפן האינטרנט. שאפתני מדי? בהחלט לא אם יש לך ביקר את המכוניות האלה כי הם שניתנו עם מפות קוביית דינמי, מפות צל אפקטים postprocessing.

    האומה הרובוטית שלי

    ובכן, אם הדמות היא לא האהוב עליך, ואז לנסות לבנות רובוט מגניב ומקסים ולהראות את החבר שלך! אתה יכול אפילו להשקיע את הכסף שלך כדי לעשות את זה אמיתי.

    פאקמזה

    מה דעתך על 3D Pac-Man המשחק? הגרפיקה & משחקים נחמדים, והכי חשוב זה כיף!

    כיפה אדומה

    עכשיו הנה אחד חמוד ... או אחד ארור. זה הוא רק משחק מעניין כדי להראות לך את היכולות של WebGL כאשר הוא התפתח לתוך הדף היורה משחק. כיף ומשעשע.

    TankWorld

    אתה מניח את זה, משחק מהנה היורה הטנק עם נשק להשתמש ומפות לחקור, וברמות מסוימות אתה יכול אפילו לקבל מסוק כדי לחקור את העולם! זה באמת יותר מאשר רק משחק רגיל, ואת הגרפיקה נראה נוח!

    פולפו

    הדוגמה הטובה ביותר של איך גרפיקה פשוטה ואנימציה יכול להרשים אנשים כאשר הם עושים נכון.

    משטח

    בדוק את משטח, ניסוי אלגנטי ומעורר השראה שנעשה על ידי פול לואיס. אתה יכול לא רק לשנות את גודל, גמישות, מסלול אוטומטי, wireframe, טיפות גשם בהדגמה, אלא גם גרור ושחרר את התמונות שלך לתוך זה להרגיש את האפקט אחרת.

    תמונות חלקיקים

    פשוט ירידה התמונה האהובה שלך לתוך הדגמה זו וליהנות צופה בו להתפוצץ לתוך טון של חלקיקים ולקבל אינטראקציה עם צורה כלשהי של מגנטיות. הניסוי הוא שילוב של ארבע טכנולוגיות: HTML5 של גרור ושחרר, קובץ API, בד ו WebGL.

    רוט-אתרא-עזר

    Rutt-Etra-Izer הוא הדמיית WebGL של סינתיסייזר הווידיאו הקלאסי של Rutt-Etra. ההדגמה מאפשרת לך לשים את התמונות שלך פנימה ולטפל בהם. עם החומר הזה, תמונה 2D יכול אפילו להיראות כמו 3D!

    ריקוד הריקוד

    הדגמה פשוטה אך ראויה לציון שמראה עד כמה נוזל ה- WebGL יכול להיות, עם צלליות אור אנאיזוטרופיות ודהות.

    אולטרה

    עוד ניסוי נהדר לראווה את הפוטנציאל של WebGL. Nouvelle מעורפל מציע חוויה אינטראקטיבית פואטית בזמן אמת 3D מבוסס על טוויטר, ומה שאתה רואה יהיה tweets כי מתבצעים עם אובייקטים מעופפים שונים. בהחלט דרך אמנותית ליהנות tweets.

    קוף מתגלגל

    “הפעם אני רק רוצה לעשות מבחן כדי לראות כמה עמדות קודקס ו נורמלי אני יכול לעדכן ישירות ב- JavaScript. מתברר 2000 הוא בסדר גמור :) אני גם הוסיף קצת מיפוי הסביבה. והמוזר. הוסף תמיד מוזרות.”

    וידאו FX

    יישום מרשים נעשה על ידי דניאל Pettersson המאפשר לך ליישם מספר רב של השפעות postprocessing בו זמנית לקרון רגליים 2 רגליים. נסו להשתעשע!

    Voxels נוזלי

    ייצוג תלת-ממד של אלגוריתם המים הדו-ממדי הקלאסי, מראה לך גם כיצד אינטראקטיבי WebGL הוא.

    WebGL כוננית

    דפדף למעלה מ -10,000 עטיפות ספרים עם ספריית WebGL זו, שפותחה על ידי צוות Google Data Arts. ניתן גם לחפש לפי נושא, לפתוח מודל 3D של כל אחד על ידי לחיצה עליו, ולהוריד ספרים בטלפון עם קוד QR.

    WebGL גלוב

    ניסוי של צוות Google מגניב שבאמת גורם לך להרגיש כאילו אתה בעתיד עם ויזואליזציה יפה, אלגנטי עתידני שלה נתונים.

    טיסות בעולם

    עוד Visual-appealing נתונים להדמיה App אשר visualizes הגדולות חברות תעופה נתיבי הטיסה, נראה מבטיח!

    מסנן תמונה של WebGL

    עורך גרפי יישום עם WebGL? זה אף פעם לא בלתי אפשרי. החשוב מכל, הוא מהיר וחלק!

    מים

    “בריכה של מים שניתנו עם השתקפות, שבירה, קאוסטיקה, וסגירת הסביבה. הבריכה היא מדומה עם heightfield והוא מכיל כדור שיכול לתקשר עם פני המים.”

    השתקפות

    הבעיה הגדולה ביותר שעמדה בפני WebGL, היא אולי האבטחה שלה. על פי ויקיפדיה, ארצות הברית המחשב חירום מוכנות צוות (US-CERT) הוציא את האזהרה כי WebGL מכיל מספר בעיות אבטחה אפשריות אשר עלולה להוביל לביצוע קוד שרירותי, מניעת שירות ואפילו התקפות בין תחומים. זה אומר מאוד, מאוד על בעל האתר.

    עם זאת, קבוצת חרונוס הכוללת את Mozilla ו- Google מציעה פתרונות אפשריים וגישה לפיתוח עתידי לחיזוק האבטחה מפני האיומים הביטחוניים האפשריים. יש לקוות כי הבעיות ניתן להפחית ואפילו להיפתר בעתיד, כמו WebGL יש כל כך הרבה אפשרויות כפי showcased על ידי המפתחים מוכשרים ומקצועיים!

    תן לנו לדעת איזה ניסוי מדהים אותך, וכמובן, להראות לנו אם יש לך אחד!

    פוסטים קשורים נוספים:

    • אתר HTML5: 48 הדגמות פוטנציאל להרוג פלאש
    • אתר HTML5: 15 ניסויים נוספים
    • בהשראת CSS3 אנימציה הדגמות