Shadeup Compiler Tools

Installation

npm install -g @shadeup/cli

Usage

shadeup --help

CLI tool for compiling shadeup files

Options:
  -V, --version           output the version number
  -v
  -h, --help              display help for command

Commands:
  build [options] <file>  Build file
  watch <file>            Watch a shadeup file and recompile on change
  preview <file>          Live preview of a shadeup file in electron

Example

1.

Setup a vanilla js vite project

npm create vite@latest
# Choose vanilla js
cd my-vite-project
npm install

2.

Create a example.shadeup file with the following content in the src directory:

// example.shadeup

fn main() {
  draw(shader {
    out.color = (in.uv, 0.5, 1.0);
  });
}

3.

Compile the shader using the following command:

$ shadeup build example.shadeup

After running the above command, you should find the following files in the same directory as main.shadeup:

• example.js
• example.d.ts

You can use the above files inside of a vite or webpack project to use the shader in your web application.

4.

Install the shadeup package into your project.

$ npm i shadeup

5.

Insert the following code into your index.html inside the <div id="app"></div> tag:

<!-- index.html -->

<!-- Wrap with ui container to enable ui -->
<div class="ui-container"> 
  <canvas id="canvas" style="width: 100%; height: 100%"></canvas>
</div>

6.

Insert the following code into your main.ts file:

// main.ts

import { makeShadeupInstance } from "./example";

const canvas = document.querySelector<HTMLCanvasElement>("#canvas")!;

(async () => {
  const engine = await makeShadeupInstance(canvas, {
    ui: true
  });

  // The frame loop will start automatically

  // You can call pub functions on the engine instance
  // engine.example.main.exampleFunction();
})();

7.

Run the vite project:

$ npm run dev

Navigate to http://localhost:5173 in your browser to see the shader in action.

Watch mode

$ shadeup watch main.shadeup

This will watch the file for changes and recompile the shader on change.

Communicating with the shadeup code

You can expose functions using the pub keyword in shadeup code. These functions can be called from the outside.

You can pass anything including callbacks, textures, buffers and more.

// example.shadeup

pub fn iCanBeCalledFromOutside(message: string) {
  print(message);
}

// main.ts
import { makeShadeupInstance } from "./example";

const canvas = document.querySelector<HTMLCanvasElement>("#canvas")!;

(async () => {
  const engine = await makeShadeupInstance(canvas);

  // Call the function
  engine.files.example.iCanBeCalledFromOutside("Hello from the outside!");
})();

Preview mode

$ shadeup preview main.shadeup

This will open an electron window with the shader preview. You can use this to quickly test your shader without having to set up a web project.

Stackblitz

You can also use shadeup in stackblitz.

Open in Stackblitz