A library for writing raymarching code in JavaScript.

Install

npm i marcher.js

Usage

import * as marcher from "marcher.js";

// create Marcher object
const mar = new marcher.Marcher({
  antialias: false,
});

// create SDF material
const mat = new marcher.SDFMaterial();
// add a black color material
mat.addColorMaterial("1.0", 0, 0, 0);
// use SDF material
mar.setMaterial(mat);

// create SDF map function
const map = new marcher.SDFMapFunction();

// create a layer
const layer = new marcher.SDFLayer();

// create a box SDF
const box = new marcher.BoxSDF({
  sdfVarName: "d1",
});
// add box SDF to the layer
layer.addPrimitive(box);
// make round corners for box SDF
box.round(0.1);

// add layer to the map function
map.addLayer(layer);

// use the map function
mar.setMapFunction(map);

// then you get the whole raymarching fragment shader
// just paste it into the shadertoy and see the magic
// https://www.shadertoy.com/new
console.log(mar.fragmentShader);

Features

• Write raymarching code in JavaScript (fully customizable)
• Zero dependency
• Fully typed
• Shadertoy support

Essentials

Basic

Demo: https://codesandbox.io/s/basic-uxqbgh?file=/src/app.ts

Primitive

Demo: https://codesandbox.io/s/primitive-zcuy2q?file=/src/app.ts

Boolean

Demo: https://codesandbox.io/s/boolean-13qfo4?file=/src/app.ts

Polygon

Demo: https://codesandbox.io/s/polygon-6ipxc1?file=/src/app.ts

Triangle

Demo: https://codesandbox.io/s/triangle-qrrbpe?file=/src/app.ts

Bezier

Demo: https://codesandbox.io/s/bezier-syd12e?file=/src/app.ts

Uberprim

Demo: https://codesandbox.io/s/uberprim-wtj8y0?file=/src/app.ts

MagicaCSG

Demo: https://codesandbox.io/s/magicacsg-g8ls17?file=/src/app.ts

Gyroid

Demo: https://codesandbox.io/s/gyroid-i36q79?file=/src/app.ts

Examples

CSG

Demo: https://codesandbox.io/s/csg-kmuzzi?file=/src/app.ts

Poke Ball

Demo: https://codesandbox.io/s/poke-ball-j7bwy7?file=/src/app.ts

API

Just TypeScript and you get it :)

Author

👤 alphardex

• Website: https://alphardex.netlify.app
• Twitter: @alphardex007
• Github: @alphardex

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator