Update to 1.21.4: "Rendering" (#248)

Co-authored-by: Octol1ttle <l1ttleofficial@outlook.com>

develop/rendering/basic-concepts.md

@@ -135,7 +135,7 @@ The `MatrixStack` class has the following methods:
 
 You can also multiply the top matrix on the stack using quaternions, which we will cover in the next section.
 
-Taking from our example above, we can make our diamond scale up and down by using the `MatrixStack` and the `tickDelta` - which is the time that has passed since the last frame.
+Taking from our example above, we can make our diamond scale up and down by using the `MatrixStack` and the `tickDelta` - which is the "progress" between the last game tick and the next game tick. We'll clarify this later in the [Rendering in the Hud](./hud#tick-delta) page.
 
 ::: warning
 You must first push the matrix stack and then pop it after you're done with it. If you don't, you'll end up with a broken matrix stack, which will cause rendering issues.

develop/rendering/draw-context.md

@@ -65,6 +65,8 @@ There is no one "correct" way to draw textures onto a screen, as the `drawTextur
 
 Generally, it's recommended that you use the overload that specifies the `textureWidth` and `textureHeight` parameters. This is because the `DrawContext` class will assume these values if you don't provide them, which can sometimes be wrong.
 
+You will also need to specify the render layer which your texture is drawn onto. For basic textures, this will usually always be `RenderLayer::getGuiTextured`.
+
 @[code lang=java transcludeWith=:::5](@/reference/latest/src/client/java/com/example/docs/rendering/DrawContextExampleScreen.java)
 
 ![Drawing whole texture example](/assets/develop/rendering/draw-context-whole-texture.png)

develop/rendering/hud.md

@@ -7,24 +7,47 @@ authors:
 
 # Rendering in the Hud {#rendering-in-the-hud}
 
-We already briefly touched on rendering things to the hud in the [Basic Rendering Concepts](./basic-concepts) page and [Using The Drawing Context](./draw-context), so on this page we'll stick to the `HudRenderCallback` event and the `deltaTick` parameter.
+We already briefly touched on rendering things to the hud in the [Basic Rendering Concepts](./basic-concepts) page and [Using The Drawing Context](./draw-context), so on this page we'll stick to the `HudRenderCallback` event and the `tickDelta` parameter.
 
 ## HudRenderCallback {#hudrendercallback}
 
 The `HudRenderCallback` event - provided by Fabric API - is called every frame, and is used to render things to the HUD.
 
-To register to this event, you can simply call `HudRenderCallback.EVENT.register` and pass in a lambda that takes a `DrawContext` and a `float` (deltaTick) as parameters.
+To register to this event, you can simply call `HudRenderCallback.EVENT.register` and pass in a lambda that takes a `DrawContext` and a `RenderTickCounter` instance as parameters.
 
 The draw context can be used to access the various rendering utilities provided by the game, and access the raw matrix stack.
 
 You should check out the [Draw Context](./draw-context) page to learn more about the draw context.
 
-### DeltaTick {#deltatick}
+### Render Tick Counter {#render-tick-counter}
 
-The `deltaTick` refers to the time since the last frame, in seconds. This can be used to make animations and other time-based effects.
+The `RenderTickCounter` class allows you to retrieve the current `tickDelta` value.
 
-For example, let's say you want to lerp a color over time. You can use the `deltaTickManager` to get the deltaTick, and store it over time to lerp the color:
+`tickDelta` is the "progress" between the last game tick and the next game tick.
+
+For example, if we assume a 200 FPS scenario, the game runs a new tick roughly every 10 frames. Each frame, `tickDelta` represents how far we are between the last tick and the next. Over 10 frames, you might see:
+
+| Frame | tickDelta                                    |
+|-------|----------------------------------------------|
+| 1     | `1.0` (new tick)                             |
+| 2     | `0.11 (1÷9)` - The next tick is in 9 frames. |
+| 3     | `0.22 (2÷9)`                                 |
+| 4     | `0.33 (3÷9)`                                 |
+| 5     | `0.44 (4÷9)`                                 |
+| 6     | `0.55 (5÷9)`                                 |
+| 7     | `0.66 (6÷9)`                                 |
+| 8     | `0.77 (7÷9)`                                 |
+| 9     | `0.88 (8÷9)`                                 |
+| 10    | `1.0 (9÷9)` (new tick)                       |
+
+Practically, you should only use `tickDelta` when your animations depend on Minecraft's ticks. For time-based animations, use `Util.getMeasuringTimeMs()`, which measures real-world time.
+
+You can retrieve `tickDelta` using the `renderTickCounter.getTickDelta(false);` function, where the boolean parameter is `ignoreFreeze`, which essentially just allows you to ignore whenever players use the `/tick freeze` command.
+
+In this example, we'll use `Util.getMeasuringTimeMs()` to linearly interpolate the color of a square that is being rendered to the HUD.
 
 @[code lang=java transcludeWith=:::1](@/reference/latest/src/client/java/com/example/docs/rendering/HudRenderingEntrypoint.java)
 
 ![Lerping a color over time](/assets/develop/rendering/hud-rendering-deltatick.webp)
+
+Why don't you try use `tickDelta` and see what happens to the animation when you run the `/tick freeze` command? You should see the animation freeze in place as `tickDelta` becomes constant (assuming you have passed `false` as the parameter to `RenderTickCounter#getTickDelta`)

develop/rendering/particles/creating-particles.md

@@ -13,7 +13,7 @@ Particles are a powerful tool. They can add ambience to a beautiful scene, or ad
 
 We'll be adding a new sparkle particle which will mimic the movement of an end rod particle.
 
-We first need to register a `ParticleType` in your [mod's initializer](./getting-started/project-structure#entrypoints) class using your mod id.
+We first need to register a `ParticleType` in your [mod's initializer](../../getting-started/project-structure#entrypoints) class using your mod id.
 
 @[code lang=java transcludeWith=#particle_register_main](@/reference/latest/src/main/java/com/example/docs/FabricDocsReference.java)
 

reference/latest/src/client/java/com/example/docs/rendering/DrawContextExampleScreen.java

@@ -57,14 +57,14 @@ public void render(DrawContext context, int mouseX, int mouseY, float delta) {
 
 		// :::5
 		Identifier texture = Identifier.of("minecraft", "textures/block/deepslate.png");
-		// texture, x, y, u, v, width, height, textureWidth, textureHeight
+		// renderLayer, texture, x, y, u, v, width, height, textureWidth, textureHeight
 		context.drawTexture(RenderLayer::getGuiTextured, texture, 90, 90, 0, 0, 16, 16, 16, 16);
 		// :::5
 
 		// :::6
 		Identifier texture2 = Identifier.of("fabric-docs-reference", "textures/gui/test-uv-drawing.png");
 		int u = 10, v = 13, regionWidth = 14, regionHeight = 14;
-		// texture, x, y, width, height, u, v, regionWidth, regionHeight, textureWidth, textureHeight
+		// renderLayer, texture, x, y, width, height, u, v, regionWidth, regionHeight, textureWidth, textureHeight
 		context.drawTexture(RenderLayer::getGuiTextured, texture2, 90, 190, 14, 14, u, v, regionWidth, regionHeight, 256, 256);
 		// :::6
 

reference/latest/src/client/java/com/example/docs/rendering/HudRenderingEntrypoint.java

@@ -1,25 +1,25 @@
 package com.example.docs.rendering;
 
+import net.minecraft.util.Util;
 import net.minecraft.util.math.ColorHelper;
 import net.minecraft.util.math.MathHelper;
 
 import net.fabricmc.api.ClientModInitializer;
 import net.fabricmc.fabric.api.client.rendering.v1.HudRenderCallback;
 
 public class HudRenderingEntrypoint implements ClientModInitializer {
-	private float totalTickDelta = 0.0F;
 	@Override
 	public void onInitializeClient() {
 		// :::1
-		HudRenderCallback.EVENT.register((context, tickDeltaManager) -> {
+		HudRenderCallback.EVENT.register((context, renderTickCounter) -> {
 			int color = 0xFFFF0000; // Red
 			int targetColor = 0xFF00FF00; // Green
 
-			// Total tick delta is stored in a field, so we can use it later.
-			totalTickDelta += tickDeltaManager.getTickDelta(true);
+			// You can use the Util.getMeasuringTimeMs(); function to get the current time in seconds.
+			double currentTime = Util.getMeasuringTimeMs();
 
 			// "lerp" simply means "linear interpolation", which is a fancy way of saying "blend".
-			float lerpedAmount = MathHelper.abs(MathHelper.sin(totalTickDelta / 50F));
+			float lerpedAmount = MathHelper.abs(MathHelper.sin((float) (currentTime / 50.0f)));
 			int lerpedColor = ColorHelper.lerp(lerpedAmount, color, targetColor);
 
 			// Draw a square with the lerped color.

reference/latest/src/client/java/com/example/docs/rendering/RenderingConceptsEntrypoint.java

@@ -72,7 +72,8 @@ public void onInitializeClient() {
 			buffer.vertex(transformationMatrix, 35, 40, 5).color(0xFF000000);
 			buffer.vertex(transformationMatrix, 20, 60, 5).color(0xFF414141);
 
-			// We'll get to this bit in the next section.
+			// Make sure the correct shader for your chosen vertex format is set!
+			// You can find all the shaders in the ShaderProgramKeys class.
 			RenderSystem.setShader(ShaderProgramKeys.POSITION_COLOR);
 			RenderSystem.setShaderColor(1.0F, 1.0F, 1.0F, 1.0F);