Several small issues with Color3 and Color4

axeljaeger · April 5, 2022, 7:45pm

Hi,
I am working on an application that heavily uses thin instances, so I am filling a lot buffers. I found 2 issues while doing this:

Color3 and Color4.asArray are slow:
I tried filling a buffer using Color4.asArray and found out it is quite slow. Looking at the implementation, it creates first an array and then uses its internal toArray method to fill the array. I havent looked in detail why they are so slow, but I expect that writing to an array with zero elements, i.e. writing beyond the array end is slow.

Color3:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Maths/math.color.ts#L99

      
        
             * @returns a new Color4 object

             */

            public toColor4(alpha: number = 1): Color4 {

                return new Color4(this.r, this.g, this.b, alpha);

            }

            

            /**

             * Returns a new array populated with 3 numeric elements : red, green and blue values

             * @returns the new array

             */

            public asArray(): number[] {

                const result = new Array<number>();

                this.toArray(result, 0);

                return result;

            }

            

            /**

             * Returns the luminance value

             * @returns a float value

             */

            public toLuminance(): number {

Color4:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Maths/math.color.ts#L725

      
        
                this.g += right.g;

                this.b += right.b;

                this.a += right.a;

                return this;

            }

            

            /**

             * Creates a new array populated with 4 numeric elements : red, green, blue, alpha values

             * @returns the new array

             */

            public asArray(): number[] {

                const result = new Array<number>();

                this.toArray(result, 0);

                return result;

            }

            

            /**

             * Stores from the starting index in the given array the Color4 successive values

             * @param array defines the array where to store the r,g,b components

             * @param index defines an optional index in the target array to define where to start storing values

             * @returns the current Color4 object

My suggestion is to replace the implementation with a simple
return [this.r, this.g, this.b] and return [this.r, this.g, this.b, this.a]

Color3.toArray and Color.toArray accept different kinds of arrays, making the Color4 variant unusable for my usecase.

Color3 accepts a FloatArray:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Maths/math.color.ts#L67

      
        
            }

            

            // Operators

            

            /**

             * Stores in the given array from the given starting index the red, green, blue values as successive elements

             * @param array defines the array where to store the r,g,b components

             * @param index defines an optional index in the target array to define where to start storing values

             * @returns the current Color3 object

             */

            public toArray(array: FloatArray, index: number = 0): Color3 {

                array[index] = this.r;

                array[index + 1] = this.g;

                array[index + 2] = this.b;

            

                return this;

            }

            

            /**

             * Update the current color with values stored in an array from the starting index of the given array

             * @param array defines the source array

Color4 only accepts a plain array:

github.com

BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Maths/math.color.ts#L737

      
        
                this.toArray(result, 0);

                return result;

            }

            

            /**

             * Stores from the starting index in the given array the Color4 successive values

             * @param array defines the array where to store the r,g,b components

             * @param index defines an optional index in the target array to define where to start storing values

             * @returns the current Color4 object

             */

            public toArray(array: number[], index: number = 0): Color4 {

                array[index] = this.r;

                array[index + 1] = this.g;

                array[index + 2] = this.b;

                array[index + 3] = this.a;

                return this;

            }

            

            /**

             * Update the current color with values stored in an array from the starting index of the given array

             * @param array defines the source array

For my usecase of filling a Float32Buffer, I need the Color4-variant also accept a FloatArray. I think it is OK to just make both accept both types of array if there is a usecase for the plain array, otherwise, I vote for making the Color4 variant accept only a FloatArray.

Bonus suggestion:
There was a breaking change in Babylon 5: The behaviour of Color4.fromHexString was changed so that the alpha defaults to 1 if a hex string with only rgb is passed:

github.com/BabylonJS/Babylon.js

Color4.FromHexString default alpha to 1

BabylonJS:master ← BlakeOne:master

opened 01:12AM - 13 Nov 21 UTC

BlakeOne

+3 -2

Patch to default alpha to 1 when a 7 char hex string is passed to Color4.FromHex…String, to allow standard hex strings to be copied and pasted from color table websites, etc., more conveniently without having to add "ff" to the string each time. When an empty or invalid string is passed, all 4 components still default to 0, in keeping with the original behavior. Forum posts with more info on the use case for this are here: https://forum.babylonjs.com/t/default-alpha-to-1-for-color4-fromhexstring/25226/3

Lets add this behaviour in the description.

I am willing to open Bug reports and prepare pull requests if I get some positive feedback here. But I also do not mind if anyone takes over.

Best regards

Axel

sebavan · April 5, 2022, 9:00pm

Please feel free to create the PR for it It is amazing when the community is contributing

axeljaeger · April 5, 2022, 10:31pm

Did it: Fix Color3.asArray, Color4.asArray, Color4.toArray and docs for Color… by axeljaeger · Pull Request #12346 · BabylonJS/Babylon.js · GitHub

Topic		Replies	Views
Color4 properties Questions	3	1032	May 19, 2020
uniformBuffer.updateColor4 not working for material plugin Bugs material	3	251	June 21, 2022
FluidRenderer, customParticles, how to add colors from VertexBuffer Questions	2	140	January 30, 2023
[SOLVED] Performance issues with 4.0.0-beta.6...4.0.0-beta.7 Bugs	10	607	May 2, 2019
Re: ShaderMaterial and effects Bugs material	7	406	December 24, 2020

Several small issues with Color3 and Color4

Related Topics