How to Blur Reflection Elements

Hello, community members. After several attempts and numerous questions, I am gradually achieving the results I desire.

Here is the goal I ultimately wish to accomplish.

However, I have managed to implement what I envisioned.

Except for a few issues…

One issue is figuring out how to incorporate light distortion (prism, blur). Another is how to render pixels invisible.

I am deeply thankful to everyone who has responded to my inquiries, however elementary they may be.

this is my minimal sample

P.S. Following advice from another query, I attempted to use Blender to export and create materials. However, I found it challenging to replicate elements like glass in bjs, which led me to abandon this approach due to a lack of understanding of these differences. Also, loading times are considerably longer when importing a scene compared to merely loading a mesh.

Hello :slight_smile:

Having a look at this topic I came with this fix : Playground
Also in your demo, the model rotates when the mouse moves (regardless of camera), I’ve added such rotation using mousemove event.

What do you mean exactly ?

It was a mistake. The meaning was altered because I used a translation tool.

When you look at my playground and my video work, you can see the pixels of the wire sphere stand out. What I meant was, “Seeing the pixels is also an additional problem.”

Using the code you provided seems to be the easiest way to simply load the scene I want, import the mesh material, and then remove it…

Babylon.js - DragonDispersion.gltf (babylonjs.com)
In this sandbox, there is a material that does not pixelate when translucent (perhaps because it is a texture?). I would like to acquire this through code; is there a way to do this?
(I am trying to write the mesh import and material directly in code to eliminate loading times. Is it somewhat foolish to work with such constraints?)

Thank you for taking the time to respond, and please point out if there is any rudeness in my tone.

1 Like

I would say yes. For example in this Playground I’m just taking the same Material from the GLTF itself using code :

glass

If you want to create it from scratch, I would say it’s possible, you just need to create a fresh BABYLON.PRBMaterial and edit the params by code. In the inspector you have a copybutton on the right of each param which copies the code used to edit this param. It will help a lot to reproduce.

4 Likes

Amazing demo!

Thank you very much for your response.

I replicated the attributes in the sandbox and recreated them in the code with minimal implementation.

refraction | Babylon.js Playground (babylonjs.com)

Here is the code I used to project the background:

const refractionTexture = new BABYLON.RefractionTexture("glassRefraction", 512, scene);
refractionTexture.renderList.push(sphere1);
refractionTexture.renderList.push(textPlane);

However, the code you’ve provided (the playground you’ve responded with) manages reflections, projections, refractions, and light scattering even without reflection. Is it possible to achieve reflection with a simpler code?

Additionally, I would like to accurately replicate the materials created in the sandbox and streamline the process by removing unnecessary properties. Currently, I am copying and pasting each attribute one by one and then modifying them. Is there a better way to handle this, such as “copying all attributes of a specific material”?

I suggest you to start with something like PBR materials for dummies.
Go through each property and learn how to use them. It requires experience and lot of trial and error. There are tons of super cool PBR materail on the forum.

Please do not add further questions to a closed topic but open a new one. Thanks!

1 Like