https://github.com/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
https://github.com/shader-park/shader-park-core

computer-graphics creative-coding glsl gpu graphics-programming live-coding p5js processing raymarching raymarching-distance-fields real-time rendering sdf shader shader-park shaders shadertoy signed-distance-field web webgl

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/shader-park/shader-park-core
• Owner: shader-park
• License: mit
• Created: 2019-06-17T18:01:01.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-05-28T12:37:57.000Z (5 months ago)
• Last Synced: 2024-10-30T00:30:59.259Z (10 days ago)
• Topics: computer-graphics, creative-coding, glsl, gpu, graphics-programming, live-coding, p5js, processing, raymarching, raymarching-distance-fields, real-time, rendering, sdf, shader, shader-park, shaders, shadertoy, signed-distance-field, web, webgl
• Language: JavaScript
• Homepage: https://shaderpark.com/
• Size: 40.4 MB
• Stars: 754
• Watchers: 9
• Forks: 21
• Open Issues: 40
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-game-engine-dev - Shader Park - Shader programming in JavaScript. (Specialty Topics / Shaders)

README

        


  

![Build Status](https://github.com/shader-park/shader-park-core/actions/workflows/build_test.yml/badge.svg)





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](https://i.imgur.com/okVONOu.gif)

### Try the [live editor ✍️](https://shaderpark.com/new)

### Browse the [Interactive Documentation 📖](https://shader-park-docs.netlify.app/references-js/)

### Build from working [Template/Example Projects 🛠️](https://github.com/shader-park/shader-park-examples)

### Join the community on [Discord 💬](https://discord.gg/vuBnVuBvvK) 

### Easily integrated with:

- webpages

- threejs

- touchdesigner

- unity (under development)

## Explore [hundreds of examples](https://shaderpark.com/explore)

![Alt Text](https://i.imgur.com/dFI9g12.gif)

### Install   

`npm install shader-park-core`

### Usage

See examples on [glitch](https://glitch.com/@torinmb/shader-park-examples)

### 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.