Lập trình đồ họa sao chép quá trình chuyển đổi từ Chrono Trigger bên trong cổng

Tôi bắt đầu chơi trò chơi này lần đầu tiên gần đây và điều này thực sự đạt đến đỉnh điểm sự quan tâm của tôi

Bạn có thể thấy quá trình chuyển đổi bắt đầu từ ~ 12: 08

Dường như có một số toán học thú vị đang diễn ra ở đó. Nó sẽ xuất hiện rằng có hai quan điểm khác nhau kết hợp với nhau. Các gợn sóng màu xanh được hiển thị đầu tiên trong nền và sau đó các sóng dao động màu tím dường như được hiển thị trên một loại hình chiếu 3D giả.

Làm thế nào chính xác họ đã đi đến kết quả này tuy nhiên vượt ra ngoài tôi và sự tò mò đã giúp tôi trở nên tốt hơn.

Tôi không mong đợi nhiều người sẽ biết điều này được thực hiện đặc biệt như thế nào nhưng nếu bất cứ ai đã thực hiện một số chương trình đồ họa mở rộng, có lẽ họ có thể khai sáng cho tôi.

Tôi đã cố gắng nhân đôi hiệu ứng bằng cách sử dụng shader.

Trung tâm Shader00: https://www.shadertoy.com/view/XsXSz2

Bên Shader01: https://www.shadertoy.com/view/4sXSz2

:) bạn có thể, như Byte56 đã nói, thiết lập ba mặt phẳng. Một máy bay quay mặt về phía trước trực tiếp với Shader00, và sau đó là hai mặt phẳng với Shader01, có lẽ như RandyGaul đã đề cập, trên / dưới không có tỷ lệ đồng đều để tạo ảo giác về chiều sâu.

Họ nên, tôi tin rằng, đưa ra cái nhìn 3D đầy đủ để có sức thuyết phục.

Cả hai shader đều không hoàn toàn giống như trong liên kết youtube của bạn (ngoài ra chúng còn là bản nháp thô). Tuy nhiên, tôi tin rằng những shader này có thể, hy vọng, cung cấp cho bạn một nơi để bắt đầu xây dựng phiên bản của riêng bạn.

Hướng dẫn: Cách làm họa tiết sọc đơn giản.

Mỗi điểm trong mặt phẳng có tọa độ. Cố gắng tạo hiệu ứng đổ bóng về cơ bản là trực quan hóa toán học 2D lên mặt phẳng. Ở đây để tôi giới thiệu một ví dụ đơn giản.

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

Màu đỏ sẽ đại diện cho tọa độ x và màu xanh lục sẽ đại diện cho tọa độ y. Hiện tại, chúng tôi muốn tạo hiệu ứng đổ bóng đơn giản nhất; một sọc. Chúng tôi sẽ không cần giá trị uv.y cho hướng dẫn này.

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

Bạn có thể thấy rằng màu đỏ trở nên mãnh liệt khi nó hướng về phía bên phải. Đó là bởi vì giá trị x của tọa độ sẽ cao hơn khi bạn di chuyển sang phía bên phải; tọa độ x bên trái bắt đầu từ 0 và tọa độ x bên phải là 1.

Vì chúng ta có hiểu biết cơ bản này, hãy thử một cái gì đó "trực quan"

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);

Ở đó bạn có một mô hình sọc. Đợi ... điều đó không đúng lắm. Vâng, đây chỉ là màu đỏ và đen. Mẫu sọc bao gồm nhiều hơn chỉ hai phần màu. Đó ...

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);

Nhưng nếu chúng ta muốn tạo N số sọc thì sao?

Những gì tôi đang cố gắng hiển thị là nếu bạn cố gắng tiếp cận lập trình shader với nhiều "logic" lập trình truyền thống hơn thì có khả năng bạn sẽ thất bại. Khi nói đến shader, tất cả là về toán học.

Nói về toán học, mô hình nào giống với mô hình "sọc" nhất? Nói cách khác, phương trình trông giống như sọc là gì? Đúng. Y = sin (X). Tuy nhiên, giá trị X của chúng tôi nằm trong khoảng từ 0,0 ~ 1,0 Nếu chúng tôi muốn sử dụng Y = sin (X), chúng tôi muốn giá trị x của chúng tôi nằm trong khoảng từ 0,0 ~ 6,28 (gần bằng 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);

Bây giờ chúng ta có "sọc" về mặt mẫu được tạo bởi một phương trình. Tại sao chúng ta nên thực hiện phương pháp này? Điều này không chỉ có thể nhanh hơn mà còn giúp loại bỏ nhu cầu viết các điều kiện "nếu" xấu xí để có N số sọc. Nếu chúng ta muốn có nhiều hơn một sọc, chúng ta có thể mở rộng mẫu bằng cách tăng giá trị X tối đa hơn nữa.

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);

Bạn có thể nói rằng trình đổ bóng này không tạo ra dải hoàn hảo như từ trình tạo bóng sớm, nhưng thực sự, tất cả những gì bạn cần làm là viết phương trình phù hợp hơn!

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);

Cuối tuần ~~~

Tiếp theo: Cách tạo hoa văn sọc lượn sóng.