Giter Club home page Giter Club logo

oops.js's Introduction

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

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 People

Contributors

boytchev avatar

Stargazers

Davo Galavotti avatar Fabio Dias Rollo avatar Ruofei Du avatar Patrick Schroen avatar GifCo avatar Alexa Cristina avatar Fennec avatar  avatar James avatar  avatar Dmitry Iv. avatar stagas avatar  avatar Sota Hatakeyama avatar Nigel Breslaw avatar Sikriti Dakua avatar jiangqi avatar  avatar  avatar Jonatas Santos avatar M avatar arpu avatar Andrea Gargaro avatar Jonathan Davidson avatar Georgi Nikolov avatar

Watchers

arpu avatar  avatar  avatar

Forkers

k-pao ruofeidu

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 )

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.

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.

Broken shader for three effects

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

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 )

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.

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' )

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.