ฉันจะสร้างเอฟเฟกต์ไฟที่ดีด้วยการผสมอัลฟ่าและอนุภาคได้อย่างไร


41

การใช้การตั้งค่าต่อไปนี้สำหรับเอฟเฟกต์อนุภาค OpenGL:

SRC: GL_SRC_ALPHA
DST: GL_ONE

สร้างการผสมผสานเพิ่มเติมซึ่งมีลักษณะที่งดงามบนพื้นหลังสีดำ แต่น่ากลัวในสีที่สว่างกว่าเพราะมันเริ่มจางลงเป็นสีขาว

จากนั้นฉันก็ใช้การผสมอัลฟา:

SRC: GL_SRC_ALPHA
DST: GL_ONE_MINUS_SRC_ALPHA

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

สารเติมแต่ง:

สารเติมแต่งบนสีดำ สารเติมแต่งบนสีน้ำเงิน

อัลฟา:

อัลฟาบนพื้นสีดำ อัลฟาบนฟ้า

UPDATE:

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

สารเติมแต่งปกติและรุ่นของฉัน

นี่คือกระทู้ที่ฉันโพสต์กระบวนการของฉัน: http://www.cocos2d-iphone.org/forum/topic/28707?replies=8#post-141528

วิดีโอ: http://www.youtube.com/watch?v=JptGbEO3b5E

คำตอบ:


17

ฉันยอมรับว่าฉันไม่ได้ตระหนักถึงวิธีแก้ปัญหาที่เหมาะสมที่สุดสำหรับปัญหานี้ดังนั้นฉันจะอธิบายวิธีแก้ปัญหาที่คุณอาจจะหรือไม่สบายใจกับ:

  1. Render ทั้งหมดของอนุภาคโดยใช้การผสมสารเติมแต่งไปยังแยกต่างหากเนื้อ (หรือทำให้เป้าหมาย) ที่มีพื้นหลังของมันหายไปอย่างโปร่งใส
  2. Render เนื้อ (หรือทำให้เป้าหมาย) บนด้านบนของฉากของคุณโดยใช้ผสมอัลฟา

ฉันลองใน Photoshop และนี่คือสิ่งที่ฉันได้รับ - มันไม่สมบูรณ์แบบ แต่อย่างน้อยมันก็รักษาสีเดิมได้ดีกว่า:

ป้อนคำอธิบายรูปภาพที่นี่

นี่คือพื้นผิวดั้งเดิมโดยไม่ทำการผสมแบบเพิ่มเติมบนอนุภาค

ป้อนคำอธิบายรูปภาพที่นี่


สิ่งนี้จะแยกพวกมันออกเป็นพื้นผิวสองแบบหรือไม่และเหมือนกับว่าฉันมีพื้นผิวของการผสมผสานที่เพิ่มเติมเข้ามาในพื้นหลังหรือไม่?
Aram Kocharyan

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

ขอบคุณที่เหมาะสมแล้วมันก็เหมือนกับการผสมผสานปกติใน Photoshop กับการซ้อนทับ แต่มันก็ดูเหมือนภาพซ้อนทับที่นั่งอยู่บนเลเยอร์พื้นหลัง ฉันจะลองและแจ้งให้คุณทราบ
Aram Kocharyan

@AramKocharyan ฉันจะโพสต์ผลที่ได้รับใน photoshop ในไม่กี่นาทีเพื่อให้คุณสามารถเปรียบเทียบ
David Gouveia

5
เพียงแค่โยนสิ่งนี้ออกไป - เทคนิคนี้อาจทำให้เกิดความกังวลเกี่ยวกับประสิทธิภาพ ...
ไม่ใช่

9

ไปดูอัลฟ่าที่มีก่อนกำหนด

http://blogs.msdn.com/b/shawnhar/archive/2009/11/07/premultiplied-alpha-and-image-composition.aspx


2
นี่เป็นคำตอบเดียวที่ถูกต้องในชุดข้อความนี้ เป็นเรื่องน่าเสียดายที่มันสั้น แต่ทุกคนควรอ่านสิ่งนี้ อัลฟา Premultiplied เป็นวิธีการรวมสารเติมแต่งและการผสมอัลฟาและมาพร้อมกับผลประโยชน์อื่น ๆ อีกมากมายเกินไป
Jake McArthur

4

ดังที่ David Gouveia ชี้ให้เห็นไม่มีการทดแทนที่น่าพึงพอใจสำหรับการผสมแบบผสมผสานบนพื้นหลังที่สว่าง ผลที่ดีที่สุดที่ฉันพบ (ที่ไม่ต้องการสิ่งที่ต้องการเรนเดอร์ backbuffer) คือการใช้ GL ผสมผสานโหมดต่อไปนี้:

SRC: GL_ONE
DST: GL_ONE_MINUS_SRC_ALPHA

มันไม่ได้ดีเท่าที่ผสมสารเติมแต่ง GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHAแต่วิธีที่ดีกว่า หากคุณปรับแต่งค่าเริ่มต้นและจุดสิ้นสุดและค่าสีเล็กน้อยคุณอาจได้ผลลัพธ์ที่ใกล้เคียงกับการผสมแบบเติมแต่ง

โหมดการผสมอนุภาค

ในภาพด้านบนมีGL_SRC_ALPHA, GL_ONEด้านซ้ายตรงกลางมีGL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHAและด้านขวาคุณสามารถเห็นโหมดการผสมผสานที่ฉันจะเสนอสำหรับการตั้งค่านี้


ฉันยอมรับว่าสำหรับการควบคุมสีทั้งหมดวิธีนี้ใช้งานได้ดี
Aram Kocharyan

เพียงสังเกตฉันพบว่าด้วยวิธีนี้วิธีที่ดีที่สุดในการดับไฟคือการทำให้มันลดลงเหลือศูนย์ขนาดเนื่องจากการลดลงของอัลฟาทำให้มันจางลงเป็นสีขาว
Aram Kocharyan

3

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


นั่นอาจเป็นตัวเลือกถัดไปของฉันฉันต้องการเก็บอนุภาคให้น้อยที่สุด หวังว่าฉันจะได้ครึ่งหนึ่งทั้งคู่
Aram Kocharyan

3

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

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


ใช่พื้นผิวเป็นเพียงแปรงสีขาวที่มีอัลฟาแตกต่างจากจุดศูนย์กลาง
Aram Kocharyan

ฮะถ้าเป็นจริงแล้วมันแปลกสำหรับฉันที่ภาพหน้าจอความโปร่งใสอัลฟ่าของคุณมีรัศมีมืดรอบอนุภาค
jhocking

ใช่ฉันไม่แน่ใจว่าทำไมพวกเขาก่อตัวรอบการผสมอัลฟา แต่สำหรับสิ่งที่ฉันมีตอนนี้ดูเหมือนจะไม่เป็นไร
Aram Kocharyan


ดูดีทีเดียวคุณควรใส่คำถามนั้นไว้ในการอัปเดตคำถามของคุณ
jhocking
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.