Cover image for Welcome to ShaderPark

Posted on

Welcome to ShaderPark

A JavaScript library for creating interactive procedural 2D and 3D shaders.


Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language.

shaderpark - code editor online

About ShaderPark

Shader Park is an open source web-based platform and community for creating real-time 3D graphics and animations using code. It integrates diverse computer graphics techniques into a unified programming interface designed for fast experimentation and live-coding.

Inspired by tools and communities like P5.js, Processing, Three.js, and Shader Toy, Torin Blankensmith and Peter Whidden developed Shader Park with the intention of making emerging technology in computer graphics accessible and inclusive for artists, designers, and educators.

To get started, please check these tutorials;

ShaderPark Tutorial 1

ShaderPark Tutorial 2

This tutorial will cover coordinate space modifiers, noise and reusable custom geometry.

For additional information, github and documentation, follow these links below.

ShaderPark Website: https://shaderpark.com/
ShaderPark Github: https://github.com/shader-park/
ShaderPark Documentation: https://docs.shaderpark.com/references-js/

Bonus Content - ShaderPark + TouchDesigner

You may also want to check out ways to add ShaderPark code to TouchDesigner via this repo:

GitHub logo shader-park / shader-park-touchdesigner

Render Shader Park sculptures in TouchDesigner


Render Shader Park sculptures in TouchDesigner

Getting Started 🎉

Working files are available in the dist folder.

  1. Unzip shader-park-core.zip (Mac users right click on shader-park-td-macos click Open to give TD access to run the executable).
  2. Open up Shader Park TD.toe and have fun.
  3. Write your Shader Park code in a text DAT and attach it to the Shader_Park_Core component to render (note there are examples and a render network already set up for you to experiment with).

Adding Uniforms / Inputs

If you use any input in your Shader Park code eg:

let size = input();
Enter fullscreen mode Exit fullscreen mode

You will need to add a uniform with the same name (in this case size) to the Vectors tab of the pbr2GLSL1 GLSL MAT image

This project has been tested on MacOS + Windows with no node.js installed
For Windows this only run on Windows 8.1 and above Not yet

Discussion (0)