question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature Request: OnBeforeRender on Material

See original GitHub issue

Is your feature request related to a problem? Please describe.

Let’s say I have a custom material that is shared by two meshes. This material uses the inverse transform of the mesh. In this case, I have no way to send the inverse transform because it’s dependent from the actual bound mesh.

When creating an app with Three.js, it’s not really an issue because we control the flow of data. However, when wrapping Three.js in another library, it makes it somewhat difficult to share a ShaderMaterial whose parameters aren’t independent from the camera / mesh drawn.

Describe the solution you’d like

On the top of my mind:

  • Create a onBeforeRender callback on the material, that would be in charge of updating per-object uniforms. This is similar to the onBeforeCompile callback, but called each time something is rendered with this material.

Describe alternatives you’ve considered

  • Use onBeforeRender on each meshes. Annoying because all meshes using this material must be updated and a user would need to attach the callback himself
  • Clone the material for each mesh

Additional context

This is highly related to the issue #16922. I think the problem is similar.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:29 (11 by maintainers)

github_iconTop GitHub Comments

2reactions
sunagcommented, Sep 8, 2021

@DavidPeicho Look like we have a WebGL version for that 😃 https://github.com/mrdoob/three.js/pull/22504

2reactions
Mugen87commented, Feb 23, 2021

Okay, after investigating this issue a refactoring of how bindings are managed is required. Right now, the binding and the actual data are handled in a single object. In the below example, bufferGPU represents the UBO and array the actual data.

https://github.com/mrdoob/three.js/blob/cb99e7e08cc97cb7a22f17e32cc7a22082022d67/examples/jsm/renderers/webgpu/WebGPUUniformsGroup.js#L22-L23

If a material is shared among multiple 3D objects, there is only one instance of bindings objects and thus only one data storage. This is not a problem for textures (because textures are defined on material level) however model related data like the MVP matrix can’t be processed this way. They have to be managed per 3D object and the UBO needs to be updated per object with the correct data.

I need some time to think about a possible solution for this…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Object3D#onBeforeRender – three.js docs
Custom depth material to be used when rendering to the depth map. Can only be used in context of meshes. When shadow-casting with...
Read more >
Application.onBeforeRender - Scripting API - Unity - Manual
Delegate method used to register for "Just Before Render" input updates for VR devices. Any work performed within this callback will increase the...
Read more >
Michael on Twitter: "@mrdoob Whoa what is modified material ...
Over the years, a common feature request has been to be able to modify the ... that it could be implemented in a...
Read more >
ASP.NET Core Razor component lifecycle | Microsoft Learn
Component lifecycle events: If the component is rendering for the first time on a request: Create the component's instance. Perform property ...
Read more >
three-js-extra-built-in-uniforms - npm package - Snyk
In the past month we didn't find any pull request activity or ... However, it may be a pain to manage onBeforeRender, essince...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found