การสร้าง SVG ที่มีเอฟเฟ็กต์นอยส์จำนวนมาก

 (daniel.do)
4 คะแนน โดย GN⁺ 2023-12-08 | 2 ความคิดเห็น | แชร์ทาง WhatsApp

การเพิ่มเอฟเฟ็กต์นอยส์ให้ SVG

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

Studio Vellekoop & León

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

รูปร่างพื้นฐานและไล่ระดับสี

  • ใน SVG สามารถวาดรูปร่างพื้นฐานอย่างวงกลมหรือสี่เหลี่ยมได้อย่างง่ายดาย
  • เมื่อนำไล่ระดับสีมาใช้ จำเป็นต้องมีไล่ระดับสีที่เปลี่ยนไปตามสีฐานเพื่อให้สามารถนำคอมโพเนนต์กลับมาใช้ซ้ำได้
  • แนะนำการใช้มาสก์และวิธีนิยามรูปร่างเพียงครั้งเดียวด้วย <defs> แล้วอ้างอิงด้วยองค์ประกอบ use

ผลลัพธ์

  • สร้างเท็กซ์เจอร์นอยส์แบบสังเคราะห์ด้วยฟิลเตอร์ <feTurbulence>
  • ใช้เอฟเฟ็กต์ฟิลเตอร์เพื่อลบการเปลี่ยนแปลงของสีและผสมเข้ากับสีเติมที่เลือกไว้อย่างเป็นธรรมชาติ
  • สุดท้ายได้ภาพประกอบที่น่าพอใจ แต่ใน Safari การเรนเดอร์ออกมาแตกต่างกัน

ข้อมูลเพิ่มเติม 7 ธันวาคม 2023

  • ส่งบทความไปยัง Hacker News และได้รับการตอบรับบางส่วน
  • แนะนำบทความของ CSS Tricks ในหัวข้อคล้ายกันที่ Jimmy Chion เขียนไว้เมื่อปี 2021
  • ตอนที่เขียนบทความนี้ ผู้เขียนยังไม่ทราบถึงบทความก่อนหน้า แต่ตอนนี้ได้ใส่ลิงก์ไว้เป็นเอกสารประกอบแล้ว

ความเห็นของ GN⁺

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

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
ndrgrd 2023-12-09

สมกับ Safari ที่ไม่เคยทำให้ผิดหวังจริง ๆ! เรียกว่าเป็น IE แห่งยุค 20s ก็ไม่เกินเลยนะ
 
GN⁺ 2023-12-08
ความคิดเห็นจาก Hacker News

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

  • เบื้องหลังของ "หยินหยางแบบเรียกซ้ำ" มีอธิบายไว้ในบล็อกดังกล่าว และมีแผนจะลองเล่นกับเท็กซ์เจอร์ แต่การที่ Safari แสดงผลต่างออกไปทำให้น่าหงุดหงิด สงสัยว่ามาตรฐานการตีความ SVG จะเกิดขึ้นได้หรือไม่

  • รู้สึกอัดอั้นเพราะการสร้างสไตล์ภาพประกอบแบบนี้ด้วย SVG ไม่ใช่เรื่องง่าย สไตล์นี้เรียกว่า "dithering" และหน้า "Grainy Gradients" ของ CSS-Tricks ก็อธิบายเทคนิคเดียวกันนี้ไว้ นอกจากนี้ยังมีทางเลือกที่ใช้ CSS เพื่อนำไปใช้กับทั้งภาพได้

  • เคยใช้ SVG สร้างโปสเตอร์งานประชุมที่ซับซ้อน แต่การเรนเดอร์แตกต่างกันไปในแต่ละเบราว์เซอร์และโปรแกรม สามารถฝังโดย include/link SVG ได้ แต่ถ้ารวม SVG อื่นเข้าไปด้วยกลับไม่ทำงาน บางครั้งเบราว์เซอร์ไม่แสดงภาพที่ฝัง/ลิงก์ไว้เพราะปัญหา "ความปลอดภัย" การแปลง SVG ที่ซับซ้อนเป็น PDF ก็เจอปัญหา out-of-memory แบบไม่สม่ำเสมอ เครื่องมือแต่ละตัวที่ใช้แปลง SVG เป็น PDF ให้ผลลัพธ์ต่างกัน และเครื่องมืออย่าง Inkscape บางครั้งก็จัดการ SVG ที่ถูกรวมไว้เป็นกราฟิกแบบแรสเตอร์

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

  • Inkscape สามารถเพิ่มนอยซ์ลักษณะนี้ได้ผ่านเอฟเฟ็กต์ฟิลเตอร์หลากหลายแบบ และเมื่อ export เป็น Plain SVG ก็สามารถเห็นการใช้ feTurbulence ในโค้ดได้ด้วย อีกทั้งยังมีการเปรียบเทียบด้วยว่า Affinity Designer 2 จัดการนอยซ์อย่างไร โดย SVG ที่ export ออกมาจะมีนอยซ์ฝังมาในรูปภาพ jpeg แบบ base64

  • เว็บไซต์ "ApeFest" สร้างนอยซ์แบบเคลื่อนไหวโดยใช้โอเวอร์เลย์ PNG แบบ tiled ที่เคลื่อนที่ "แบบสุ่ม" ด้วย CSS animation (จริง ๆ แล้วขยับด้วย JS) วิธีนี้เรียบง่ายในเชิงเทคนิคแต่ได้ผลดี

  • เนื่องจากหน้าตาของฟิลเตอร์ SVG แตกต่างกันมากตามเอนจินและปัจจัยด้านการสเกล จึงใช้เฉพาะในส่วนที่ละเอียดอ่อนเท่านั้น และใช้เมื่อความแม่นยำไม่ใช่เรื่องสำคัญ ฟิลเตอร์อย่าง feDisplacementMap ทำลาย anti-aliasing จนทำให้ครึ่งหนึ่งของกรณีที่อยากใช้พังไปเลย

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

  • Perlin Noise และ Fractal Noise ซึ่งเป็นแนวคิดต่อยอดจากมัน มีประสิทธิภาพมากในการเพิ่มความสมจริงหรือให้ความรู้สึก "เป็นธรรมชาติ" ตัวอย่างเช่น ใช้อย่างได้ผลในฉากหนีออกจากถ้ำใน "Aladdin (1992)"

  • สนใจวิธีสร้างเอฟเฟ็กต์ที่ไม่ขึ้นกับระดับการซูม/ย่อขยาย นอกจากนี้ในเรื่องการเพิ่มความสุ่ม ก็สงสัยว่ามีวิธีตั้งค่า seed เพื่อกำหนดผลการเรนเดอร์ที่ถูกต้องเพียงหนึ่งเดียวสำหรับขนาดที่กำหนดได้หรือไม่