How to understand the matrix part of this gdshader

toddhuang98 · April 15, 2024, 3:16pm

###4.2.1

QuestionRecently I watched a video of how to make effects like in game balatro. https://www.youtube.com/watch?v=Alwy-TH0WzE

The effect is pseudo3D. When cursor moving around the card, it will rotate accordingly

About he gdshader the code down below

MrEliptik/godot_ui_components/blob/main/scenes/shared/shaders/fake_3D.gdshader

shader_type canvas_item;

uniform vec2 rect_size;

// Camera FOV
uniform float fov : hint_range(1, 179) = 90;
uniform bool cull_back = true;
uniform float y_rot : hint_range(-360.0, 360.0) = 0.0;
uniform float x_rot : hint_range(-360.0, 360.0) = 0.0;
// At 0, the image retains its size when unrotated.
// At 1, the image is resized so that it can do a full
// rotation without clipping inside its rect.
uniform float inset : hint_range(0, 1) = 0.0;
// Consider changing this to a uniform and changing it from code

varying flat vec2 o;
varying vec3 p;

// Creates rotation matrix
void vertex(){

This file has been truncated. show original

I am making a video to introduce the code line by line. However I don’t know the meaning of matrix part in it. Can someone interpret how it works? Why we need a matrix to process the card image?

I will be appreciate! Thank you!

tayacan · April 15, 2024, 3:58pm

I’m no matrix math expert, but it looks like a rotation matrix for 3D vectors - basically, you can rotate a vector by multiplying it with a matrix. You can see that most numbers in the matrix are defined as either the sine or cosine of one of the angles he wants to rotate by.

You can search for “rotation matrix” to find explanations and examples and such. It’ll probably help if you understand polar coordinates too.

toddhuang98 · April 15, 2024, 4:04pm

It’s abs the key word I need, thank you.
I am searching for related information