Skip to content
glsl fragment shader viewer and browser
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
examples
src
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
package.json
screenshot.png
yarn.lock

README.md

shaded is a development tool for writing and previewing glsl fragment shaders, in the spirit of:

Features

  1. Bring your own text editor.

  2. Run your shader while you code, with hot reloading on save.

  3. Share and reuse code with glslify:

    #pragma glslify: noise = require('glsl-noise/simplex/2d')
    #pragma glslify: smoothUnion = require('./smoothUnion')
  4. Built in uniforms (compatible with The Book of Shaders):

    uniform vec2 u_resolution;
    uniform vec2 u_mouse;
    uniform float u_time;
  5. Texture loading by comment:

    uniform sampler2D bump; // ../textures/brick_wall.jpg

All of these features are available in atom-glsl-preview, but I switched from Atom to VSCode a while back, so I wanted to be able to write shaders in any text editor. vscode-glsl-canvas is pretty great, but doesn't support glslify or simple texture loading. Instead of tying myself to a particular editor, I decided to write a more generic tool that simply worked with my file system and a browser.

NOTE: If you're coming from atom-glsl-preview, the behavior of u_mouse has changed: instead of providing normalized mouse coordinates (0 to 1), u_mouse will match the coordinates of gl_FragCoord (divide by u_resolution to get back to normalized coordinates). This makes the behavior match that of The Book of Shaders editor.

As in recent versions of atom-glsl-preview, no precision specifiers or uniform declarations will be added to your shader automatically—what you code is what you get.

Install

npm

npm install --global shaded

Or, with yarn:

yarn global add shaded

Usage

Start the server in the current directory:

$ shaded
shaded listening at http://localhost:3000

Open http://localhost:3000 in your browser to see a listing of the files in the current directory. Navigating to a file ending with the extension .glsl will open a page showing the shader in a WebGL canvas.

screenshot

Examples

Development

  • Start the build "watchers":

     yarn run server-watch
     yarn run frontend-watch
    
  • Start the server (needs to be manually restarted after a change):

     node dist/server/index.js
    
  • Open a browser to the examples: http://localhost:3000/examples

TODO

  • More testing (especially cross platform/browser).
  • Show/copy original source and "compiled" (glslified) source.
  • Show line errors when viewing source.
  • Custom file extensions.
  • Browse "gallery" with previews.
  • Play/pause controls.
  • Export frames/video.
  • Custom uniform sliders.
  • Custom programmable uniforms (e.g. mouse clicks, keyboard, date).
  • Video textures.
  • Multiple buffers.
You can’t perform that action at this time.