shaded
glsl fragment shader viewer and browser
Last updated a month ago by fordhurley .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install shaded 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 1.0.4                                ...           latest (a month ago)

5 Versions

  • 1.0.4                                ...           a month ago
  • 1.0.3                                ...           4 months ago
  • 1.0.2                                ...           4 months ago
  • 1.0.1                                ...           4 months ago
  • 1.0.0                                ...           4 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 26
Dependencies (6)
Dev Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |