5) Multimedia
ภาพที่ 22 ภาพไอคอนประกอบหมวด Multimedia [8]
เรื่องนี้เราพูดกันมาเยอะมาก
และเริ่มใช้งานจริงกันแล้ว คงไม่ต้องลงลึกในบทความตอนนี้ อธิบายแบบสั้นๆ
คือเดิมที่ HTML4
ขึ้นไปไม่สามารถแสดงผลเสียง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง <object>
แล้วติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย ซึ่งทำงานได้ตามนั้นแต่ก็มีปัญหายิบย่อยมากมายตามมาเช่นกันแต่พอเป็น
HTML5 ได้กำหนดให้ HTML ต้องเล่นไฟล์เสียงและวิดีโอได้ในตัว
จึงเป็นที่มาของแท็กใหม่ <audio> และ <video>
ที่หลายคนคงลองใช้กันแล้ว
ดังนั้นต่อไปเสียงและวิดีโอจะกลืนเป็นเนื้อเดียวกับเว็บเพจโดยตรง เราสามารถปรับเปลี่ยนการแสดงผลของมันได้เฉกเช่นเดียวกับส่วนอื่นๆ
ของเว็บเพจ เช่น ย้ายตำแหน่ง ซ้อนฉากหลัง หาอย่างอื่นมาบัง ฯลฯ อย่างไรก็ตาม
เรื่องมัลติมีเดียของ HTML5 กลับมีปัญหาประการใหม่เพิ่มเข้ามา
นั่นคือ "สงคราม codec" ระหว่างเบราว์เซอร์สองค่ายใหญ่
ดังที่เราเห็นจากข่าว WebM+Ogg (สนับสนุนโดย Chrome/Firefox/Opera)
vs H.264 (สนับสนุนโดย IE/Safari) นั่นเอง
6) 3D, Graphics & Effects
ภาพที่ 23 ภาพไอคอนประกอบหมวด 3D, Graphics & Effects [8]
หมวดที่หกเกี่ยวกับเรื่องกราฟิก แบ่งเป็น 4 ประการย่อย
(1) SVG (Scalable Vector Graphics)
เป็นภาษาตระกูล
XML ที่ออกแบบมาสำหรับการวาดกราฟิกแบบเวกเตอร์
(พอเทียบเคียงได้กับ SWF ของ Adobe หรือ
XAML ของไมโครซอฟท์) เทคโนโลยีนี้มีมานานพอสมควรแล้ว
คงไม่ต้องลงรายละเอียดนะครับ
(2) Canvas
แท็ก
<canvas> ถือเป็นของใหม่ที่สำคัญใน HTML5 เพราะมันช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมากเดิมที HTML
เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ)
ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS
(เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง
ต้องทำภาพมาแปะอีกทอดหนึ่งแท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ
"วาดภาพ" ลงบนเว็บเพจได้โดยตรง (กำหนด canvas ในเพจ
แต่สั่งวาดด้วยจาวาสคริปต์นะครับ) โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas
นั่นเองสิ่งที่เราสามารถใส่ลงไปในกรอบ canvas ได้แก่
· รูปทรงพื้นฐาน
สี่เหลี่ยม วงกลม เส้นตรง เส้นโค้ง พาธ (รูปทรงมีไม่เยอะเท่ากับ SVG)
· ไฟล์รูปภาพ
จะซ้อนกันกี่ชั้นก็ได้ตามสะดวก
· แอนิเมชัน
กำหนดให้วัตถุต่างๆ เคลื่อนไหว
· แปลงสภาพวัตถุ (transformation) จะกำหนดให้หมุน เอียง บิดเบี้ยว
ได้เหมือนกัน
· ประกอบ-ซ้อนภาพวัตถุ
(composition) เช่น นำสี่เหลี่ยมกับสามเหลี่ยมมา
intersect เพื่อสร้างวัตถุแบบใหม่ความต่างที่สำคัญของ SVG
กับ canvas คือ
· SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)
· SVG สั่งวาดด้วยแท็กแบบ
markup (ซับเซ็ตของ XML) ส่วน canvas
สั่งวาดด้วยจาวาสคริปต์
(3) WebGL
โดยทั่วไปแล้ว การวาดภาพ-แสดงผลใน canvas เรามักใช้กับภาพ 2 มิติเป็นหลัก
แต่ถ้าต้องการวาดภาพ 3 มิติ เราจะใช้ส่วนขยายของ canvas ที่เรียกว่า
WebGL (Web-based Graphics Library) WebGL เป็นไลบรารีกราฟิกที่พัฒนาอยู่บน OpenGL ES 2.0
ซึ่งเป็นไลบรารีกราฟิก 3 มิติมาตรฐานของวงการไอที
แต่ดัดแปลงให้เรนเดอร์ภาพออกมาบนออบเจคต์ canvas ภายในเบราว์เซอร์
และสั่งงานได้ผ่านจาวาสคริปต์ ตอนเรนเดอร์ก็ทำผ่าน GPU ตามปกติ
(ดูข่าวเก่าหมวด WebGL ประกอบ) ขั้นตอนการวาดภาพ 3 มิติบน WebGL
แทบไม่ต่างอะไรกับ canvas ปกติ
เพราะเราต้องกำหนดบริเวณที่เป็น canvas ในเว็บเพจขึ้นมาก่อน
เพียงแต่ตอนวาดในจาวาสคริปต์ เราจะสร้างออบเจคต์ชนิด WebGL ขึ้นมาแทน
canvas ปกติ ส่วนหลักการวาดวัตถุ 3 มิติคงไม่ต่างอะไรกับ OpenGL
ครับ ใครเคยเขียนโปรแกรมกับ OpenGL คงใช้ WebGL
ได้แทบจะทันทีสถานะตอนนี้ของ WebGL คือเบราว์เซอร์ทุกค่ายสนับสนุนแล้ว
ยังเหลือฝั่งไมโครซอฟท์ที่ยังไม่ยอมสนับสนุน (เหตุผลหนึ่งเพราะอยู่บน OpenGL
ไม่ใช่ DirectX)ข้อมูลเพิ่มเติม Getting
started with WebGL - Mozilla Developer Networko
(4) CSS3 3D
CSS3 นั้นต่างไปจาก CSS2 มาก
เพราะมันไม่ใช่มาตรฐานเดี่ยวๆ แต่ประกอบด้วยมาตรฐานย่อยๆ จำนวน
"หลายสิบ" ชนิด ซึ่งหนึ่งในนั้นคือ CSS3 3D
Transforms ที่สามารถแปลงสภาพวัตถุบนเว็บเพจในแบบต่างๆ เช่น
ขยายขนาด หมุนเอียงตามแกน xyzp
ไม่มีความคิดเห็น:
แสดงความคิดเห็น