เมอร์รี่ พิกมัส

สรุป

Merry Pixmas: สนุกสนานกับเทศกาลคริสต์มาสด้วยการแปลง CSS แบบ 3 มิติ

เราชอบอะไร

การสาธิตที่ยอดเยี่ยมธีมคริสต์มาสซึ่งทำงานได้ดีทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ นอกจากนี้ยังมีการสนับสนุนสีธีมใหม่เอี่ยม และไฟล์ Manifest ของเว็บเพื่อการใช้งานหน้าจอหลักที่เปิดแบบเต็มหน้าจอ

เคล็ดลับมือโปร: เขย่าโทรศัพท์เพื่อให้หิมะโปรยปราย

การปรับปรุงที่เป็นไปได้

แม้จะรู้ว่าเป็นการสาธิต แต่ส่วนหัวของแคชที่ระบุ 2-3 รายการในเนื้อหาและ JavaScript ที่ไม่บล็อกการแสดงผลช่วยปรับปรุงเวลาในการโหลดที่รับรู้ได้พอสมควร

ถามตอบกับ Jim Savage

ทำไมต้องเป็นเว็บ

ที่โตเกียว เราส่งเสริมการใช้เว็บที่ปรับเปลี่ยนตามอุปกรณ์และเว็บบนอุปกรณ์เคลื่อนที่มาอย่างยาวนาน แทนที่จะเป็นแบบเนทีฟ Pixmas เกิดจากการทดลอง HTML5 และ CSS3 ในช่วงที่ช่วงพักระหว่างโปรเจ็กต์ เราพยายามหาความรู้ใหม่ๆ อยู่เสมอเพื่อให้ความรู้เป็นปัจจุบันอยู่เสมอ ดังนั้น สำหรับทีมนักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์ของเราแล้ว การวิจัยทั้งหมดจะเป็นเรื่องผ่านเว็บ ไม่ใช่แพลตฟอร์มแบบเดิม

เมื่อเบราว์เซอร์เติบโตขึ้นเรื่อยๆ เราจึงเห็นฟังก์ชันที่เหมือนเวอร์ชันเดิมมากขึ้น ฟังก์ชันที่เคยมีให้ใช้ผ่านการพัฒนาแบบเนทีฟเท่านั้น เช่น ตำแหน่งทางภูมิศาสตร์ การเข้าถึงกล้อง พื้นที่เก็บฐานข้อมูลในเครื่อง ฯลฯ ซึ่งล้วนให้ประสบการณ์โดยรวมที่เหมือนเนทีฟสำหรับผู้ใช้ แต่ได้รับประโยชน์จากการพัฒนาข้ามแพลตฟอร์มและการพัฒนาทำซ้ำที่รวดเร็ว แน่นอนว่าการพัฒนาโฆษณาเนทีฟยังมีประโยชน์อยู่ และเมื่อจัดการโปรเจ็กต์ใหม่ เราก็ได้คำนึงถึงปัจจัยมากมายทั้งสำหรับตัวเลือกเว็บและเนทีฟ อาจจะฟังดูชัดเจน แต่สำหรับลูกค้าของเรา สิ่งสำคัญคือเราแนะนำแพลตฟอร์มที่ดีที่สุดสำหรับงาน แทนที่จะใช้คีย์เอาไว้สำหรับทุกๆ โปรเจ็กต์ที่เราชอบเขียนโค้ด

อะไรที่ได้ผลดีในช่วงการพัฒนา

ผมคิดว่า Pixmas มีประเด็นหลักอยู่ที่ 3D Transforms และการที่เรา จะผลักดัน CSS ได้มากแค่ไหน ดังนั้นสไตล์ภาพที่เป็นพิกเซลจึงทำงานได้ดีมาก ในเบราว์เซอร์ และนักพัฒนาซอฟต์แวร์ฟรอนท์เอนด์จะบอกให้คุณทราบว่า พฤติกรรมตามธรรมชาติของเบราว์เซอร์นั้นเป็นมิตรกับผู้ใช้มาก ดังนั้นการใช้รูปแบบโดยรวมและการคำนวณแบบ 3 มิติ โดยแก้ไขปัญหาที่อิงตามสี่เหลี่ยมจัตุรัสจึงได้ผลมาก การสร้างลูกบาศก์ที่มีการแปลงแบบ 3 มิติและ HTML นั้นง่ายกว่ารูปทรงพื้นฐานแบบอื่นๆ มาก แต่การโต้ตอบและภาพเคลื่อนไหวทำให้เราต้องลองผิดลองถูกเล็กน้อยเพื่อทำให้ราบรื่นขึ้น

สิ่งที่น่าประหลาดใจมากที่สุดคือความราบรื่นและประสิทธิภาพของเบราว์เซอร์ 3 มิติในแพลตฟอร์มอุปกรณ์เคลื่อนที่ โดยเฉพาะในอุปกรณ์ Android ที่ไม่ค่อยเป็นที่รู้จัก

หากคุณพอจะมี API สำหรับปรับปรุงแอป คุณจะใช้ API อะไรได้บ้าง

ถ้าเราจะเขียน Pixmas อีกครั้ง เราน่าจะใช้ API แบบ WebGL แม้ว่าการจัดการองค์ประกอบ HTML DOM ในแบบ 3 มิติผ่าน CSS จะเป็นเรื่องสนุก แต่ประสิทธิภาพที่แท้จริง สำหรับ 3 มิติบนเว็บต้องเป็นเทคโนโลยีที่ใช้ฮาร์ดแวร์เร่งการแสดงผลโดยเฉพาะ เช่น WebGL CSS 3D เหมาะสำหรับเอฟเฟ็กต์และการเปลี่ยนหน้าเว็บพื้นฐาน แต่เรา ถูกจำกัดประสิทธิภาพเบราว์เซอร์เมื่อเขียนโค้ด Pixmas

Google มีโครงการ WebGL ดีๆ ที่ Chrome Experiments