การเขียนโปรแกรมกราฟิกจำลองการเปลี่ยนแปลงจาก Chrono Trigger ภายในเกต

ฉันเริ่มเล่นเกมนี้เป็นครั้งแรกเมื่อเร็ว ๆ นี้และนี่เป็นจุดสนใจของฉันจริงๆ

คุณสามารถเห็นการเปลี่ยนแปลงในการเคลื่อนไหวเริ่มต้นที่ ~ 12: 08

ดูเหมือนว่าจะมีคณิตศาสตร์ที่น่าสนใจเกิดขึ้นในนั้น ดูเหมือนว่ามีสองมุมมองที่แตกต่างกันมารวมกัน ระลอกคลื่นสีฟ้าจะถูกเรนเดอร์เป็นครั้งแรกในพื้นหลังจากนั้นคลื่นสั่นสีม่วงจะปรากฏขึ้นในการฉายภาพหลอก 3D บางประเภท

พวกเขามาถึงผลลัพธ์นี้อย่างไร แต่อยู่นอกเหนือฉันและความอยากรู้อยากเห็นได้ดีกว่าของฉัน

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

ฉันพยายามทำซ้ำเอฟเฟกต์โดยใช้ shader

ศูนย์ Shader00: https://www.shadertoy.com/view/XsXSz2

Shader01 Sides: https://www.shadertoy.com/view/4sXSz2

:) อย่างที่ Byte56 กล่าวคุณสามารถตั้งค่าเครื่องบินสามลำ เครื่องบินหันหน้าเข้าหากล้องตรงไปข้างหน้าด้วย Shader00 จากนั้นเครื่องบินสองลำที่มี Shader01 อาจเป็นไปตามที่ RandyGaul พูดถึงด้านบน / ล่างไม่ปรับขนาดอย่างสม่ำเสมอเพื่อให้ภาพลวงตาของความลึก

ฉันเชื่อว่าพวกเขาควรให้รูปลักษณ์ 3 มิติที่เพียงพอที่จะเชื่อ

ทั้งสองเฉดสีนั้นไม่เหมือนกันกับในลิงก์ YouTube ของคุณ อย่างไรก็ตามฉันเชื่อว่าผู้ที่น่าสนใจเหล่านี้สามารถหวังว่าจะให้สถานที่ที่จะเริ่มสร้างเวอร์ชันของคุณเอง

บทช่วยสอน: วิธีทำรูปแบบแถบแบบง่าย

แต่ละจุดบนระนาบมีการประสานงาน ความพยายามในการสร้างเอฟเฟกต์ shader นั้นเป็นการแสดงภาพคณิตศาสตร์ 2D บนเครื่องบิน ที่นี่ฉันขอแนะนำตัวอย่างง่ายๆ

//This shader will visualize coordinates 
vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,uv.y,0,1);

สีแดงจะแสดงพิกัด x และสีเขียวจะแทนพิกัด y สำหรับตอนนี้เราต้องการสร้างเอฟเฟกต์ shader ที่ง่ายที่สุด แถบ เราไม่ต้องการค่า uv.y สำหรับบทช่วยสอนนี้

vec2 uv = gl_FragCoord.xy / iResolution.xy;
gl_FragColor = vec4(uv.x,0,0,1);

คุณจะเห็นว่าเฉดสีแดงนั้นมีความเข้มข้นขึ้นไปทางด้านขวา นั่นเป็นเพราะค่า x ของค่าพิกัดสูงขึ้นเมื่อคุณเลื่อนไปทางด้านขวา พิกัด x ทางซ้ายเริ่มต้นจาก 0 และพิกัด x ทางขวาสุดคือ 1

เนื่องจากเรามีความเข้าใจพื้นฐานนี้ลองทำอะไรที่ "ใช้งานง่าย"

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .5 ) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

ที่นั่นคุณมีรูปแบบแถบ เดี๋ยวก่อน ... มันดูไม่ถูกต้องนัก ใช่นี่เป็นเพียงสีแดงและสีดำ รูปแบบแถบประกอบด้วยมากกว่าสองส่วนสี มี ... !

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float color = 0.0;
if(uv.x < .2 ||(uv.x >.4 && uv.x < .6) || (uv.x > .8 && uv.x <1.0 )) color= 1.0 ;
gl_FragColor = vec4(color,0,0,1);

แต่ถ้าเราต้องการสร้างแถบจำนวน N?

สิ่งที่ฉันพยายามแสดงคือถ้าคุณพยายามเข้าใกล้การเขียนโปรแกรม shader ด้วย "ตรรกะ" การเขียนโปรแกรมแบบดั้งเดิมมากขึ้นแล้วคุณมีแนวโน้มที่จะล้มเหลว เมื่อพูดถึงเรื่อง shader ทุกอย่างเกี่ยวกับคณิตศาสตร์

การพูดของคณิตศาสตร์รูปแบบที่คล้ายกับรูปแบบ "แถบ" มากที่สุดคืออะไร? กล่าวอีกนัยหนึ่งสมการที่มีลักษณะเป็นแถบคืออะไร ใช่. Y = sin (X) อย่างไรก็ตามค่า X ของเราอยู่ในช่วง 0.0 ~ 1.0 ถ้าเราต้องการใช้ Y = sin (X) เราต้องการให้ค่า x ของเราอยู่ในช่วงตั้งแต่ 0.0 ~ 6.28 (ซึ่งประมาณ 2 PI)

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * 2.0 *PI; 
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

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

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0); //ta dan!
float y = sin(x);
gl_FragColor = vec4(y,0,0,1);

คุณอาจพูดว่า shader นี้ไม่ได้สร้างแถบที่สมบูรณ์แบบเหมือนในช่วงต้นของ shader แต่จริงๆแล้วสิ่งที่คุณต้องทำคือเขียนสมการที่เหมาะสมมากขึ้น!

vec2 uv = gl_FragCoord.xy / iResolution.xy;
float x = uv.x * (2.0 *PI * 10.0);
float y = sin(x) / abs(sin(x) );
gl_FragColor = vec4(y,0,0,1);

Weeee ~~~

ถัดไป: วิธีสร้างรูปแบบแถบหยัก