การใช้ Shaders เพื่อสร้างเอฟเฟกต์พิเศษที่สมจริงในการออกแบบเว็บ

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

วันนี้เราจะมาสำรวจแนวคิดบางอย่างที่แสดงประโยชน์ของการใช้เฉดสี เราจะมุ่งเน้นไปที่ GLSL

GLSL ย่อมาจาก Graphics Library Shader Language เป็นส่วนสำคัญของ WebGL และรับผิดชอบต่อโซลูชันที่น่าทึ่งส่วนใหญ่ที่เราเห็นในธรรมชาติ ด้วยชื่อของมัน ทำให้นักพัฒนามีเครื่องมือในการจัดการกราฟิกอย่างสังหรณ์ใจ ในมือขวาสามารถนำความคิดใด ๆ มาสู่ชีวิตได้

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

Waterdroplet WebGL Shader โดย Stefan Weck

Stefan Werk เปิดบทสรุปของเราด้วยผลงานชิ้นเอกของเขา ซึ่งพิสูจน์ให้ทุกคนเห็นว่าเทคโนโลยีระดับไฮเอนด์เป็นเวทมนตร์ที่แท้จริง เขาสามารถสร้างฝนที่ตกลงมาบนหน้าต่างได้ (หรือในกรณีของเราคือหน้าจอ) พฤติกรรมและการรับรู้ของเม็ดฝนเป็นจริงมากจนคุณอยากสัมผัส ที่นี่ JavaScript ยืนอยู่ด้านหลังการจำลองฝนในขณะที่ WebGL shader รับผิดชอบต่อเอฟเฟกต์เหนอะหนะและการหักเหของแสง

Three js water shader โดย Jonathan Blair / ShaderToy รวบรวมโดย David Hartley

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

ในขณะที่โจนาธาน แบลร์สร้างเฉพาะผิวน้ำ เดวิด ฮาร์ทลีย์ได้ทำให้สิ่งต่างๆ น่าสนใจขึ้นเล็กน้อยโดยทำให้ส่วนหลังมีรูปร่างเป็นทรงกลม ดังนั้นจึงเลียนแบบโลกได้อย่างชำนาญ ทั้งสองโครงการน่าเหลือเชื่อ

Pixijs.v3 ตัวอย่าง Shader โดย Omar Shehata

ขับเคลื่อนโดย Pixi.js แนวคิดที่น่าสนใจนี้โดย Omar Shehata จะทำให้คุณประหลาดใจด้วยการจำลองเอฟเฟกต์หมอกควันที่มีรายละเอียดสูง แต่งแต้มด้วยสีม่วงสวยงามและพื้นหลังสีเข้ม เมฆควันเหล่านี้ดูสมจริงอย่างไม่น่าเชื่อ ท่าทางจะคิดดี แนวคิดนี้น่าดึงดูดใจ

Snowfall WebGL Shader โดย Boris Šehovac

แนวคิดนี้ดำเนินไปตามชื่อของมัน มันสมจริงมาก Boris Sehovac ใช้เกล็ดหิมะขนาดต่างๆ ความเบลอในระดับต่างๆ และความเร็วที่แตกต่างกันเพื่อสร้างความลึกขึ้นมาใหม่ ยิ่งไปกว่านั้น เขายังพยายามจำลองลมโดยบังคับให้องค์ประกอบเปลี่ยนทิศทางจากซ้ายไปขวาและในทางกลับกัน เป็นผลให้เราสามารถเห็นพายุหิมะขนาดเล็กบางประเภท Shader WebGL ดั้งเดิมยืนอยู่เบื้องหลังความงามนี้

แนวคิดโดย อานันท์ ดาวาสุเรน

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

Clouds Shader โดย David Hartley

นี่เป็นผลงานชิ้นเอกอีกชิ้นหนึ่งที่สร้างขึ้นโดย David Hartley คราวนี้ศิลปินได้สาธิตการใช้เมฆและพฤติกรรมที่ลอยอยู่ อีกครั้ง Pixi.js ยืนหยัดอยู่เบื้องหลังโครงการอันยิ่งใหญ่นี้ ที่นี่ กล้องจะเคลื่อนผ่านก้อนเมฆ ทำให้คุณสัมผัสได้ถึงความงดงามของแนวคิด แต่ยังไม่เพียงพอสำหรับเดวิด เขายังเปิดโอกาสให้เราได้สำรวจฉากด้วยการเลื่อนเคอร์เซอร์ไปรอบๆ เหลือเชื่อเพียง

เครื่องไล่สีไฟโดย 14islands

ตั้งแต่พายุหิมะที่เยือกแข็งและก้อนเมฆที่เย็นยะเยือกไปจนถึงสิ่งที่ร้อน นี่คือความพยายามที่ประสบความสำเร็จในการจำลองไฟ ทีมงานที่อยู่เบื้องหลัง 14islands ใช้อนุภาคและเฉดสีที่กำหนดเองเพื่อทำให้แนวคิดนี้เป็นจริง เป็นผลให้เราสามารถเห็นกองไฟขนาดเล็กที่มีควันซึ่งแผ่ความอบอุ่นในทุกด้าน

GLSL: Chrome โดย Liam Egan

Chrome โดย Liam Egan มีลักษณะเป็นของเหลวที่มีความหนาแน่นสูง โปรเจ็กต์นี้ชวนให้นึกถึงฉากหนึ่งในมหากาพย์ Terminator 2 เมื่อ T-1000 ผู้ชั่วร้ายแสดงองค์ประกอบโลหะเหลวของเขา แนวคิดนี้ให้ความรู้สึกเหมือนเป็นการประดิษฐ์โดยไม่ต้องสงสัย ทว่าลักษณะการทำงานและพื้นผิวมันวาวดูสมจริงอย่างไม่น่าเชื่อ ยิ่งไปกว่านั้น คุณสามารถเล่นได้โดยเลื่อนเมาส์ขึ้นและลงเพื่อเปลี่ยนพารามิเตอร์การปรับให้เรียบ

ระลอกคลื่นโดย Martin Laxenaire

โครงการนี้โดย Martin Laxenaire เป็นตัวอย่างที่สมบูรณ์แบบของการใช้ shaders ที่นี่ผู้เขียนพยายามดึงเอฟเฟกต์ระลอกคลื่นที่แท้จริงซึ่งทำให้ภาพเคลื่อนไหวเหมือนม่านเมื่อวางเมาส์ไว้ Curtains.js ขับเคลื่อนแนวคิดนี้ ข้อเสียเพียงอย่างเดียวคืออาจยังเร็วเกินไปที่จะจัดหารูปภาพแต่ละภาพบนเว็บไซต์ด้วยเอฟเฟกต์นี้ เนื่องจากมันยังคงหนักเกินไปสำหรับคอมพิวเตอร์ระดับล่างที่จะ "แยกแยะ"

หิ่งห้อยบกพร่องโดย Fabien Motte

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

โยนร่มเงา

Shaders เป็นเครื่องมือที่ทรงพลัง แม้ว่าเราจะมุ่งเน้นไปที่การแก้ปัญหาที่เหมือนจริงในบทความนี้ แต่ก็มีแนวคิดที่น่าเหลือเชื่ออีกมากมายที่ดูประดิษฐ์ขึ้น คุณสามารถสร้างฉากและองค์ประกอบที่แตกต่างกันโดยสิ้นเชิง – ที่นี่เป็นที่ที่จินตนาการของคุณสามารถโลดแล่นได้อย่างเต็มที่

อย่างไรก็ตาม พลังอันยิ่งใหญ่มาพร้อมความรับผิดชอบที่ยิ่งใหญ่ มีปัญหาสองสามประการที่คุณต้องพิจารณาก่อนที่จะกระโดดลงไปในสิ่ง shader ทั้งหมดนี้

ประการแรก มีปัญหากับความเข้ากันได้ของเบราว์เซอร์ ไม่ใช่ทุกคนที่จะชื่นชมความงามของมันได้ และประการที่สอง ไม่ใช่ว่าคอมพิวเตอร์ทุกเครื่องจะจัดการกับมันได้โดยไม่มีข้อผูกมัด ซึ่งหมายความว่า shaders ไม่ใช่เครื่องมือสากล อย่างน้อยก็ยังไม่ได้