Hello!

Continuing from the previous post, today I’d like to share how we send and receive data between our application and shaders using various GPU resources.

Shaders aren’t just about rendering — they rely heavily on external data to function properly. Understanding how to efficiently provide that data is key to both flexibility and performance.

Here are the main types of shader resources used to pass data to shaders:

📦 Common Shader Resources

1. Vertex Buffer
   Stores vertex data (e.g., positions, normals, UVs) that are read by the vertex shader.

2. Index Buffer
   Stores indices that reference vertices in the vertex buffer. Useful for reusing shared vertices — for example, when representing a square using two triangles.

3. Uniform Buffer
   Holds read-only constant data shared across shaders, such as transformation matrices, lighting information, etc.

4. Push Constants
   Used to send very small pieces of data to shaders extremely quickly. Great for things like per-frame or per-draw parameters.

5. Storage Buffer
   Stores large volumes of data and is unique in that shaders can read from and write to them. Very useful for compute shaders or advanced rendering features.

🧪 Example Implementations

I’ve created examples that utilize these shader resources to render simple scenes using different graphics APIs and platforms:

• Vulkan:
  🔗 Example Code (Vulkan)

• WGPU (Rust):
  🔗 Example Code (WGPU)

• WebGPU (JavaScript):
  🔗 Example Code (WebGPU)

• WebGL (JavaScript):
  🔗 Example Code (WebGL)

If you'd like to see them in action in your browser, you can check out the live demos here:

• WGPU (compiled to WebAssembly):
  ▶ View Demo

• WebGL version:
  ▶ View Demo

These demos show a rotating square rendered using uniform buffers.

⚠ Platform-Specific Notes

When working across platforms, it’s important to note the following limitations:

• WebGPU and WebGL do not support Push Constants.

• WebGL also does not support Storage Buffers, which can limit more advanced effects.

Always consider these differences when designing your rendering pipeline for portability.

That wraps up this post!
Working with shader resources can be tricky at first, but mastering them gives you powerful tools for efficient and flexible rendering.

Thanks for reading — and happy coding! 🎮🛠