shader-park / shader-park-core

A JavaScript library for creating real-time 2D and 3D shaders. JS -> Shader. https://shaderpark.com/ https://twitter.com/shaderpark

Shader Park simplifies creating procedural graphics using javascript.
With just a few lines of code, create shaders which are:

• Animated
• Interactive
• 2D or 3D

Try the live editor ✍️

Browse the Interactive Documentation 📖

Build from working Template/Example Projects 🛠️

Join the community on Discord 💬

Easily integrated with:

• webpages
• threejs
• touchdesigner
• unity (under development)

Explore hundreds of examples

Install

npm install shader-park-core

Usage

See examples on glitch

CLI usage:

npm run toThreeJS my-sculpture.js
npm run toOffline my-sculpture.js
npm run toRawSDF4Meshing my-sculpture.js

For development with SP website:

In shader-park-core repo run npm link or yarn link

In shader-park-website repo run npm link shader-park-core or yarn link shader-park-core

API usage:

The simple cli tools in the converters directory are simple examples of how the API can be used. (TODO, put more examples in readme, and examples folder) For now, explore the available functions in index.js, and see their implementations in the targets directory.

To add new targets:

1. Implement a class in targets that converts sculpt to the format your target requires (see existing targets for example of available tools for this)
2. Expose the functions externally in index.js
3. Implement a basic cli converter, (for now this means just copy-pasting an existing converter and swapping out the single converter function. The boilerplate could be factored out and the cli converters could be automatically generated) and use as a cli tool, or use API directly.

shader-park-core's Issues

Expose error line # and error message in js compiler to inject into the editor

support lighting bounces (reflection)

the glowy edges only look good when theres a single object. having the rays bounce once or twice could make this look a lot better when theres multiple objects

getSpherical in addition to toSpherical for getting SC

Proposal to make SP work like a regular JS library

Remove need to use eval in base library, and use and special magic to have functions in scope.
No scope collisions or magic, external data can easily be brought in a predictable way. Multiple shapes could coexist without their namespaces/scopes interfering

API proposal:

//////////// SP library ////////////

// Returns library functions in a dictionary rather than using eval to dump them into global scope
function createShape() {  
  return {
    baseShape: {
      bindToCanvas: (canvas) => console.log('attaching to canvas...'), 
      getGLSL: () => console.log('vec3 p ... '), 
      draw: () => console.log('rendering ...')
    },
    sphere: (rad) => console.log(`drawing sphere radius ${rad}`),
    box: () => console.log('drawing box'),
    mix: () => console.log('setting mode mix')
  }
}




///////////// USER CODE ////////////////

import { createShape } from shaderpark
import externalObject from './otherfile.js'


// Equivalent to importing functions that are bound to a particular object,
// could have multiple shapes in the same file which don't interfere with each other
const {baseShape, sphere, mix} = createShape()

// Can use any javascript variable like you'd expect!
sphere(externalObject.raduis) 

baseShape.bindToCanvas('dummmy canvas')
baseShape.draw()
// object-oriented approach binds all functions to their data so you can do things like just ask a shape for its glsl)
const glslSource = baseShape.getGLSL()

add license

box(1.0) needs good error message

box(1.0) throws an actual error and doesn't give a proper error message

getSpace returns the current instance of the space. It should return a copy

right now you can do this:

let s = getSpace();
s.x = sin(s.x);
torus(0.4, 0.2);

This modifies the space, but you shouldn't be able to unless you use setSpace, or displace.

Rotation: function for rotating a vector. also rotate around an axis by an angle

Allow use to set background color

maybe even let them make an env map?

"Flip" function, like mirror

flipX, flipY, flipZ
like mirror, but does copy
implementation: p = -p

optional color blending when using "blend"

set bounding render box size from api

Use "Function" instead of "eval"

getSpherical Broken

getSpherical() isn't showing up as an available function
^this is one of the last functions we need to document in the docs.

getSpherical broken

getSpherical() isn't showing up as an available function
^this is one of the last functions we need to document in the docs.

Create repo for ultra lightweight render page

Repetition Op

Using this method - https://www.shadertoy.com/view/3syGzz

Also investigate if radial can also be done in a reasonably general way

getSDF

opposite of applySDF
(should applySDF be renamed setSDF?)

Add ISF Format Export

Replace all uniforms with the ISF standard, so our SDFs can be dropped into other platforms like VDMX and Max MSP and have sliders / UI auto-generated.

https://www.interactiveshaderformat.com/

Geo combine and color blend modes can accept user provided combination/blend function

related to #2

easily expose external JS variables with JS API (using uniforms)

create a uniform with something like
let myinput = input(someJSVariable);

Allow GPU variables to influence control flow in JS API (if statements, for loops)

Proposed approach for handling GLSL Builtin Other

Note: keeping the value of 'mix' as an array allows us to have specific constraints that return a specific dim.
Alternatively, we could write out all the logic and return types with cases, but for readability, this approach could be helpful.

let arg = {
    'mix' : [(a, b, c) => (a.dim === b.dim && (c.dim === 1 || c.dim === a.dim))? a.dim: -1],
};

The goal is to generate this:

function mix(arg_0, arg_1, arg_2) {
    ensureSameDims('mix', arg_0, arg_1);
    if (arg_2.dim !== 1 && arg_2.dim !== arg_0.dim) {
        compileError(`'mix' third argument must be float or match dim of first args`);
    }
    ensureScalar('mix', arg_2);
    arg_0 = tryMakeNum('arg_0');
    arg_1 = tryMakeNum('arg_1');
    arg_2 = tryMakeNum('arg_2');
    return new makeVarWithDims('mix(arg_0, arg_1, arg_2);', arg_0.dim);
}

Fresnel lighting enabled by default

with function call that sets amount

export to touchdesigner

make occlusion global again

seems a bit messed up right now

Export to unity

enable msaa with a function msaa();

SDF text

4d noise

look at IG comments to locate git repo w the goods

Async Shader compile for Simple Render

We should test out this approach for the minimal renderer to see if we can increase load time.
https://github.com/toji/shader-perf/blob/gh-pages/async-program.js

Create detailed documentation in the readme for creating an export, so other people can contribute

If we document exactly how we export the shader code and make a detailed example this can help other people build out their own.

Allow many js api functions to be fully overloaded

ie pow, length, ect all can do vec3 types and individual components

convert mouseIntersection to JS

Set Position function

Like displace, but instead of adding to p, replace it

Compiler Rewrites

1. change the binary ops and built-in functions we have to just return the glsl strings rather than appending it to the total source.
2. make a function in regular js called "createVar(name, value)" or "assignVar(name, value)" which actually creates the line assigning a variable.
3. using esprima to convert regular assignment statements (ones using any type of = symbol) to the function created in step two.
4. make tweaks to the branch rewriting we already implemented and any other features we need to update so that they play nice with this new setup.

Should enable2D return a vec3, or vec2?

the current setup lends itself to 3D because all the helper functions use vec3s. we have no 2d support and it'd be a big push to push to enable 2d helpers.

idea from iq - get curvature function

Export to mesher

ensureDims

type check vector types too, not just floats

Scale function

Can only scale all axes.
Extra variable for scale, if it has been set multiply final dist

update noLighting function

Review operators branch, evaluate viability of new approach

9-17-20 meeting notes

A long term goal is for the JS api is the ability to write a full raymarching shader from javascript with good performance.
A rewritten version of the glsl generating code is currently in progress in the "operators" branch, which is able to generate much more readable glsl code with variable names that match the original javascript. However this approach still has some challenges.

Unrolled loops:

In the new version, new variables defined in a loop will cause errors because when the loop is unrolled variables can be redefined causing name collisions. In both the new and old version, it is not possible to break out of a loop early because of unrolling. this makes a raymarching loop inefficient. the only way to break out of a for loop properly is to generate an actual glsl for loop. converting javascript for-loops to glsl will have its own challenges (what if its a loop iterating over a js array or map? can all cases of for loops be easily copied to glsl, like unconventional setting of loop bounds and conditions?). This may limit the use of some js features, but would make more readable, shorter glsl code, and could enable writing a basic raymarcher in js.

Functions:

If variables are declared inside a function (or inside a for loop), these variables will collide with variables of the same name in a different scope. One possible solution to this is to automatically wrap all function calls so that special scope prefixes are added to variables when executing inside a function or loop. It also could be possible to take the approach of generating actual glsl functions for JS ones (which would again make the glsl more readable), but in this case I think it would be too limiting for what someone might want to do with javascript functions. So probably better to continue inlining functions while adding a scope prefix.

<<<< don't worry, the world is almost over >>>>

Add more interaction uniforms

Is clicked, last click location, time since last click

Raw mode, Volumetric mode

could be created from .../new/advanced or .../new/volumetric

elongation?

https://www.shadertoy.com/view/Ml3fWj

Allow users to build ultra lightweight shaders

this would be something invoked at their build time, precompiling js->glsl and only including minimal webgl code. This will mean no library is pulled in at runtime, no source conversion simply compiling webgl shaders to a canvas.
Could also have targets for react/vue components?

getSpherical is Broken. console Error: toSpherical is not defined

Set stepsize via function in JS API

specify bounding sphere for a shape to improve its rendering performance