What are some effective methods for optimizing GLSL/C code in Three.JS when using PerObject-Blur?

UPDATE 2

I have successfully integrated custom attributes using THREE.js. Each pass in the vertex shader is now aligned with the position attribute, resulting in an efficient solution with minimal code.

An example will be added later

UPDATE 1

This method assigns alpha values to vertices based on the velocity range within a bounding box. I am seeking advice on how to handle GLSL code repetition per vertex; it seems a bit confusing to me?

Should I use functions? If so, how?

Check out this link for more details

In any case, here is my current implementation:

//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
}

Upon reflection, I realize that the code may need some tweaking.

Previous Post >

I am working on an application where objects move rapidly and require a better description in terms of their motion, such as flying saucers with blurs and light trails. How can I achieve this special effect?

I have begun implementing the foundation for achieving this effect based on per-object-motion-blur, along with extensive documentation available at the following collaboration link:

Explore this link for collaboration opportunities

Is it possible to incorporate light blurs specifically for the brighter sections of a cube?

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

      //}

Answer №1

Blur occurs in the screenspace, meaning it should be run after everything else is rendered. To achieve this, you must output the "influence" to a render buffer target so that it can be accessed during the screenspace blur process.

Take a look at this example on ShaderToy. The variable to adjust is mSize, which should be derived from a texture previously outputted to a render target.

This is why the tutorial you mentioned utilizes a "velocity buffer" to store velocities in screenspace for use in the screenspace blur effect.

For optimization tips, consider focusing on math function optimization rather than simply avoiding function usage in the vertex shader code. Vectorization may also prove beneficial depending on the GPU being targeted.

  • What type of device are you targeting? Mobile and desktop GPUs vary.
  • Check out Faster BBox transform here
  • Explore vectorization techniques like testing multiple values of a vector here
  • After completing your shader, run glsl-optimizer for further optimizations here

Remember to include comparisons with 0 in your branches ( > 0 && < 0 but not == 0)

Answer №2

If you're searching for a way to implement per-object motion blur in your project, consider using the THREE.GPUComputationRenderer. By rendering the object's position to a buffer (texture) and then passing that buffer into subsequent calculations, you can compute blur values based on both past and current positions of the object.

Check out this example which demonstrates how to use GPUComputationRenderer to render positions as a texture (sampler2D) and reference them in the next pass. This approach allows you to precompute various vertex values and render the image accordingly (such as motion blurs or single object blurs).

Although it may not be possible to achieve single object blur or motion blur in a single pass while computing everything else in your scene, utilizing the GPUComputationRenderer can help streamline the process and minimize the number of passes required. Best of luck on your project!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying JSON data in a popup window resembling a download prompt

I'm a beginner in front end development and facing difficulty in displaying JSON in a new window. Currently, I'm allowing users to download the JSON file like this var blob = new Blob([$scope.data], {type: 'json'}); ...

What is the process for incorporating a collection in Mongoose?

Trying to clear the Users collection before and after tests: before(function(done) { mongoose.connection.collections['users'].drop(function(err) { mongoose.connection.collections['users'].insert(user, done); }); }); after(func ...

Eliminate duplicate time slots in Laravel and Vuejs

Currently, I am delving into laravel(5.2) and vuejs as a newcomer to both frameworks. My goal is to utilize vuejs to eliminate redundant time slots. In my blade file, the code looks like this: <div class="form-group"> <label for="form-fi ...

Troubleshooting: Instagram API JavaScript Example Showing Errors

I'm currently working on integrating a photo feed from my Instagram account by following this tutorial: Below is the snippet of my HTML code with the addition of instafeed.min.js: <!DOCTYPE <!DOCTYPE html> <html> <head> < ...

Unlocking the potential of a calculated observable

Having recently started using Knockout, I'm facing an issue that I could use some help with. It seems like a simple problem, but I just can't seem to solve it on my own. The issue revolves around a computed function that returns the src for an im ...

What is the best way to create a nested match using regex?

const foundMatches = regExPattern.match(/\((.+?)\)/g); When tested against: [example[1]] The result is "[example[1]", indicating a potential nesting issue. How can this be resolved? ...

stay at the top of the screen with anchor #link

Is there a way to link to a page with a specific bootstrap nav-tabs open without the page automatically scrolling down to that tab? I've tried using #link with the tab id, like www.mysite.com/apagewithtabs#tab2, but I want the user to be at the top of ...

Unable to retrieve real-time data from Firestore using getStaticPaths in Next.js

While fetching data from Firebase Firestore using getStaticProps is successful, I encounter a 404 page when attempting to implement the logic for retrieving details of individual items with getStaticPaths. The current state of my [id].js code appears as fo ...

Creating a Click Counter with jQuery 2.0.1/2.0.2: A Step-by-Step Guide

Currently in the process of creating a fundraising webpage for charity, I have chosen to display an animated rabbit making its way Around The World. My progress so far includes a non-looping gif that plays on click, with a limitation on how often it can b ...

Set my click event handler back to its default setting

I'm struggling with resetting a click function after it completes. How can I make sure it's ready to run again? $('body').on('click', '#ConfirmBet', function () { function randomImg() { var imgs = $(&apo ...

What steps should I take to include a Follow - Unfollow Button on my Website?

I need to add a button on my website that allows users to either follow or unfollow a specific game. Here is the table for the follow buttons: Follow Button Table When a user clicks on the button related to the game ID, it should update the game_follow d ...

Node.js and Express: Delegate routes to different endpoints for handling by the Single Page Application, instead of just the root route

I have my node.js/Express server configured to host my Vue.js single page application from the root URL path (localhost:3333) within the public folder. When navigating through my app, everything works smoothly thanks to the vue.js History API handling all ...

Can you group polygons in layers using Phaser?

My goal is to animate two polygons: one that remains stationary and another that changes shape while moving. The challenge is to ensure that the stationary polygon always stays on top when overlapping. This is my proposed solution: (function() { "use ...

The predicament encountered with user registration in the realm of Node.js

I am encountering a problem with the sign-up route in node.js and MongoDB. Whenever I attempt to post data using Insomnia, it displays an error message. You can find the screenshot of the error [here](https://i.stack.imgur.com/qnGAv.png). Here is the code ...

Best Practices for Implementing AngularJS Dependency Injection

I am excited to share that I have recently started delving into my very first Angular JS project. As I navigate through this new experience, I want to ensure that I am effectively managing Multiple dependency injection. Any insights, recommendations, or ...

Tips for effectively implementing a custom theme alongside a component library that utilizes Material UI without the need to apply it to every single component

What is the correct way to utilize a custom theme with a component lib that utilizes Material UI without wrapping every single component? import { createMuiTheme } from '@material-ui/core/styles'; const theme = createMuiTheme({ palette: { ...

Transmit JSON information from one webpage and dynamically retrieve it from another page via AJAX while both pages are active

I am attempting to transfer JSON data from page1 when the submit button is clicked and then retrieve this data dynamically from page2 using AJAX in order to display it in the console. I am unsure of the correct syntax to accomplish this task. There was a s ...

The process of eliminating line breaks in javascript is not functioning as expected

I've been searching all over the place, experimenting with different methods, but I just can't seem to fix this issue.. var save_field = res[0]; var save_value = res[1]; save_value = save_value.replace(/\n/gm, '<br />'); con ...

The marriage of Vue 2.0 and Rails 5: Shifting from Reactive to Declarative Rendering

As I make my way through the Vue guide with a Rails 5 app, I've noticed that although I am able to update my Vue js object, the DOM doesn't behave as described in the Declarative Rendering section. The data and the DOM are supposed to be linke ...

The HTML textarea is not updating properly when using jQuery's keypress event

I am facing an issue with my forms on a webpage, each containing an html textarea: <textarea name="Comment" class="inputTextArea">Hello World!</textarea> There is a javascript event handler that automatically submits the fo ...