Creating Raw RGB Textures

The Raw Texture feature is incredibly simple, but unbelievably powerful! It lets you create a texture from raw data. This is perfect for creating procedural textures on the fly. Let's take a look at how to create a simple RGB texture from scratch.

Creating a Raw RGB Texture can be done using the following construction method:

import { RawTexture } from "@babylonjs/core/Materials/Textures/rawTexture";
new RawTexture.CreateRGBTexture(data, width, height, scene);

The parameters are:

• data: This is the raw data that you'll use for the RGB values of each pixel of your texture. The data needs to be an 8-bit array, specifically a javascript Uint8Array.

• width: The desired width of the texture you'd like to create.

• height: The desired height of the texture you'd like to create.

• scene: Your Babylon scene.

Here's a small demo showing it in action. Check out line 29 in this playground: Raw Texture Noise Terrain Example

In this case, random noise is generated, converted into a Uint8Array, and then used to create a Raw RGB Texture.

Here is a video explanation that dives a little further into how this demo uses the raw texture.

Diving Deeper

Of course, creating an RGB texture on the fly is only the tip of the iceberg. There's a lot more you can do with Raw Texture, such as creating RGBA, Luminance, Alpha, and Luminance Alpha textures.

For more detail, be sure to check out the full API documentation on Raw Texture here.