Giter Club home page Giter Club logo

wagner's Introduction

Wagner

Effects composer for three.js

This is a WIP version of a new proposal for an effect composer for three.js

There's a demo with the latest-ish version of the code here demo. Here's a snapshot to give you an idea of what it can achieve:

Image

Please use it only for review and test purposes. Don't hesitate to add issues or open a conversation about design decisions.

Basic usage

/*
Include the libs
<script src="Wagner.js"></script>
*/

var composer = new WAGNER.Composer( renderer );
composer.setSize( window.innerWidth, window.innerHeight ); // or whatever resolution

var zoomBlurPass = new WAGNER.ZoomBlurPass();
var multiPassBloomPass = new WAGNER.MultiPassBloomPass();

renderer.autoClearColor = true;
composer.reset();
composer.render( scene, camera );
composer.pass( multiPassBloomPass );
composer.pass( zoomBlurPass );
composer.toScreen();

What works

  • Passes are by default RGBA
  • Ping-pong buffers when chaining passes
  • ShaderLoader is being replaced, but you can use it to load .glsl files. It hides all the XHR stuff
  • Composing with Wagner for effects that run chained with the same resolution (e.g. full-screen effects)
  • Basic effects implemented in the new WAGNER.Pass class:
    • Blend pass: all single pass. Current blend modes implemented: normal, darken, multiply, lighten, screen, overlay, soft light, hard light
    • Invert: single pass, inverts colours
    • Box Blur: single pass, blur in one direction specified in vec2 delta uniform
    • Full Box Blur: multipass, 2 box blur in two directions
    • Zoom Blur: single pass
    • Sepia, Noise, Denoise, Vignette, edge detection
    • Multi Pass Bloom: multipass, applies blur and blends with Screen mode
    • DOF (simple)
    • SSAO (simple)
  • uniform reflection from GLSL source is working enough to be usable for most cases
  • settings different path for shader loading

What still doesn't work / needs work

  • ShaderLoader will probably be removed, or be transparent to the user
  • Passing parameters to WAGNER.ShaderPass from main code
  • Correct use of textures of different dimensions along the chain
  • Resizing correctly all render targets
  • Multiple Composers working at the same time
  • Shaders that are not ported to WAGNER.Pass: pixelate, rgb split, different single-pass bloom
  • Shaders that haven't even been ported to WAGNER: camera motion blur, directional blur, gamma, levels,
  • Alias definition of passes (previously loadPass()) legacy
  • uniform reflection from GLSL source doesn't support structures (I don't even know if WebGL supports structures)

Credits

Composer following the work of alteredq's THREE.EffectComposer

Most of the shaders are from https://github.com/evanw/glfx.js. Others are from different sources and forums, papers, or my own.

License

MIT licensed

Copyright (C) 2014 Jaume Sanchez Elias - All shaders are copyright of their respective authors.

I'm trying to trace the original source for some of the common shaders. If your code is featured in the shaders folders, and wish to be correctly credited, or the code removed, please open an issue.

http://www.clicktorelease.com

wagner's People

Contributors

makio64 avatar mcxsic avatar risq avatar samsy avatar sasha240100 avatar spite avatar wagerfield avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wagner's Issues

npm

Upload to npm please

Any plans re license terms

I realise it's a work in progress, but can you say anything about likely choice of software license(s)?

wagner/examples/ssao.html error

e899581โ€ฆ.js:30849 THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog invalid shaders ERROR: 0:124: '=' : global variable initializers must be constant expressions

default instruction has some errors

hi,

very nice work on the shader plugin for three.js. your default instructions on how to implement wagner with three.js has some console errors though. This is what i get to console when i use exact methods on instructions and latest version of three.js. i dont have any shader knowledge so i'm helpless..

is there a solution for this?

screen shot 2014-03-20 at 07 55 45

Missing Files

There are a couple files referenced by the examples that do not appear to be checked in:

Wagner.experimental.js
fragment-shaders/led-fs.glsl

(happens to me all the time)

Otherwise, it looks really good, especially on Retina display. I'm looking forward to ripping off borrowing some of your shaders.

Sampler Arrays indexed with non-constant expresions are forbidden (GLSL > 1.30)

The above error is triggered by the shader compiler in an up-to-date Chrome (Version 48.0.2564.116).

Of course, all the dependent getAttribLocation / vertexAttribPointer etc. won't work then ... so there are a bunch of those errors afterwards.

Error

THREE.WebGLShader: gl.getShaderInfoLog() 0:110(57): error: sampler arrays indexed with non-constant expressions are forbidden in GLSL 1.30 and later

Screenshot

I uploaded a screenshot from your demo to imgur here.

Another suggestion I'd like to make is to have something like window.onblur = function() { stop_renderloop(); } - at least for the demo.

Crashing programs are pretty much impossible to debug while an endless loop of errors is still running.

Add build step

To make development of features easier, it would be good to add a build step using Grunt or similar.
I could put work into this if there is interest, I would propose:

  • Breaking passes and discreet classes into separate files (concatenated on build)
  • Concatenate shader code into main library file for distributable build to reduce http requests (current minefield example makes over 40 requests just for shaders).

Composer.toTexture / clear

Hi,

I just finished a GodrayPass for Wagner, but I encounter some weird stuff with the renderer.clear and the toTexture.

    @composer.renderer.autoClear = false
    @composer.renderer.setClearColor(0x333333,1)
    @composer.reset()
    @composer.renderer.clear()
    @composer.render(@occlusion.scene, @camera)
    @composer.toTexture(@occlusion.texture)

    @godrayPass.params.occlusionTexture         = @occlusion.texture
    @composer.pass( @godrayPass )
    @composer.toTexture(@occlusion.texture)

    # Force to render to another texture here
    @composer.toTexture(@occlusion.texture2)

    @composer.reset()
    @composer.renderer.clear()
    @composer.render(@scene, @camera)
    @blendPass.params.tInput2 = @occlusion.texture
    @composer.pass(@blendPass)
    @composer.toScreen()

After rendering the occlusionScene + the godray pass I want to blend so I needed to reset / clear / draw the scene but the clear will also clear the latest texture used in composer.toTexture.

To fixed it, I used a second texture so the first one is not clear.. but I'm sure there is a better way wihout this extra renderer.

see the screenshot below where texture & texture2 are render on 2 plane for debugging :

screenocclusion

Let me know if I miss something!

ES6

Is planned does rewriting as ES6 module?

Add backbuffer example with simple shader only scene

Hi, thanks for the great library. I am looking to use wagner to make a live glsl node based editor. I am currently stuck on what would be the best way to chain a bunch of shaders without rendering a scene first. Simply a two triangle plane given a sequence of shaders. I would like the first pass to receive the texture from the last pass (backbuffer). An example of this would be great. Thanks!

Babylon port

Babylon is better than three, so can you make a port?

what happened to Position and Velocity pass?

I'm looking at this older example:
http://www.neveroccurs.com/lab/three.js/gpu_particles/index.html?particles=256

and see that they use two passes that aren't available:
WagnerPositionPass.js
WagnerVelocityPass.js

I was wondering why they got dropped, or if they still exist but are called something else?

I'm working on a project that has tens of thousands of particles and I need to animate them using vertex shaders -- would using wagner be a viable solution?

Chrome locks up

I'm a big fan of Wagner! It's very impressive, and easy to use.

I visited the demo at www.clicktorelease.com/tmp/wagner/ and that works perfectly.
However, the current version of index.html in the repo (of commit 2ee57a) freezes up Chrome and crashes my GPU when I serve it locally in Chrome.
I suspect it's a problem with ANGLE that was inadvertently caused by changes from the previous version to the current one.
I was hoping to use Wagner for my next project. Help is much appreciated!

OS: Windows 8.1 64 bit
GPU: Geforce GTX 750M
Chrome: 33.0.1750.154 m

toonpass - WebGL: INVALID_OPERATION...

Issue: Three JS output scene is black. The scene flashes up on screen ( for 1 frame ) then goes black. This is using the toon.html demo from GIT ( no changes )

This happens only in Windows and the shader words as expect in OSX.
Setup: Chrome 33.0.1750.154 m (windows)
Tested in: Windows 7 & 8 ( all patched up)
Also happens in Internet Explorer.

Console output from Chrome:

Compiled Wagner.js:12
Could not initialise shader
VALIDATE_STATUS: false, gl error [0] three.min.js:494
Program Info Log: (350,29-95): error X3507: '_nearestLevel': Not all control paths return a value

Warning: D3D shader compilation failed with
default
flags.
Retrying with
avoid flow control
.

(350,29-95): error X3507: '_webgl_f362b64cb55e5d08': Not all control paths return a value

Warning: D3D shader compilation failed with
avoid flow control
flags.
Retrying with
prefer flow control
.

(350,29-95): error X3507: '_webgl_f362b64cb55e5d08': Not all control paths return a value

Warning: D3D shader compilation failed with
prefer flow control
flags.
Failed to create D3D shaders.
three.min.js:495
11
WebGL: INVALID_OPERATION: getUniformLocation: program not linked toon.html:1
21
WebGL: INVALID_OPERATION: getAttribLocation: program not linked toon.html:1
WebGL: INVALID_OPERATION: useProgram: program not valid toon.html:1
WebGL: INVALID_OPERATION: vertexAttribPointer: no bound ARRAY_BUFFER toon.html:1
WebGL: INVALID_OPERATION: useProgram: program not valid

Can't get Wagner to work with R73

I get the following warnings and error:

WebGL: INVALID_VALUE: shaderSource: string not ASCII

THREE.WebGLShader: Shader couldn't compile.

THREE.WebGLProgram: shader error: 1281 gl.VALIDATE_STATUS false gl.getProgramInfoLog invalid shaders ERROR: 0:? : '' : syntax error

Webpack/Browserify Compatibility?

I would love to use this in my project, but the "main" field is referenced incorrectly and the library assumes a browser environment. Is this planned?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.