Three.JS | PerObject-Blur, What techniques can I use for GLSL/C to optimize code?

Question

UPDATE 2

I've implemented custom attributes with THREE.js, influences come with each pass in the vertex shader aligned with position attribute, the best solution with minimal code.

I will add the example later

UPDATE 1

This method sets alpha to vertexes influenced by the velocity range inside bounding box. I need tips to deal with GLSL code repetition pervertex, it is a bit strange to me?

Shall I use functions? How?

https://jsfiddle.net/LeroyRon/uep9t1v1/#&togetherjs=MjBnNMFQFl

Anyways I have this:

//for .x
if (position.x > 0.0) {
    if (velocityPosition.x + (velocities.x*shutterSpeed) > boundingBoxMaxView.x) {
        influence = position.x/boundingBoxMax.x;
        velocityPosition.x += (velocities.x*shutterSpeed*influence);
    }
} else if (position.x < 0.0) {
    if (velocityPosition.x + (velocities.x*shutterSpeed) < boundingBoxMinView.x) {
        influence = position.x/boundingBoxMin.x;
        velocityPosition.x += (velocities.x*shutterSpeed);
    }
}

//for .y
if (position.y > 0.0) {
    //To-Do
} else if (position.y < 0.0) {
    //To-Do
}

//for .z
if (position.z > 0.0) {
    //To-Do
} else if (position.z < 0.0) {
    //To-Do
}

Now that I think about it, I'm doing the code a bit backwards.

Old Post >

I have an app where objects move fast and needs to be described better in terms of its motion, like flying saucers with blurs and light trails. How could I achieve this special effect?

I have started the base to the implementation per-object-motion-blur, along with the best docs that I could find, follow this link for Collab:

https://jsfiddle.net/LeroyRon/uep9t1v1/#&togetherjs=DIo3kqhPfC

Could it be possible to have light blurs for lighter parts of the cube?

uniforms: {
        //velocity: {type: "f", value: velocity},
        //uVelocityScale: {type: "f", value: uVelocityScale},
        //speed: {type: "f", value: uVelocityScale},
        //nSamples: {}
      },
      //attributes: {

      //}

Answer 1

Blur is a screenspace operation, so you need to run it once everything is rendered. So, you need to output the "influence" somehow to a render buffer target so that you can have acess to it inside the screenspace blur

here's one https://www.shadertoy.com/view/XdfGDH, the variable you want to tweak is mSize, and that should be coming from a texture outputed to a render target before.

That's why the tutorial you linked use a "velocity buffer", which stores velocities in screen-space so that it can be used by the screen space blur.

Anyway some tips on optimizations, but not sure the vertex shader code would pose any performance problems here anyway. Functions usage may not be a good path for optimization, best bet is math function optimisation and depending on GPU target, vectorization.

• What's your device target ? mobile and desktop have different GPU
• Faster BBox transform http://dev.theomader.com/transform-bounding-boxes/
• vectorization for example test on mutliple value of a vector https://www.opengl.org/sdk/docs/man/html/any.xhtml
• run glsl-optimizer on your shader once finished https://github.com/aras-p/glsl-optimizer

Note you miss 0 in your branches ( > 0 && < 0 but no == 0)