Tech-update

Below is a structured summary and a "cheat sheet" of the key concepts taught in the tutorial, organized by technical category.

---

1. Texture Sampling & UVs

• UV Coordinates: Represented as percentages (0.0 to 1.0). (0,0) is top-left, (1,1) is bottom-right.
• Filtering:
• Nearest: Picks the closest texel (pixelated/retro look).
• Linear: Blends surrounding texels (smooth look).
• Repeat Modes: Controls what happens when UVs go outside the 0-1 range.
• Disabled: Clamps to the edge (creates streaks).
• Enabled: Tiles the texture infinitely.
• Mirror: Tiles the texture but flips every other tile.
• Sampling Code: texture(TEXTURE, UV).r (samples the red channel of the texture at the current UV position).

2. Deforming Shapes (The Portal Logic)

The portal is created using a Distance Field approach:

1. Distance Calculation: Calculate how far a pixel is from the center: distance(UV, vec2(0.5, 0.5)).
2. Deformation: Add values to this distance to "push" or "pull" the edge:

• Oscillation: sin(TIME) * strength (creates a breathing effect).
• Noise: texture(TEXTURE, UV).r * strength (creates jagged, natural edges).

1. Masking: Use smoothstep() to create hard or soft edges based on a radius threshold.
2. Layering: Creating a "rim" by subtracting a smaller inner mask from a larger outer mask (maskrim = maskouter - mask_inner).

3. Animation Techniques

• Panning: Moving a texture over time by adding TIME to the UV coordinates:

vec2 sample_uv = UV + TIME direction speed;

• Seamlessness: Enabling TextureSeamless in the NoiseTexture2D properties removes the visible seam where the texture wraps.

4. GDScript & Shader Interaction

• Standard Uniforms: Use material.setshaderparameter("name", value). These affect all objects sharing that material.
• Instance Uniforms: Declared as instance uniform float name. These allow each individual object to have unique values without duplicating the material resource.
• Code: node.setinstanceshader_parameter("name", value).
• Tweens: For smooth transitions (e.g., opening the portal).
• Path: To animate a shader parameter via a Tween, use the property path: "shader_parameter/radius".
• Parallelism: Use .set_parallel() to animate multiple parameters (radius, color, strength) simultaneously.

5. Advanced Coloring (Gradients)

• The mix() Function: Blends two values based on a weight (0.0 to 1.0).

vec3 color = mix(colora, colorb, weight);

• Creating Radial Gradients:

1. Use smoothstep() to map the distance from the center to a 0-1 range.
2. Use that result as the weight for mix().
3. Apply this to the masks to ensure the gradient only appears inside the portal.

---

Final "Pro-Tip" Summary