Show HN: การจำลองพืช 3D ในเบราว์เซอร์

 (plant.max-richter.dev)
3 คะแนน โดย GN⁺ 2023-12-04 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Plantarium คือระบบสำหรับประกอบ พืช 3D ด้วยโหนดในเบราว์เซอร์ และต้องมี output node หนึ่งตัวเพื่อสร้างพืชที่สมบูรณ์
  • โครงสร้างพื้นฐานของพืชสร้างโดยโหนด Stem และปรับตำแหน่ง ความสูง ความหนา และจำนวนของลำต้นได้ด้วยอินพุต origin, height, thiccness, minThiccness, amount
  • การทำซ้ำและการแปรผันของค่าดูแลโดยโหนด Vec3 และ Parameter โดยเพิ่มการเปลี่ยนแปลงแบบสุ่มให้กับค่าเริ่มต้น เพื่อให้พืชดูไม่สม่ำเสมอจนเกินไป
  • การเปลี่ยนแปลงรูปทรงควบคุมด้วยโหนด Rotate, Gravity, Noise โดยรับอินพุตเป็นแกนและมุมการหมุน วิธีคำนวณแรงโน้มถ่วง รวมถึงขนาดและความแรงของ noise
  • ใบสร้างด้วยโหนด Leaf, Shape, Instance และจัดวางตามลำต้นหรือกิ่ง โดยกำหนดเงื่อนไขด้านขนาด ช่วง จำนวน การหมุน และความลึกได้

เอาต์พุตสุดท้ายของกราฟโหนด

  • ระบบโหนด ทุกระบบต้องมีโหนด output หนึ่งตัวเพื่อสร้างผลลัพธ์สุดท้าย
  • output รับอินพุต plant เพื่อประกอบผลลัพธ์พืชทั้งหมด

การสร้างลำต้นและการควบคุมตำแหน่ง

  • โหนด Stem สร้างลำต้นหลักของพืช
    • _origin_: ตำแหน่งที่วางลำต้น และสามารถเชื่อมต่อโหนด vec3 ได้
    • height: ความสูงของลำต้น
    • thiccness: ความหนาของลำต้น
    • minThiccness: ความหนาขั้นต่ำ
    • _amount_: จำนวนลำต้นที่จะ instantiate
  • โหนด Vec3 ส่งออกค่า x, y, z
    • หากต้องการกระจายตำแหน่งลำต้น สามารถเชื่อมต่อโหนด random หรือ parameter ได้

การแปรผันของค่าและความสุ่ม

  • โหนด Parameter ส่งออกค่าที่นำค่าเริ่มต้นไปปรับด้วยการเปลี่ยนแปลงแบบสุ่มในระดับหนึ่ง
    • _value_: ค่าเริ่มต้นที่จะนำไปแปรผัน
    • _variation_: ปริมาณการแปรผันที่จะใช้กับค่าเริ่มต้น
  • Parameter ถูกใช้ซ้ำในอินพุตหลายส่วน เช่น ลำต้น การหมุน แรงโน้มถ่วง เส้นโค้ง และค่าของสไลเดอร์

เปลี่ยนรูปทรงด้วยการหมุน แรงโน้มถ่วง และ Noise

  • โหนด Rotate หมุนพืชตามแกนและมุมที่กำหนด
    • input: เป้าหมายที่จะหมุน
    • _axis_: แกนหมุน
    • _aroundOrigin_: ระบุว่าจะหมุนอ้างอิงจุด 0,0,0 หรือไม่
    • smooth: อินพุตที่เกี่ยวข้องกับการหมุนแบบนุ่มนวล
    • _spread_: เมื่อต่อวัตถุหลายชิ้น กำหนดว่าจะหมุนเป็นหนึ่งเดียวหรือหมุนแบบกระจาย
    • _angle_: มุมหมุน
  • โหนด Gravity ใช้แรงโน้มถ่วงอย่างง่ายกับกิ่งและลำต้น
    • input: เป้าหมายที่จะใช้แรงโน้มถ่วง
    • curviness: ระดับความโค้งงอ
    • _type_: วิธีคำนวณแรงโน้มถ่วง โดยปัจจุบันมีเพียง simple และ test ที่ทำงานได้
    • strength: ความแรงของแรงโน้มถ่วง
  • โหนด Noise ใช้ noise กับกิ่งที่ป้อนเข้า
    • plant: พืชอินพุต
    • size: ขนาดของ noise
    • strength: ความแรงของ noise

การสร้างใบและการจัดวางบนลำต้น

  • โหนด Leaf สร้างโมเดลใบ และสามารถใช้โหนด Instance เพื่อ instantiate ตามลำต้นได้
    • _shape_: รูปทรงของใบแต่ละใบ และสามารถเชื่อมต่อโหนด shape ได้
    • _curvature_: ความโค้งของใบในทิศทาง x/y และสามารถเชื่อมต่อโหนด vec2 ได้
  • โหนด Shape ส่งออกรูปทรงเดี่ยวที่สามารถเชื่อมต่อกับโหนด Leaf ได้
  • โหนด Instance จัดวางโมเดลอินพุตตามลำต้นหรือกิ่ง
    • input: อินพุตที่ใช้เป็นเกณฑ์ในการจัดวาง
    • model: โมเดลที่จะจัดวาง
    • alignRotation: การจัดแนวการหมุน
    • alternateRotation: การหมุนสลับ
    • _size_: ขนาดของใบแต่ละใบ
    • _instanceRange_: ช่วงที่จะวาง instance
    • _amount_: จำนวนใบที่จะวาง
    • rotation: ค่าการหมุน
    • offsetBySize: ออฟเซ็ตตามขนาด
    • _depth_: ระบุว่าจะวางใบในกิ่งกี่ชั้น
  • Alpha มีค่า min, max

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

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

 
GN⁺ 2023-12-04
ความคิดเห็นใน Hacker News

  • มีประโยชน์และเจ๋งมากในหลายด้าน
    ตัวแก้ไข node graph บนเบราว์เซอร์ทำมาได้ดีมาก สามารถสร้าง procedural 3D mesh ได้ แถมยัง export .obj ได้อีก และไลเซนส์ก็เอื้อเฟื้อพอที่จะเป็นเมล็ดพันธุ์ให้กับเครื่องมือแนว procedural ได้หลากหลาย

    • ขอบคุณมากจริงๆ :)
      มีไอเดียหลายอย่างที่อยากลองทำด้วยเครื่องมือนี้ และน่าจะได้เขียน วิทยานิพนธ์ปริญญาตรี เกี่ยวกับมันด้วย

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

    • ตอนนี้อยู่นอกบ้านเลยยังเข้า PC ไม่ได้ แต่เพิ่งเห็นว่าโพสต์นี้ได้รับความสนใจพอสมควร
      หวังว่าระบบจะรับไหว ;)

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

    • เป็น feedback ที่ดีมาก
      น่าจะดีถ้าเพิ่ม debounce ให้กับการจัดกึ่งกลางกล้องอัตโนมัติ :)
    • หรือจะทำให้การย้ายกล้องเป็น animation ตอนที่ภาพนิ่งแล้วหลังการเปลี่ยนแปลงก็ดูน่าสนใจ

  • เป็นโปรเจกต์ที่เจ๋ง แต่ตอนนี้เหมือนพืชจะไม่ถูก render แล้ว
    เมื่อ 20 นาทีที่แล้วยัง render อยู่เลย ดังนั้นน่าจะโดนผลกระทบจาก HN traffic
    โค้ดทั้งหมดอยู่บนออนไลน์ และเอกสารก็ดีเยี่ยม จริงๆ โปรเจกต์นี้ยังมี server backend ด้วย
    https://github.com/jim-fx/plantarium/tree/main
    https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....
    อีกสองสามวันจะกลับมาดูใหม่ตอนที่มันใช้งานได้

    • กลับมาใช้งานได้แล้ว

  • เมื่อปีที่แล้วผมเคยทำอะไรคล้ายๆ กัน เพราะอยากลองใช้ Rust เป็นเอนจินเว็บแอป
    มันเป็นการคอมไพล์เป็น wasm แล้วนำขึ้น Rust เว็บเซิร์ฟเวอร์ โดยผลลัพธ์อยู่ที่ https://blomma.lorentz.app
    แต่โปรเจกต์นี้ทำได้ดีกว่ามากในแง่ความเป็นผลิตภัณฑ์ โดยเฉพาะ ตัวแก้ไข node graph ที่เป็นจุดแข็งจริงๆ
    มันผสานเข้าไปใน workflow ได้ดี จนให้ความรู้สึกว่าเป็นผลิตภัณฑ์ที่ใครก็ใช้ได้ ไม่ได้เป็นแค่เครื่องมือดีบัก
    ถ้าฝั่งผมจะมีอะไรที่ดีกว่าก็คงเป็นการใช้ เส้นโค้งเบซิเยร์ ทั้งกับรูปทรงใบและรูปทรงลำต้น
    การจัด topology และ triangulation ให้ถูกต้องค่อนข้างยาก แต่ก็เป็นแบบฝึกหัดที่ดีมากสำหรับการเริ่มต้นกับ quaternion และทบทวนตรีโกณมิติ แนะนำให้ลองทำ node เส้นโค้งเบซิเยร์ดู

    • เจ๋งมากจริงๆ! ขอบคุณสำหรับคำพูดดีๆ ด้วย :)
      การเขียน geometry generator ใหม่ด้วย Rust/Wasm อยู่ใน roadmap อย่างจริงจังพอสมควร
      ตอนนี้กำลังทำ Advent of Code ไปพร้อมกับทำความคุ้นเคยกับ Rust

  • เจ๋งสุดๆ! ชอบพารามิเตอร์ thiccness ของลำต้นมาก :)

    • ขอบคุณ :)
      ผมรู้สึกว่านักพัฒนามักจะจริงจังกับโปรเจกต์ของตัวเองหรือกับตัวเองมากเกินไป เลยชอบใส่ ความขี้เล่น เล็กๆ ไว้ตรงนั้นตรงนี้

  • ชอบมากจริงๆ!
    มีข้อเสนอเรื่องการปรับปรุงการใช้งานอยู่สองสามอย่าง
    อย่างแรก ถ้าเผลอเลื่อนเมาส์ออกนอกกล่องแล้วปล่อย การลากจะทำงานผิดพลาดเหมือนบั๊ก เพราะมันไม่จับ mouse-up ทำให้พารามิเตอร์ค้างอยู่ในสถานะ mouse-down
    มันทำให้วาดในตัวแก้ไขใบไม้หรือปรับพารามิเตอร์ด้วยการลากแบบ slider ได้ยาก น่าจะพอแก้ได้ด้วยการผูกตัวจัดการอีเวนต์ mouse-up กับ common ancestor แทนที่จะเป็นกล่องตัวแก้ไข graph node เอง
    อย่างที่สอง จุดจับวงกลมของพอร์ต พารามิเตอร์เล็กๆ ที่ใช้ลากเชื่อมต่อยังเล็กไปหน่อย โดยเฉพาะเวลาซูมออกเพื่อดูฉากทั้งฉากมากขึ้น
    ถึงจะไม่เพิ่มขนาดองค์ประกอบกราฟิกจริงๆ แค่เพิ่ม hit area สัก 25% ก็น่าจะช่วยเรื่องการใช้งานได้มาก
    ผมใช้ Firefox อยู่ และปัญหา mouse handler นี้ก็เกิดเหมือนกันใน Chromium แต่การลากเชื่อม node ดูใช้งานได้ดีกว่าเล็กน้อยบน Chromium

    • ขอบคุณสำหรับ feedback!
      ผมมักจะเริ่มไม่ทันสังเกต บั๊กด้านการใช้งาน เล็กๆ แบบนี้เอง เลยมีค่ามากจริงๆ
      คิดว่าน่าจะได้แก้ทั้งสองอย่างภายในไม่กี่วัน :)

  • เผื่อคนที่ยังไม่รู้: แผงด้านขวาสามารถเลื่อนเพื่อเผย พารามิเตอร์และคอนโทรล เพิ่มเติมได้

  • ยอดเยี่ยมมาก
    อยากเห็นทั้งป่าที่สร้างจาก พืชเชิงอัลกอริทึม แบบ crowdsourced เร็วๆ
    มีความเชื่อมโยงกับโปรเจกต์ทางวิทยาศาสตร์ไหม? ฟีเจอร์ AI นักพฤกษศาสตร์ ที่บอกได้ว่าพืชมีโอกาสรอดแค่ไหน ใกล้เคียงกับการจัดจำแนกทางอนุกรมวิธานแบบใด หรือแม้กระทั่งสูตรปรุงที่เข้ากับข้าวสวยร้อนๆ ก็คงเจ๋งดี

    • หนึ่งในไอเดียของผมคือการสร้างสวนเสมือนที่พืชเติบโตและผู้ใช้ต้องดูแลเหมือน ทามาก็อตจิ :)
      ไม่ได้เชื่อมกับโปรเจกต์ทางวิทยาศาสตร์ เป็นแค่ผลงานของ nerd ที่ชอบต้นไม้
      แต่ก็สามารถแนบ gbif.org ID ให้กับโปรเจกต์ได้ และจากนั้นก็จะโหลดข้อมูลเพิ่มเติมผ่าน gbif API :)

  • ยอดเยี่ยม! ถ้าเพิ่ม time node ได้ ก็น่าจะทำ animation พื้นฐานได้ด้วย
    โดยรวมเป็นโปรเจกต์ที่น่ารักมาก

    • เป็นไอเดียที่ดี!
      ส่วนที่ยากน่าจะเป็นการผสาน animation เข้าไปโดยไม่ต้องสร้าง mesh ทั้งหมดใหม่ทุกเฟรม
      แต่การ export skeleton จาก generator แล้วใช้สิ่งนั้นมาทำ animation ให้พืชน่าจะง่ายมาก