boytchev / oops.js

Only One-pass Shader

Only One-pass Shader (oops.js)

Oops.js is a library which attempts to squeeze higher performance from Three.js postprocessing effects, by:

• baking static uniforms in the shader code
• merging several compatible shaders into one
• reducing the number of postprocessing passes

https://boytchev.github.io/oops.js/

Oops.js is licenced under CC0-1.0. It may be used in any type of software, with or without modifications. Crediting is not required, but is appreciated.

oops.js's Issues

Merging RGBShift and FXAA softfails

FXAA after RGBShift results as if there is no RGBShift -- only a single shape is seen

var effects = new Effects( renderer )
		.addEffect( RGBShiftShader, {amount: 0.1} )
		.addEffect( FXAAShader )

Merging HalftoneShader and ConvolutionShader hardfails

ConvolutionShader after HalftoneShader causes compilation fail in shaders:

• vertex shader: 'KERNEL_SIZE_FLOAT' : undeclared identifier
• fragment shader: 'KERNEL_SIZE_INT' : undeclared identifier

var effects = new Effects( renderer )
		.addEffect( HalftoneShader )
		.addEffect( ConvolutionShader )

Test-4 & Test-5 are slightly different

After introducing automatic resolution setting in Halftone shader, Test-4 and Test-5 for non-Oops and Oops show slightly different renderings.

Shared shader properties

When two shaders have the same property, currently it must be aliased to two unique names. However, it is better to allow sharing of properties. Thus, in the next example, the value amount is made as a singe uniform, used by both shaders:

var oops = new OOPSShader( )
    .addShader( 'HorizontalBlurShader' )
    .addUniform( 'amount', 10 )
    .addShader( 'VerticalBlurShader' )
    .addUniform( 'amount' )

Shader error with same parameter name

The following setup:

var oops = new OOPSShader( )
    .addShader( 'HorizontalBlurShader' )
    .addUniform( 'amount', 10 )
    .addShader( 'VerticalBlurShader' )
    .addUniform( 'amount', 10 )

causes error:

three.module.js:19999 THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Program Info Log: Fragment shader is not compiled.

If amount is set once, there is no problem.

Common functions in shaders

If a shader contains local functions or local defines, and if the shader is used twice, there is no need to make two copies of these functions and defines.

Broken shader for three effects

After adding functionality for shader-specific onRender, three effects have broken shaders: Halftone, Mirror and Convolution

Broken shader for Halftone+Convolution

When HalftoneShader and ConvolutionShader are merged the resulting fragment shader is wrong. This happens when mixing pairs of shaders with missing vertex or fragment shader. The issue should become Test-4.