Skip to content
lumbermixalot edited this page Oct 1, 2023 · 35 revisions

TL;DR To Create Your Own RenderJoy Shader

If you installed the RenderJoy Gem in your project, or you want to start creating shaders using the DemoProject then...
In the O3DE Editor, Tools -> RenderJoy Wizard. The wizard dialog should pop up. Type the name of your new shader. Let's say HelloWorld, and click the Run Wizard button. Enjoy!

Welcome to the RenderJoy wiki!

This user guide assumes you have compiled the O3DE Editor, with the RenderJoy gem enabled for a particular game project. Follow the README.md provided at the root of the RenderJoy github repository for details.

RenderJoy is a clone of ShaderToy(https://www.shadertoy.com/) for O3DE.

But, I don't know what's ShaderToy? It's a very convenient sandbox to write multi-pass pixel shaders.

Why?

  1. Shaders in ShaderToy are written in GLSL (The WebGL variant). In O3DE shaders are written in AZSL (A superset of HLSL).
    RenderJoy provides the same conveniences as ShaderToy, but from the comfort of writing the shaders in AZSL.
    This means you can prototype or practice AZSL shader development without having to write C++ code. You can design really complex multi-pass pipelines at runtime, only limited by your imagination.

  2. The main renderer of O3DE is ATOM. ATOM is modular and data-driven, allowing developers to create custom render pipelines with ease.
    RenderJoy is an opportunity to showcase such flexibility.

  3. Starting with RenderJoy 2.0 you can now render as many shader effects as your machine can take. Each shader effect can run indenpendently as billboards floating in the main viewport of O3DE. This is really great to compare and debug (with WinPix or RenderDoc) the performance of several shaders running concurrently. Here is a screenshot of 7 shader effects, each one rendering into its own billboard...

Seven Shaders


Before delving into how to use RenderJoy, take a look at some snapshots of the demos available in the companion RenderJoyDemoProject: Examples Available In RenderJoyDemoProject

Fundamentals

Here is a table of the main components provided by the RenderJoy Gem, and their equivalents in ShaderToy:

RenderJoy Component ShaderToy Equivalent
The RenderJoy Billboard Component ShaderToy Viewport
The RenderJoy Shader Component Image or "Buffer A" or "Buffer B" or "Buffer C" or "Buffer D" tabs
The RenderJoy Texture Component Select Input For iChannelX in Textures tab
The RenderJoy Keyboard Component Select Input For iChannelX in Misc tab (Keyboard)

How To Use RenderJoy

  1. Open the O3DE Editor.
  2. Create a new Level or Open one of the existing sample levels provided with RenderJoyDemoProject.
  3. If creating a new level, You'll need at least one RenderJoy Shader component, connected to a RenderJoy Billboard component.
  4. You'll see a billboard (or several billboards) floating in the O3DE viewport, which displays the texture that is created by a RenderJoy Shader component.

User Guides

Hello World Shader

User Guide: Hello World

Multi-Pass Render Pipeline

User Guide: Multi-Pass Render Pipeline