
Movi.Kanti.Revo เป็นเวอร์ชันทดลองใหม่ของ Chrome ที่ออกแบบมาเพื่อกระตุ้นประสาทสัมผัสโดย Cirque du Soleil และพัฒนาโดย Subatomic Systems ซึ่งนำความมหัศจรรย์ของ Cirque du Soleil มาสู่เว็บผ่านเทคโนโลยีเว็บสมัยใหม่
การสร้างโลก 3 มิติ
การทดสอบสร้างขึ้นโดยใช้ HTML5 เท่านั้น และสภาพแวดล้อมสร้างขึ้นโดยใช้มาร์กอัปและ CSS ทั้งหมด เช่นเดียวกับฉากบนเวที div
, img
, video
ขนาดเล็ก และองค์ประกอบอื่นๆ จะอยู่ในตำแหน่งบนพื้นที่ 3 มิติโดยใช้ CSS การใช้ 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 จะตั้งค่ากล้องของผู้ชมได้อย่างมีประสิทธิภาพ และใช้พร็อพเพอร์ตี้ perspective
ของ CSS เพื่อบอกเบราว์เซอร์ว่าผู้ชมจะดูองค์ประกอบจากจุดใด #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 อย่างในฉากสุดท้าย โดยเริ่มจากด้านหลังไปด้านหน้า องค์ประกอบต่างๆ ได้แก่ พื้นหลังท้องฟ้า ชั้นหมอก ประตู น้ำ ภาพสะท้อน ชั้นหมอกอีกชั้น และหน้าผาที่อยู่ด้านหน้า
แต่ละรายการจะวางบนเวทีด้วยพร็อพเพอร์ตี้ transform: translate3d(x, y, z)
CSS ที่ระบุตําแหน่งที่จะวางในอวกาศ 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 มิติของเวที และมีการแปลงที่เหมาะสมกับแต่ละฉาก