# Help with rendering issue (PR)

**URL:** https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619
**Category:** Bugs
**Tags:** lighting, rendering
**Created:** [June 14, 2023, 11:16pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619 "2023-06-14T23:16:38Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 14, 2023, 11:16pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/1 "2023-06-14T23:16:38Z")

</div>

See [Standardize Vectors and Colors by dr-vortex · Pull Request #13699 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/pull/13699), [Help with lighting issue](https://forum.babylonjs.com/t/help-with-lighting-issue/40950), and [the screenshot report](https://babylonsnapshots.z22.web.core.windows.net/refs/pull/13699/merge/testResults/webgl2/index.html).

If anyone has in-depth knowledge of the rendering pipeline, please help me with fixing the issue(s) with rendering. I have no experience with or knowledge about the rendering pipeline so any help is greatly appreciated.

---

<div class="post-metadata">

### Author: ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [June 15, 2023, 12:53pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/2 "2023-06-15T12:53:29Z")

</div>

The problem is not with rendering here but one of the function you changed is not behaving the same way. The rendering is just a symptom and we should mostly dig for the root cause.

I guess you need to test the functions themselves as anyway the change is really large and having tests would help getting confidence it won’t introduce any regressions. The rendering is only a symptom here.

Also the tests would be helpful to validate the perf impact as we could use them with some kind of load tests.

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 15, 2023, 1:14pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/3 "2023-06-15T13:14:29Z")

</div>

I agree. The reason I’m looking for a rendering pipeline expert is that there are around a hundred different functions. Testing each of them with all the values that could cause different results (e.g. 0, -1, 1) and a couple of other real numbers would result in 500+ tests. I think doing that many tests would be a waste of time since we could find the function(s) causing the issue by reviewing the code calling it. For now, I will start doing some manual tests.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [June 15, 2023, 4:44pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/4 "2023-06-15T16:44:17Z")

</div>

> [@sebavan](#):
>
> Also the tests would be helpful to validate the perf impact as we could use them with some kind of load tests.

I want to underline that this is my MAIN concern. i find the code you provided elegant but we already tried several attempts like this one in the past and we always had to rollback as the hit on the perf side was significant.

That being said, we need to test first of course. Maybe your approach is smarter and thus it will be a superb contribution.

Thanks!

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [June 15, 2023, 5:15pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/5 "2023-06-15T17:15:51Z")

</div>

@Vortex, because I’m all love and compassion I looked at your rendering issue 🙂

The problem is right there:  
[Standardize Vectors and Colors by dr-vortex · Pull Request #13699 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/13699/files#diff-db937e3b2a03ea114c0031934dca904eee51c4ebd7a4c34c243ec8e13b976e0cR1099)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/7/87b0f0fc989d661535fbf29f6356fbfb8fbe0af2.png)

You cannot assume that if len === 1 then you can return result because result will be zero most of the time. So the easy fix is to only return directly when len === 0 only.

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 15, 2023, 7:42pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/6 "2023-06-15T19:42:21Z")

</div>

…

I just finished working on unit tests for _every_ Vector3 method/static. Thank you so much for finding that. I will add tests to the PR for future vector changes.

Also, Something seems to have broken background colors… [Jest Screenshot Report](https://babylonsnapshots.z22.web.core.windows.net/refs/pull/13699/merge/testResults/webgl2/index.html)

---

<div class="post-metadata">

### Author: ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)
#### Post date: [June 15, 2023, 7:55pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/7 "2023-06-15T19:55:59Z")

</div>

@Vortex before you fix it all and add lots of tests, you should validate that perf won t be an issue. It would be a shame to throw away all this great work if the perf were not recoverable. I agree the latest fixes could impact perf but I d guess the majority of the changes are in to validate your assumptions that it will be at least as fast.

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 15, 2023, 8:41pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/8 "2023-06-15T20:41:08Z")

</div>

Even if the standardization doesn’t work, the tests will still be useful. I’m writing them for the classes separately since `Vector` doesn’t care about the dimension of operands for many methods.

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 16, 2023, 1:33am UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/9 "2023-06-16T01:33:23Z")

</div>

[#13973](https://github.com/BabylonJS/Babylon.js/pull/13973) should help with debugging.

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 19, 2023, 5:18pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/10 "2023-06-19T17:18:40Z")

</div>

@sebavan @Deltakosh Any thoughts on the background color issue?

---

<div class="post-metadata">

### Author: ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)
#### Post date: [June 19, 2023, 7:10pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/11 "2023-06-19T19:10:24Z")

</div>

cc @RaananW as it seems the PGs do render correctly in the playground:

[https://babylonsnapshots.z22.web.core.windows.net/refs/pull/13699/merge/index.html#0YYQ3N#0](https://babylonsnapshots.z22.web.core.windows.net/refs/pull/13699/merge/index.html#0YYQ3N#0)

The background is black indeed, as in the reference image ([https://playground.babylonjs.com/#0YYQ3N#0](https://playground.babylonjs.com/#0YYQ3N#0)).

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [June 20, 2023, 10:44am UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/12 "2023-06-20T10:44:08Z")

</div>

This is related to transparency. The background color of the canvas in the vis-test was recently set to greenyellow to force seeing changes when a transparent element is rendered. Feels like there is an issue with the way colors are parsed in these situations.  
Is it possible that there is some conversion from color3 to color4 that sets the 4th value to 0 instead of 1?

---

<div class="post-metadata">

### Author: ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)
#### Post date: [June 20, 2023, 11:16am UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/13 "2023-06-20T11:16:21Z")

</div>

Indeed, there’s a problem with `Color4`. I took a Spector snapshot of the PG in the context of the PR:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/d/9d3959482b3010dea0a6b7938617d20472126849.png)

@Vortex The alpha value is wrong, it should be 1. So there must be a bug with the `Color4` class.

[…] It’s probably because the `clearColor` in the .babylon file has only 3 components:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/8/08112b6eb12aba697c78ac371dbe0abfd22be48c.png)

It currently works with the existing code, because the loader is doing:

```typescript
scene.clearColor = Color4.FromArray(parsedData.clearColor);

```

and `Color4.FromArray` is:

```typescript
public static FromArray(array: DeepImmutable<ArrayLike<number>>, offset: number = 0): Color4 {
    return new Color4(array[offset], array[offset + 1], array[offset + 2],
                             array[offset + 3]);
}

```

`array[offset + 3]` is `undefined` because the array has only 3 elements.

The constructor of `Color4` is:

```typescript
constructor(
    public r: number = 0,
    public g: number = 0,
    public b: number = 0,
    public a: number = 1
) {}

```

So alpha ends up being initialized with 1 in this case.

---

<div class="post-metadata">

### Author: ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)
#### Post date: [June 20, 2023, 11:16am UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/14 "2023-06-20T11:16:56Z")

</div>

vis-tests doing their job 🙂

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 20, 2023, 12:31pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/15 "2023-06-20T12:31:05Z")

</div>

Thank you! [432a116](https://github.com/BabylonJS/Babylon.js/pull/13699/commits/432a11687fde1a18718555b6cc8c1dd65c267a8d) should fix it.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [June 20, 2023, 3:00pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/16 "2023-06-20T15:00:57Z")

</div>

Now the real question is REALLY perf because even if I like your work a lot I will not allow it to merge if this is detrimental to perf

Here are some PG you can use to evaluate the before/after regarding perfs:

- [Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#6HWS9M)
- [Particle Helper demo - Sun | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#1VGT5D#2)

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 20, 2023, 3:32pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/17 "2023-06-20T15:32:24Z")

</div>

The sun PG consistently stays at 60 FPS. The other PG is a little slower. Here are the averages across 5000 frames:

current backward compatible: 26.36ms  
PR backward compatible: 28.54ms (2.18 ms slower)  
current aggressive: 16.08ms  
PR aggressive: 17.18ms (1.1ms slower)

Is this acceptable performance? If not, I can take a look at more optimization.

---

<div class="post-metadata">

### Author: ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)
#### Post date: [June 20, 2023, 3:42pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/18 "2023-06-20T15:42:03Z")

</div>

Unfortunately it is not acceptable. We do not commit code that regress perf (and here it is relevant with 10% slower code)

But if you can figure out how to get back to same values, then it will be excellent!

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 20, 2023, 6:46pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/19 "2023-06-20T18:46:50Z")

</div>

I’ve changed `Vector` from having a `vector` property to instead extending `Array` and having the properties directly on the object. Using `vector[i]` instead of `vector.vector[i]` should speed up performance.

It is currently not working though, and fails on every test.

---

<div class="post-metadata">

### Author: ![Vortex](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vortex/32/26844_2.png) [@Vortex](https://forum.babylonjs.com/u/Vortex)
#### Post date: [June 20, 2023, 7:35pm UTC](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619/20 "2023-06-20T19:35:12Z")

</div>

@Evgeni_Popov @Deltakosh  
The tests are saying that the methods on `Vector` do not exist. I can’t think of any reason why these errors are occuring. What do you think?

[Next page](https://forum.babylonjs.com/t/help-with-rendering-issue-pr/41619.md?page=2)
