บทช่วยสอนล่าสุดเกี่ยวกับการสร้างเอฟเฟกต์แอนิเมชันแบบวาดด้วยมือโดยใช้ SVG filters ได้จุดประกายการอภิปรายเกี่ยวกับข้อจำกัดด้านประสิทธิภาพของเทคโนโลยีเว็บที่ทรงพลังแต่ใช้ทรัพยากรมากนี้ เทคนิคดังกล่าวซึ่งจำลองเอฟเฟกต์การเดือดที่เห็นในแอนิเมชันการ์ตูน ใช้ SVG filter primitives เพื่อทำให้ภาพประกอบแบบคงที่ดูเหมือนวาดด้วยมือและมีชีวิตชีวา
วิธีการนี้รวม SVG filter effects สองแบบเข้าด้วยกัน: feTurbulence เพื่อสร้าง procedural noise และ feDisplacementMap เพื่อบิดเบือน pixels ของภาพตาม noise นั้น ด้วยการทำให้ filter parameters เคลื่อนไหวด้วย JavaScript นักพัฒนาสามารถสร้างการเคลื่อนไหวแบบโซ่เซาะอย่างละเอียดที่ให้ภาพประกอบมีคุณภาพแบบวาดด้วยมือ
คอมโพเนนต์ SVG Filter สำหรับเอฟเฟกต์การเดือด:
feTurbulence: สร้างเทกซ์เจอร์สัญญาณรบกวนแบบขั้นตอนfeDisplacementMap: ใช้สัญญาณรบกวนในการเลื่อนตำแหน่งพิกเซลของภาพ- ช่วงเวลาของแอนิเมชัน: โดยทั่วไปจะอยู่ที่ 100-200ms เพื่อให้ได้เอฟเฟกต์ที่ลื่นไหล
- ความถี่พื้นฐาน: มักจะเริ่มต้นประมาณ 0.02 สำหรับการบิดเบือนที่ละเอียดอ่อน
ข้อกังวลด้านประสิทธิภาพจำกัดการใช้งานจริง
แม้จะได้ผลลัพธ์ทางภาพที่น่าประทับใจ แต่นักพัฒนารายงานปัญหาประสิทธิภาพที่สำคัญเมื่อนำ SVG filters ไปใช้ในสภาพแวดล้อมการผลิต ข้อกังวลหลักเน้นไปที่การใช้ CPU โดยแม้แต่การรวม filter แบบง่าย ๆ ก็ทำให้เกิดการใช้ทรัพยากรมากเกินไป
ผมได้เล่นกับการใช้ SVG effects เพราะมันทรงพลังอย่างน่าทึ่ง แต่ผมไม่แนะนำให้ deploy มันมากเกินไป: แม้ว่า Firefox จะทำ GPU acceleration ระดับหนึ่งสำหรับ SVG filter graphs แต่ในทางปฏิบัติ graphs ที่ดูเรียบง่ายมาก ๆ ที่ผมได้ลองสร้างดูเหมือนจะกลับไปใช้ CPU แม้จะเปิด webrender.all ไว้แล้ว
feTurbulence filter primitive ดูเหมือนจะมีปัญหาเป็นพิเศษ โดยมีรายงานว่ามันทำให้ CPU cores เต็มที่ทันทีบนแล็ปท็อปสมัยใหม่ สิ่งนี้ทำให้เทคนิคนี้ไม่เหมาะสำหรับอุปกรณ์มือถือและระบบที่ใช้แบตเตอรี่ ซึ่งการใช้ CPU มากเกินไปสามารถทำให้แบตเตอรี่หมดเร็วและเกิด thermal throttling
ผลกระทบต่อประสิทธิภาพ:
- การใช้งาน CPU: ใช้งานเต็มประสิทธิภาพทุกคอร์ในแล็ปท็อปรุ่นใหม่
- ผลกระทบต่อมือถือ: ทำให้อุปกรณ์ร้อนเกินไปและแบตเตอรี่หมดเร็ว
- การเร่งความเร็วด้วย GPU: มีข้อจำกัด มักจะกลับไปใช้การประมวลผลด้วย CPU
- การรองรับเบราว์เซอร์: Firefox มีการเร่งความเร็วด้วย GPU บ้าง แต่ไม่สม่ำเสมอ
แนวทางทางเลือกแสดงให้เห็นความหวัง
ข้อจำกัดด้านประสิทธิภาพได้นำนักพัฒนาไปสำรวจวิธีการทางเลือกเพื่อให้ได้เอฟเฟกต์ที่คล้ายกัน บางคนได้ทดลองกับการสร้าง paths ใหม่ด้วยตนเองเพื่อสร้างแอนิเมชันแบบหยักเป็นคลื่น แม้ว่าแนวทางนี้จะใช้ทรัพยากรมากเช่นกัน คนอื่น ๆ ได้ใช้เครื่องมือแอนิเมชันเฉพาะทางเช่น Rive เพื่อสร้างแอนิเมชันแบบ frame-based ด้วย state machines
การอภิปรายยังได้เปรียบเทียบกับเทคนิคแอนิเมชันที่ยอมรับแล้วเช่น Squigglevision ที่ใช้ในรายการเช่น Dr. Katz และ Home Movies วิธีการแบบดั้งเดิมเหล่านี้ได้เอฟเฟกต์ทางภาพที่คล้ายกันผ่านแนวทางเทคนิคที่แตกต่างกัน ซึ่งชี้ให้เห็นเส้นทางหลายทางสู่เป้าหมายสร้างสรรค์เดียวกัน
ความเข้ากันได้กับมือถือยังคงท้าทาย
การทดสอบบนอุปกรณ์มือถือเผยให้เห็นข้อกังวลเพิ่มเติมนอกเหนือจากการใช้ CPU ผู้ใช้รายงานว่าอุปกรณ์ร้อนมากเมื่อดูหน้าเว็บที่มี animated SVG filters ซึ่งบ่งชี้ว่ามีการปรับให้เหมาะสมกับฮาร์ดแวร์มือถือไม่ดี ปัญหาความร้อนนี้เพิ่มปัญหาการหมดแบตเตอรี่ ทำให้เทคนิคนี้ไม่เหมาะสำหรับประสบการณ์เว็บที่เน้นมือถือเป็นหลัก
การอภิปรายในชุมชนเน้นย้ำถึงความท้าทายทั่วไปในการพัฒนาเว็บ: การสร้างสมดุลระหว่างความน่าสนใจทางภาพกับข้อจำกัดด้านประสิทธิภาพ แม้ว่า SVG filters จะเสนอความเป็นไปได้ในการสร้างสรรค์ที่น่าทึ่ง แต่ข้อจำกัดในการใช้งานปัจจุบันจำกัดการใช้งานจริงในสภาพแวดล้อมการผลิต
การสนทนาที่กำลังดำเนินอยู่สะท้อนคำถามที่กว้างขึ้นเกี่ยวกับลำดับความสำคัญในการปรับปรุงเบราว์เซอร์และการปรับปรุงในอนาคตอาจทำให้เอฟเฟกต์เหล่านี้เหมาะสมมากขึ้นสำหรับการใช้งานเว็บในชีวิตประจำวันหรือไม่