Movi.Kanti.Revo เป็นการทดลองระบบรับความรู้สึกใหม่ของ Chrome ที่สร้างสรรค์โดย Cirque du Soleil และพัฒนาโดยระบบ Subatomic Systems ที่นำความมหัศจรรย์ของ Cirque du Soleil มาสู่เว็บผ่านเทคโนโลยีเว็บสมัยใหม่
การสร้างโลก 3 มิติ
การทดลองนี้สร้างขึ้นโดยใช้ HTML5 เท่านั้น และสภาพแวดล้อมทั้งหมดสร้างขึ้นด้วยมาร์กอัปและ CSS ทั้งหมด การใช้ CSS จะจัดตำแหน่ง div, img, video ขนาดเล็ก และองค์ประกอบอื่นๆ ในพื้นที่แบบ 3 มิติเช่นเดียวกับองค์ประกอบต่างๆ บนพื้นที่งาน การใช้
getUserMedia API ใหม่ช่วยให้โต้ตอบกับการทดสอบในรูปแบบใหม่ได้โดยไม่ต้องใช้แป้นพิมพ์หรือเมาส์ ไลบรารีการตรวจจับใบหน้าของ JavaScript จะติดตามศีรษะและย้ายสภาพแวดล้อมไปพร้อมกับคุณ
อินเทอร์เน็ตทั้งหมดอยู่ในขั้นตอนหนึ่ง
ในการสร้างการทดสอบนี้ เราขอแนะนำให้นึกถึงเบราว์เซอร์เป็นขั้นตอน และองค์ประกอบต่างๆ เช่น <div>, รูปภาพ, วิดีโอ และองค์ประกอบอื่นๆ เป็นชิ้นส่วนที่จัดวางในพื้นที่ 3 มิติโดยใช้ CSS แต่ละองค์ประกอบหรือเซ็ตองค์ประกอบจะจัดวาง
ในพื้นที่งานโดยใช้การแปลงแบบ 3 มิติ หากคุณไม่คุ้นเคยกับการแปลง translate3d ระบบจะใช้พารามิเตอร์ 3 รายการ ได้แก่ X, Y และ Z X ย้ายองค์ประกอบไปตามเส้นแนวนอน Y ย้ายองค์ประกอบขึ้นและลง และ Z ย้ายองค์ประกอบให้อยู่ใกล้หรือห่างออกไป ตัวอย่างเช่น การใช้ transform: translate3d(100px, -200px, 300px) จะเป็นการย้ายองค์ประกอบ
ไปทางขวา 100 พิกเซล, ด้านล่าง 200 พิกเซล และ 300 พิกเซลเข้าใกล้ผู้ชมมากขึ้น
การสร้างหอประชุม
เราจะมาดูฉากสุดท้ายและวิธีรวมฉาก ทุกฉากจะแบ่งออกเป็น 3 คอนเทนเนอร์หลัก ได้แก่ คอนเทนเนอร์โลก คอนเทนเนอร์มุมมอง และพื้นที่งาน โดย World Container จะตั้งค่ากล้องผู้ดูอย่างมีประสิทธิภาพ และใช้พร็อพเพอร์ตี้ CSS perspective เพื่อบอกเบราว์เซอร์ว่าผู้ชมจะดูองค์ประกอบจากที่ใด จะมีการใช้ #perspective-container เพื่อเปลี่ยนมุมมองโดยใช้การแปลงแบบ 3 มิติ สุดท้าย พื้นที่งานมีชุดชิ้นส่วนจริงที่จะแสดงบนหน้าจอ
<div id="world-container">
<div id="perspective-container">
<div id="stage">
</div>
</div>
</div>
#world-container {
perspective: 700px;
overflow: hidden;
}
#perspective-container {
{ % mixin transform-style: preserve-3d; % }
{ % mixin transform-origin: center center; % }
{ % mixin perspective-origin: center center; % }
{ % mixin transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); % }
}
แสดงภาพบนเวที
ในฉากมีองค์ประกอบ 7 อย่างในฉากสุดท้าย เมื่อเปลี่ยนจากหน้าหลังเป็นหน้าหลัง ภาพเหล่านี้มีทั้งพื้นหลังท้องฟ้า ชั้นหมอก ประตู น้ำ เงาสะท้อน ชั้นหมอกเพิ่มเติม และสุดท้ายคือหน้าผาที่อยู่ตรงหน้า
แต่ละรายการจะวางอยู่บนพื้นที่งานโดยมีพร็อพเพอร์ตี้ CSS ของ
transform: translate3d(x, y, z) ซึ่งระบุตำแหน่งที่
พอดีกับพื้นที่ 3 มิติ เราใช้ค่า z ในลักษณะที่คล้ายกันกับ z-index แต่ด้วยพร็อพเพอร์ตี้ translate3d เราระบุค่าของหน่วยได้ด้วย
รูปที่ 1 แสดงฉากที่ซูมออกและหมุนเกือบ 90 องศาเพื่อให้คุณเห็นภาพว่าชิ้นส่วนแต่ละชุดถูกวางไว้ภายในพื้นที่งานอย่างไร ส่วนด้านหลัง (สุดซ้ายสุด) คุณจะเห็นฉากหลัง หมอก ประตู น้ำ และสุดท้ายก็เห็นหน้าผา
การวางพื้นหลังบนเวที
เรามาเริ่มที่ภาพพื้นหลัง เนื่องจากนี่เป็นส่วนที่ไกลที่สุด เราจึงใช้การแปลง -990 พิกเซลบนแกน Z เพื่อดันให้กลับเข้าสู่มุมมองของเรา (ดูรูปที่ 2)
เมื่อเลื่อนกลับไปในอวกาศ ฟิสิกส์ต้องการให้มีขนาดเล็กลง คุณจึงต้องปรับขนาดผ่านพร็อพเพอร์ตี้ scale(3.3) เพื่อให้พอดีกับวิวพอร์ต และจัดขอบด้านบนให้ตรงกับด้านบนของวิวพอร์ตโดยมี translate3d บนแกน y (ดูรูปที่ 3)
.background {
width: 1280px;
height: 800px;
top: 0px;
background-image: url(stars.png);
{ % mixin transform: translate3d(0, 786px, <b>-990px</b>) <b>scale(3.3)</b>; % }
}
หมอก ประตู และหน้าผามีลักษณะในลักษณะเดียวกัน โดยใช้ translate3d กับตําแหน่ง Z และตัวประกอบการปรับขนาดที่เหมาะสม (ดูรูปที่ 4) สังเกตได้ว่ามีหมอกปกคลุมทั้งหลังประตูและหลังหน้าผา
การเพิ่มทะเล
ในการสร้างสภาพแวดล้อมที่สมจริงที่สุด เรารู้ว่าเราไม่อาจวางน้ำบนระนาบแนวตั้งได้ ซึ่งโดยทั่วไปแล้วจะไม่มีแบบนั้นในโลกแห่งความเป็นจริง นอกจากการใช้ translate3d เพื่อวางตำแหน่งน้ำบนเวทีแล้ว เรายังใช้การหมุนแกน X (แนวนอน) ที่ 60 องศา (rotateX(60deg)) เพื่อให้ดูแบนและมีพื้นผิวด้วย
ระบบได้เพิ่มการหมุนที่คล้ายกันในเงาสะท้อนของประตูและหมอกรองเพื่อให้ปรากฏในระนาบที่ถูกต้อง (ดูรูปที่ 5)
.sea {
bottom: 120px;
background-image: url(sea2.png);
width: 1280px;
height: 283px;
{ % mixin transform: translate3d(-100px, 225px, -30px) scale(2.3) <b>rotateX(60deg)</b>; % }
}
แต่ละฉากสร้างขึ้นด้วยลักษณะที่คล้ายกัน มีการแสดงองค์ประกอบภายในพื้นที่แบบ 3 มิติของเวที จากนั้นจึงนำการเปลี่ยนแปลงที่เหมาะสมไปใช้กับแต่ละฉาก