Update using a viewport as a texture tutorial for 4.2

[skyace65]

Does what the title says. I've gone through and updated everything for 4.2. I've also made several other changes

• I've added scene creation to the beginning of the tutorial. Before it seemed to guide you through creating some of it while assuming other stuff had already been created
• Removed the sentence saying to turn back on shading for the planet. There's no shader code to go with it and the tutorial doesn't mention turning shading off for that mesh earlier in the page
• Removed instructions to set "roughness" to one since that's its default value
• Added instructions to turn on "local to scene" for the material resource, tutorial doesn't work without it
• Tried to clarify creating things in a few steps

All images have gone through squoosh webp compression.

@clayjohn I'd like you to review the images I got for this tutorial. Default lighting changed so I expected some differences, but I'm not sure if the ocean effect is what was originally intended, it looks less reflective. This is the shader code I had at the end:

shader_type canvas_item;

render_mode blend_premul_alpha;

vec3 hash(vec3 p) {
    p = vec3(dot(p, vec3(127.1, 311.7, 74.7)),
             dot(p, vec3(269.5, 183.3, 246.1)),
             dot(p, vec3(113.5, 271.9, 124.6)));

    return -1.0 + 2.0 * fract(sin(p) * 43758.5453123);
}

float noise(vec3 p) {
  vec3 i = floor(p);
  vec3 f = fract(p);
  vec3 u = f * f * (3.0 - 2.0 * f);

  return mix(mix(mix(dot(hash(i + vec3(0.0, 0.0, 0.0)), f - vec3(0.0, 0.0, 0.0)),
                     dot(hash(i + vec3(1.0, 0.0, 0.0)), f - vec3(1.0, 0.0, 0.0)), u.x),
                 mix(dot(hash(i + vec3(0.0, 1.0, 0.0)), f - vec3(0.0, 1.0, 0.0)),
                     dot(hash(i + vec3(1.0, 1.0, 0.0)), f - vec3(1.0, 1.0, 0.0)), u.x), u.y),
             mix(mix(dot(hash(i + vec3(0.0, 0.0, 1.0)), f - vec3(0.0, 0.0, 1.0)),
                     dot(hash(i + vec3(1.0, 0.0, 1.0)), f - vec3(1.0, 0.0, 1.0)), u.x),
                 mix(dot(hash(i + vec3(0.0, 1.0, 1.0)), f - vec3(0.0, 1.0, 1.0)),
                     dot(hash(i + vec3(1.0, 1.0, 1.0)), f - vec3(1.0, 1.0, 1.0)), u.x), u.y), u.z );
}

void fragment() {
	float theta = UV.y * 3.14159;
	float phi = UV.x * 3.14159 * 2.0;
	vec3 unit = vec3(0.0, 0.0, 0.0);

	unit.x = sin(phi) * sin(theta);
	unit.y = cos(theta) * -1.0;
	unit.z = cos(phi) * sin(theta);
	unit = normalize(unit);
	float n = noise(unit * 5.0) * 0.5;
	n += noise(unit * 10.0) * 0.25;
	n += noise(unit * 20.0) * 0.125;
	n += noise(unit * 40.0) * 0.0625;
	COLOR.xyz = mix(vec3(0.05, 0.3, 0.5), vec3(0.9, 0.4, 0.1), smoothstep(-0.1, 0.0, n));
	COLOR.a = 0.3 + 0.7 * smoothstep(-0.1, 0.0, n);
}

• Closes Tutorial using wrong class: "Using a Viewport as a texture" --> "Using a SubViewport as a texture" #9312
• Closes "Using a Viewport as a texture" guide out of date for version 4.1.1 #8035
• Closes "Viewport" is used instead of "Subviewport" #6945

[mhilbrunner]

cc @clayjohn

@clayjohn I'd like you to review the images I got for this tutorial. Default lighting changed so I expected some differences, but I'm not sure if the ocean effect is what was originally intended, it looks less reflective. This is the shader code I had at the end: ...

[clayjohn]

I've followed along with the tutorial as well and indeed the screenshots you have at the end look a bit wrong.

The shader code is fine. But it looks like you missed two things:

1. the SubViewport needs to set the "transparent_bg" property to true
2. the StandardMaterial needs to use the alpha value of the texture for roughness

Doing those two things makes it look like (I also dialed down the red channel as it looks way too orange in Godot 4):

[skyace65]

@clayjohn I was already using alpha for roughness but I did miss the transparent_bg property. I've updated the images in this PR now that I've fixed that. Do you want me to add dialing down the red channel to this tutorial?

[clayjohn]

Do you want me to add dialing down the red channel to this tutorial?

I dont think that's necessary. It does feel pretty orange, but it's not worth going back and changing all the screenshots