Movi Kanti Revo - ตอนที่ 1 - การสร้างโลก 3 มิติ

โลโก้ Movi Kanti Revo

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: เวทีจากด้านข้าง
รูปที่ 1: เวทีจากด้านข้าง

รูปที่ 1 แสดงฉากที่ซูมออกและบิดเกือบ 90 องศาเพื่อให้คุณเห็นภาพว่าแต่ละฉากวางอยู่ในฉากอย่างไร ที่ด้านหลัง (ซ้ายสุด) คุณจะเห็นพื้นหลัง หมอก ประตู น้ำ และหน้าผา

การวางพื้นหลังบนเวที

มาเริ่มกันที่ภาพพื้นหลัง เนื่องจากอยู่ด้านหลังสุด เราจึงใช้การเปลี่ยนรูปแบบ -990 พิกเซลในแกน Z เพื่อดันวัตถุนั้นให้อยู่ด้านหลังในมุมมองของเรา (ดูรูปที่ 2)

เวทีที่มีเพียงพื้นหลังที่วางไว้ที่ -990px
รูปที่ 2: เวทีที่มีเพียงพื้นหลังที่วางไว้ที่ -990px

เมื่อวัตถุเคลื่อนที่กลับในอวกาศ กฎทางฟิสิกส์กำหนดให้วัตถุนั้นเล็กลง ดังนั้นจึงต้องปรับขนาดผ่านพร็อพเพอร์ตี้ 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>; % }
}
รูปที่ 3: เวทีที่มีการปรับขนาดและวางตำแหน่งพื้นหลัง
รูปที่ 3: เวทีที่มีเพียงพื้นหลังที่ปรับตำแหน่งและปรับขนาด

หมอก ประตู และหน้าผาในลักษณะเดียวกัน โดยแต่ละรายการใช้ translate3d ที่มีตำแหน่ง z และปัจจัยการขยายที่เหมาะสม (ดูรูปที่ 4) สังเกตว่าหมอกซ้อนกันอยู่หลังประตูและหลังหน้าผาอย่างไร

รูปที่ 4: เวทีที่มีหมอก ประตู และหน้าผาซึ่งจัดตำแหน่งและปรับขนาดแล้ว
รูปที่ 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>; % }
}
รูปที่ 5: เวทีที่มีการจัดวางและปรับขนาดทุกอย่างแล้ว
รูปที่ 5: เวทีที่มีการจัดวางและปรับขนาดทุกอย่างแล้ว
>

แต่ละฉากสร้างขึ้นในลักษณะที่คล้ายกัน องค์ประกอบต่างๆ แสดงเป็นภาพภายในพื้นที่ 3 มิติของเวที และมีการแปลงที่เหมาะสมกับแต่ละฉาก

อ่านเพิ่มเติม