Shader Park

A JavaScript library for creating real-time 2D and 3D shaders.
GitHub
762
Created 6 years ago, last commit 7 months ago
10 contributors
336 commits
Stars added on GitHub, month by month
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
+0.1
/day
Last 12 months
+0.2
/day
npmPackage on NPM
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
README

Shader Park HeroF Crop2

Build Status NPM version NPM downloads

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

  • Animated
  • Interactive
  • 2D or 3D

Alt Text

Join the community on Discord 💬

Easily integrated with:

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

Alt Text

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.