Is Matrix Multiplication not Assosiative in Shaders?

Questions
, ,
1

First of all, I’m new in Computer Graphics, WebGL, ThreeJS… So I apologize if the problem is mine. Apparently inside shaders the matrix multiplication is not associative??

I have a model and I’m trying to apply two different materials at the same time: the material that its loaded by default with the model and another created with ShaderMaterial. I get different results when applying this two different formulas in my example:
Formula 1: gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); ----> The one in the documentation of ThreeJS
Formula 2: gl_Position = projectionMatrix * (modelViewMatrix * vec4( position, 1.0 ));

<script type="x-shader/x-vertex" id="vertexshader">

	void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

	void main() {     
            gl_FragColor =  vec4(255, 0, 0, 0.5);
	}

</script>

loadCarModelAddPoints() {
       this.materialpoints = new Three.ShaderMaterial( {
        vertexShader: document.getElementById( 'vertexshader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

        transparent: true,
        visible: true,
        side: Three.DoubleSide
      } );

      new MTLLoader()
	.setPath( 'models/modified_car_model/' )
	.load( 'car_model.mtl', ( materials ) => {

		materials.preload();

		new OBJLoader()
			.setMaterials( materials )
			.setPath( 'models/modified_car_model/' )
			.load( 'car_model.obj', ( obj ) => {

                const newcar = new Three.Group();                
                obj.traverse( ( child ) => {
                  if ( child.isMesh ) {
                    child.geometry.clearGroups()
                    child.geometry.addGroup( 0, Infinity, 0 )
                    child.geometry.addGroup( 0, Infinity, 1 )

                    child.material.flatShading = true
                    child.material.transparent = true
                    child.material.opacity = 0.9
                    child.material.side = Three.DoubleSide
                    child.material.depthWrite = true
                    child.material.color = new Three.Color( 0xA2B5BB )
                    child.material.visible = true

                    let newmesh = new Three.Mesh( child.geometry, [child.material, this.materialpoints])
                    newmesh.castShadow = true
                    newcar.add(newmesh);
                  }
                } );

                this.carModel = newcar

                let box = new Three.Box3().setFromObject( this.carModel )
                let size = new Three.Vector3()
                box.getSize(size)
                
                this.carModel.scale.setScalar(6/size.x)
                this.carModel.rotation.x = -Math.PI/2

                box = new Three.Box3().setFromObject( this.carModel )
                this.carModel.position.x -= Math.abs(box.min.x - box.max.x)/2 + 0.3

                box = new Three.Box3().setFromObject( this.carModel )
                const platformbox = new Three.Box3().setFromObject(this.platform)
                this.carModel.position.y = Math.abs(box.min.y) + Math.abs(platformbox.max.y)

                this.platform.add( this.carModel )
    }

When applying Formula 1 I get this results in the next picture, where it looks like the two materials are trying to overlap (it changes when camera position also change)

And when applying Formula 2 it gets fixed!

Diapositiva1
Diapositiva1643×651 59.2 KB

If the problem it’s mine, I hope I can get a solution. Thanks!