A library for writing raymarching code in JavaScript.
npm i marcher.jsimport * 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);- Write raymarching code in JavaScript (fully customizable)
- Fully typed
- Shadertoy support
Demo: https://codesandbox.io/s/basic-uxqbgh?file=/src/app.ts
Demo: https://codesandbox.io/s/primitive-zcuy2q?file=/src/app.ts
Demo: https://codesandbox.io/s/boolean-13qfo4?file=/src/app.ts
Demo: https://codesandbox.io/s/polygon-6ipxc1?file=/src/app.ts
Demo: https://codesandbox.io/s/triangle-qrrbpe?file=/src/app.ts
Demo: https://codesandbox.io/s/bezier-syd12e?file=/src/app.ts
Demo: https://codesandbox.io/s/uberprim-wtj8y0?file=/src/app.ts
Demo: https://codesandbox.io/s/magicacsg-g8ls17?file=/src/app.ts
Demo: https://codesandbox.io/s/gyroid-i36q79?file=/src/app.ts
Demo: https://codesandbox.io/s/csg-kmuzzi?file=/src/app.ts
Demo: https://codesandbox.io/s/poke-ball-j7bwy7?file=/src/app.ts
Just TypeScript and you get it :)
👤 alphardex
- Website: https://alphardex.netlify.app
- Twitter: @alphardex007
- Github: @alphardex
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator