space-3d icon indicating copy to clipboard operation
space-3d copied to clipboard

Various ideas / suggestions

Open mattdesl opened this issue 9 years ago • 2 comments

Great stuff.

Just gonna drop some ideas and suggestions here. Take them as you will. :smile:

  • You can use glslify for modularizing shaders, so you can npm install glsl-noise and eventually publish the space-specific GLSL components back to npm
  • Optionally, you can use stackgl for some low-level aspects like shader compilation. However, you don't need to use stackgl to get glslify working.
  • A "daytime" mode might be awesome
  • The process is really slow for large textures, totally hanging my system. I wonder if it's because it's trying to save each cube face to individual canvas elements? Maybe there is a solution that doesn't involve rendering to canvas textures.

A nice "end goal" for a project like this (and similar procedural texture tools) might be to have an Electron installation. The end-user experience would be a lot nicer, it would be something like:

npm install space-3d -g

## run in GUI mode
space-3d --gui

## run in CLI mode
space-3d --seed=5c9ss9vdfq0w --resolution=1024 --output space_cubes/

The main benefit is that you get Node's fs so you can stream FrameBuffer pixels directly to the file system (see gl-pixel-stream). This means you could render huge outputs without crashing/hanging the user's system, and without the user having to "Save As" each cube face. It could also be used as a CLI tool.

For reference, see shadertoy-export, which is built on Electron, stackgl and gl-pixel-stream. It's a bit clunky to develop, since you have to figure out a nice dev/prod setup with browserify (or another bundler of your choice), but the end result is pretty awesome.

Cheers!

:beers:

mattdesl avatar Nov 17 '15 15:11 mattdesl

Another suggestion, related to the dev/build step. :tada:

You might want to check out budo for local development; it has a few benefits like incremental rebundling for faster development (via watchify), integrated live-reload, and cleaner error reporting in the browser. The whole Gulpfile could be replaced with two lines in package.json, and lead to a better dev UX:

{
  "devDependencies": {
    "browserify": "^12.0.1",
    "budo": "^6.0.4",
    "glslify": "^2.3.1",
    "uglify-js": "^2.4.21"
  },
  "scripts": {
    "start": "budo src/main.js:static/js/bundle.js --live -- --transform glslify",
    "build": "browserify src/main.js | uglifyjs -cm > static/js/bundle.js"
  }
}

mattdesl avatar Nov 17 '15 16:11 mattdesl

Excellent recommendations, thank you! Looks like I have some fun research ahead of me. :)

wwwtyro avatar Nov 17 '15 22:11 wwwtyro