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-core's Issues

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.

Raw mode, Volumetric mode

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

Scale function

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

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

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

SDF text

add license

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

related to #2

Allow use to set background color

maybe even let them make an env map?

Add more interaction uniforms

Is clicked, last click location, time since last click

ensureDims

type check vector types too, not just floats

set bounding render box size from api

Allow many js api functions to be fully overloaded

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

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

idea from iq - get curvature 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 >>>>

Repetition Op

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

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

Fresnel lighting enabled by default

with function call that sets amount

box(1.0) needs good error message

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

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.

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/

Use "Function" instead of "eval"

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

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

getSpherical in addition to toSpherical for getting SC

"Flip" function, like mirror

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

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

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()

Export to unity

specify bounding sphere for a shape to improve its rendering performance

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);
}

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

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?

Set Position function

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

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.

update noLighting function

4d noise

look at IG comments to locate git repo w the goods

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.

convert mouseIntersection to JS

make occlusion global again

seems a bit messed up right now

export to touchdesigner

getSDF

opposite of applySDF
(should applySDF be renamed setSDF?)

Set stepsize via function in JS API

optional color blending when using "blend"

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.

getSpherical is Broken. console Error: toSpherical is not defined

enable msaa with a function msaa();

Create repo for ultra lightweight render page

elongation?

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

Export to mesher