Smooth shading is not working in Babylon React-Native

babylon · July 19, 2022, 8:04am

Hello all,

I tried to use “forceSharedVertices” in BabylonJS to make meshes “smooth-shared”.

By the way, it made the app crashes every time when I try.

Could you please take a look at it to fix & resolve the issue?

Demo video:

Babylon Playground: https://www.babylonjs-playground.com/#2LIJBQ#108

Thanks in advance

babylon · July 19, 2022, 8:04am

Github repo: GitHub - railsjack/babylon-native-demo

carolhmj · July 19, 2022, 11:16am

cc @srzerbetto @bghgary

srzerbetto · July 19, 2022, 12:23pm

@babylon , I will take a look at it!

babylon · July 19, 2022, 12:51pm

@srzerbetto Thanks so much. I will wait for you.

srzerbetto · July 19, 2022, 4:19pm

Just as an update on this. It seems the native engine is failing to handle smooth shading for meshes with empty index buffers. We are currently working on a fix for it.

babylon · July 19, 2022, 4:35pm

@srzerbetto Thanks for your update.
FYI, looking at this code, I found that it’s not handled if the index buffers are empty.

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Meshes/mesh.ts#L3356


      
           * This will undo any application of covertToFlatShadedMesh

           * Warning : the mesh is really modified even if not set originally as updatable. A new VertexBuffer is created under the hood each call.

           */

          public forceSharedVertices(): void {

              const vertex_data = VertexData.ExtractFromMesh(this);

              const currentUVs = vertex_data.uvs;

              const currentIndices = vertex_data.indices;

              const currentPositions = vertex_data.positions;

              const currentColors = vertex_data.colors;

          

              if (currentIndices === void 0 || currentPositions === void 0 || currentIndices === null || currentPositions === null) {

                  Logger.Warn("VertexData contains empty entries");

              } else {

                  const positions: Array<number> = new Array();

                  const indices: Array<number> = new Array();

                  const uvs: Array<number> = new Array();

                  const colors: Array<number> = new Array();

                  let pstring: Array<string> = new Array(); //lists facet vertex positions (a,b,c) as string "a|b|c"

          

                  let indexPtr: number = 0; // pointer to next available index value

                  const uniquePositions: { [key: string]: number } = {}; // unique vertex positions

srzerbetto · July 19, 2022, 4:39pm

Yes, but this code does not check for currentIndices.length == 0. However, despite that, it is currently working fine on the web, so I’m trying to understand what the web engine is doing at render time that allows it to render properly.

babylon · July 19, 2022, 4:56pm

That’s a good idea.
Just for your information, as shown in my screencast, it throws in cloneObject of React-Native’s JSI.
So, I thought it might be because of some Javascript code to clone objects in forceSharedVertices.

babylon · July 21, 2022, 1:10pm

@srzerbetto , How are you?
Any update on this?

srzerbetto · July 21, 2022, 2:27pm

@babylon , we have a fix for this issue, and it is currently on a PR for Babylon Native.

Fix crash on smooth shading for meshes with no index buffers. by SergioRZMasson · Pull Request #1109 · BabylonJS/BabylonNative (github.com)

Once the PR gets merged, we will propagate it to Babylon React Native and it should be on the next release.

babylon · July 21, 2022, 4:08pm

Thanks @srzerbetto
I will wiat.

srzerbetto · July 22, 2022, 11:36am

@babylon , the PR was merged into master. We were actually able to fix it on Babylon.js instead of Babylon Native, so it should be on the next week’s release of babylonjs/core package (5.17.0).

Let me know if you continue to have any issues after updating your project.

babylon · July 22, 2022, 1:14pm

@srzerbetto Thanks so much. I will check it soon.

babylon · July 22, 2022, 2:06pm

@srzerbetto

By the way, I have 2 questions.

Can I use it with these versions?
“@babylonjs/react-native”: “^1.1.1”,
“@babylonjs/react-native-iosandroid-0-64”: “^1.1.1”,
Do I need to check it next week? (maybe Monday?)

babylon · July 31, 2022, 9:30am

Hello @srzerbetto
I tried to updated this package but it was seems slower than before.
I was using 5.6.1 and updated to 5.17.1 but seems slower.
Can you please let me know how to do this on JS side?

github.com/BabylonJS/BabylonNative

Fix crash on smooth shading for meshes with no index buffers.

BabylonJS:master ← SergioRZMasson:bugfix/smooth-shading

opened 02:25PM - 21 Jul 22 UTC

SergioRZMasson

+7 -1

## Overview When forceSharedVertices is called on a mesh that does not have …a index buffer, the forceSharedVertices will create empty arrays for its positions and normals vertex attributes. This will result in a NativeEngine::RecordVertexBuffer been called with undefined arguments been passed as VertexBuffer* argument. A similar behavior happens on the Web engine; however, the web engine creates vertex attribute arrays of size zero, which results in no rendering for those meshes. By simply returning from NativeEngine::RecordVertexBuffer we get the same behavior on the Native engine. ## Issues - Fixes #1108

srzerbetto · August 1, 2022, 1:41pm

Hi @babylon , how are you doing?

The fix should get the smooth shading to work. If I understand correctly, previously it was crashing right? Is it working now?

I would also update the package @babylonjs/react-native to version 1.2.0.

Topic		Replies	Views
Issue with depth texture rendering in Babylon Native? Bugs babylon-native	7	975	July 20, 2022
About using Babylon React Native Questions	5	952	January 12, 2021
Performance of react native version and web version Questions documentation , lighting , gui	2	138	May 12, 2024
Flat Shading on Questions	14	2429	March 13, 2020
Smoothing issue Questions	6	730	July 22, 2019

Smooth shading is not working in Babylon React-Native

Related topics