- เว็บไซต์พอร์ตโฟลิโอ 3D ที่สร้างโดยนักพัฒนาเว็บ Bruno Simon มอบสภาพแวดล้อมแบบอินเทอร์แอกทีฟที่ให้ผู้ใช้ ขับรถสำรวจ ได้
- สร้างบนพื้นฐานของ Three.js และทำ การเรนเดอร์ 3D แบบเรียลไทม์ โดยใช้ทั้ง WebGL และ WebGPU
- ภายในเว็บไซต์มีองค์ประกอบแบบเกม เช่น ระบบความสำเร็จ, องค์ประกอบลับ, และฟีเจอร์ ข้อความจากผู้เยี่ยมชม (Whisper)
- โค้ดทั้งหมดและไฟล์ Blender เปิดเผยบน GitHub ภายใต้ สัญญาอนุญาต MIT และเพลงสามารถใช้งานได้อย่างอิสระภายใต้ สัญญาอนุญาต CC0
- เป็นตัวอย่างการผสานเทคโนโลยีเว็บเข้ากับปฏิสัมพันธ์เชิงสร้างสรรค์ และเป็นพอร์ตโฟลิโอตัวแทนที่แสดงให้เห็นถึง ความเป็นไปได้ของประสบการณ์เว็บ 3D
ภาพรวมพอร์ตโฟลิโอ 3D ของ Bruno Simon
- อยู่ในรูปแบบ พอร์ตโฟลิโอแบบอินเทอร์แอกทีฟ ที่ให้สำรวจโลก 3D บนเว็บพร้อมสัมผัสโปรเจ็กต์และงานทดลองของผู้สร้าง
- ผู้ใช้สามารถบังคับรถขับไปรอบพื้นที่เสมือนจริงและโต้ตอบกับวัตถุต่าง ๆ ได้
- วลี “Don’t break anything!” ช่วยสร้างบรรยากาศการสำรวจที่สนุกขี้เล่น
- รองรับทั้ง การควบคุมด้วยคีย์บอร์ด เช่น WASD, ปุ่มลูกศร, Space, Enter และ อินพุตจากการสัมผัส·เกมแพด
- มีฟังก์ชันควบคุมหลากหลาย เช่น การเคลื่อนที่ การกระโดด เบรก บูสเตอร์ แตร และระบบกันสะเทือน
องค์ประกอบแบบเกมและระบบความสำเร็จ
- ในเว็บไซต์มี Achievements 38 รายการ ที่สามารถปลดล็อกได้ผ่านการกระทำเฉพาะ
- ตัวอย่าง: “Traveler” (เยือนครบทุกพื้นที่), “Cookie Clicker” (ยอมรับคุกกี้ 1000 ชิ้น), “Flip of faith” (ทำแบ็กฟลิปสำเร็จ) เป็นต้น
- รวมถึงเงื่อนไขหลากหลาย เช่น ระยะทางการขับขี่ การสัมผัสสภาพอากาศ และการทำลายกล่องระเบิด
- เวลาในการปลดล็อกและความคืบหน้าจะแสดงแบบเรียลไทม์ และยังมีฟังก์ชัน กระดานจัดอันดับบนเซิร์ฟเวอร์ (Leaderboard)
- อย่างไรก็ตาม หากเซิร์ฟเวอร์ออฟไลน์จะไม่สามารถบันทึกคะแนนได้
Whisper และฟีเจอร์ชุมชน
- ผู้เยี่ยมชมสามารถฝากข้อความสั้น ๆ ผ่านฟีเจอร์ Whisper ได้
- จำกัดสูงสุด 30 ตัวอักษร และผู้ใช้หนึ่งคนสามารถมีได้หนึ่งข้อความ
- เมื่อมีข้อความใหม่เพิ่มเข้ามา ข้อความเก่าจะถูกลบ
- ห้ามใช้คำหยาบ และสามารถเลือกธงของแต่ละประเทศได้
- หากเซิร์ฟเวอร์ Whisper ออฟไลน์ ฟังก์ชันข้อความจะถูกปิดใช้งาน
เทคโนโลยีสแต็กและองค์ประกอบโอเพนซอร์ส
- การเรนเดอร์ 3D พัฒนาด้วย Three.js
- Three.js เป็นไลบรารีที่สร้างโดย mr.doob และรองรับทั้ง WebGL และ WebGPU ด้วย TSL (Three.js Shading Language) ที่ Sunag เพิ่มเข้ามา
- เอนจินฟิสิกส์ ใช้ Rapier, เสียง ใช้ Howler.js, และ ฟอนต์ ใช้ Amatic SC กับ Nunito
- ซอร์สโค้ดทั้งหมดเปิดเผยบน GitHub (brunosimon/folio-2025) และใช้ สัญญาอนุญาต MIT
- มีไฟล์ Blender รวมอยู่ด้วย จึงสามารถนำไปแก้ไขและศึกษาได้อย่างอิสระ
- โค้ดฝั่งเซิร์ฟเวอร์ไม่เปิดเผยด้วยเหตุผลด้านความปลอดภัย แต่ตัวพอร์ตโฟลิโอสามารถทำงานได้โดยไม่ต้องมีเซิร์ฟเวอร์
เพลงและข้อมูลเพิ่มเติม
- เพลงประกอบพื้นหลังสร้างขึ้นเป็นพิเศษสำหรับพอร์ตโฟลิโอโดย Kounine
- เผยแพร่ภายใต้ สัญญาอนุญาต CC0 จึงสามารถดาวน์โหลดและนำกลับไปใช้ซ้ำได้อย่างอิสระ
- มีให้ในพาธ
/static/sounds/musics ภายในที่เก็บ GitHub
- ยังมีสื่อการเรียนรู้ Three.js ผ่านคอร์สออนไลน์ชื่อ Three.js Journey
- ครอบคลุมกระบวนการสร้างเว็บ 3D ด้วย Three.js ตั้งแต่ต้นจนจบ
- มีการบันทึกกระบวนการพัฒนาพอร์ตโฟลิโอผ่าน ซีรีส์ Devlog บน YouTube
- แม้หลังจากงานเสร็จแล้ว ก็ยังคงทำวิดีโอตอนสุดท้ายต่อไป
ความหมายโดยรวม
- พอร์ตโฟลิโอของ Bruno Simon เป็นกรณีศึกษาที่ผสาน เทคโนโลยีเว็บ, ปฏิสัมพันธ์แบบเกม, การแสดงออกทางศิลปะ เข้าด้วยกัน
- ด้วยความเป็นโอเพนซอร์สและสัญญาอนุญาตแบบเสรี จึงสามารถนำไปใช้เป็น โปรเจ็กต์เว็บ 3D ที่เรียนรู้และนำกลับมาใช้ซ้ำได้
- ในฐานะตัวอย่างการใช้งานจริงของ ระบบนิเวศ Three.js และ การเรนเดอร์บนพื้นฐาน WebGPU ผลงานนี้แสดงทิศทางของกราฟิกเว็บยุคถัดไป
4 ความคิดเห็น
ก็มันคือเกมชัดๆ ..
ท่านผู้อำนวยการฝ่ายพัฒนาที่ตอนนั้นเมินความเห็นที่เสนอให้ใช้ tjs กับโปรเจกต์หลักของบริษัท แล้วบอกให้ใช้ babylon.js แทน.. แถมยังไม่รับผิดชอบต่อการตัดสินใจของตัวเอง แต่กลับดึงทั้งบริษัทและบุคลากรออกไปตั้งบริษัทใหม่.. สบายดีใช่ไหมครับ?
เปิดทิ้งไว้แป๊บเดียวเพื่อทดสอบเท่านั้นเอง.. แต่เครื่องบินบน MacBook M1 ของผมกำลังจะบินขึ้นแล้วครับ แต่ก็ต้องยอมรับว่ายอดเยี่ยมจริง ๆ
ความเห็นบน Hacker News
รีเฟรช 1~2 ครั้งแล้วจะขึ้นได้ดี โดยรวมแล้วเป็นงานที่เจ๋งมาก
แต่อยากให้ซูมออกได้ไกลกว่านี้หน่อย ขอชื่นชม Bruno
มีวัตถุศาลเจ้าเล็ก ๆที่แทนโซเชียลมีเดียแต่ละอัน ซึ่งขับรถชนให้ล้มได้ แต่ลิงก์ก็ยังกดได้อยู่
ยังมีสถานะรวมของโลก เช่น ถ้าพุ่งเข้าใส่พอร์ทัล ตัวนับ ‘สังเวยแด่เทพแห่งความโกลาหล’ จะเพิ่มขึ้น
โดยรวมแล้วสไตล์งานภาพมีความสม่ำเสมอ และหลังจากลองสำรวจราว 5 นาที ก็รู้สึกว่างานค่อนข้างสมบูรณ์ดี
แต่ถ้าจะมองตามชื่อบน HN ว่าเป็น “เว็บไซต์ 3D ที่เจ๋งที่สุด” คงไม่ถึงขนาดนั้น น่าจะเป็นเว็บไซต์พอร์ตโฟลิโอที่ทำออกมาได้ดีมากมากกว่า
สมัยก่อนก็เคยเป็นแบบนั้นกับเกมฟรี Chex Quest ที่แถมมาในกล่องซีเรียล
แต่ตอนนี้ฉันดูเว็บไซต์อยู่ประมาณ 30 วินาที พูดว่า “เจ๋งดี” แล้วก็ปิดทันที
น่าจะเป็นเพราะ (A) คุณค่าของเวลาที่เปลี่ยนไป (B) มาตรฐานความดื่มด่ำกับเกมที่สูงขึ้น หรือ (C) ฉันใช้เวลากับเกมไปมากเกินแล้ว
ตลอด 10 ปีที่ผ่านมา มีเดโม three.js/babylon.js มากมาย และอันนี้น่าจะอยู่ราว ๆ ระดับบน 10%
มันสนุกและคุณภาพสูง แต่ไม่มีอะไรใหม่ และประสิทธิภาพในการสื่อสารข้อมูลก็ต่ำ
ถ้าเทียบกับเกม 3D อินดี้แล้ว เรื่องความสมบูรณ์ก็ยังห่างอยู่
ถ้าคำแนะนำจากคนเพิ่งเริ่ม threejs ยังพอมีความหมาย ก็ขอแนะนำอย่างมาก
แต่เวลาใช้นิ้วขับบน iOS เมนูลองกดค้างจะเด้งขึ้นมาบ่อยจนเสียอรรถรส
รายละเอียดเล็ก ๆ น้อย ๆ และความสนุกสัมผัสได้ชัดเจน และฉันยังเล่นมินิเกมแข่งรถกับลูกชายด้วย
สงสัยว่าคนที่ทำเวลาได้ 20 วินาทีทำได้อย่างไร มี สปีดบูสต์ หรือเปล่า?
ฉันคิดว่าคุณค่าที่แท้จริงของเทคโนโลยีอยู่ที่ “มันทำให้เราทำสิ่งที่เมื่อก่อนไม่สามารถทำได้หรือไม่”
ตัวอย่างเช่น ตอนมนุษย์ยุคหินค้นพบขวานเหล็ก สิ่งสำคัญจริง ๆ ไม่ใช่ตัวขวาน แต่คือโลหะวิทยา
ในทำนองเดียวกัน สิ่งที่สำคัญกว่า bitcoin คือเทคโนโลยีการเข้ารหัส และสิ่งที่สำคัญกว่า threejs คือเราจะใช้มันสร้างอะไรใหม่ ๆ ได้บ้าง
ส่วนตัวฉันรู้สึกว่า threejs, react-three-fiber, shader ฯลฯ ยังทำอะไรได้มากกว่านี้มาก
สิ่งที่ฉันเรียกว่า “เจ๋ง” คือสิ่งที่ทำให้เราเห็นโลกต่างออกไป
ยกตัวอย่างได้เช่น เดโม CodePen นี้
ฉันคาดหวังว่าจะได้เห็นนวัตกรรมของประสบการณ์การนำทางที่มากพอจะทำให้การใช้ 3D ดูสมเหตุสมผล แต่ส่วนนั้นยังน่าเสียดาย