question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Point material vertexColors not overwriting material.color

See original GitHub issue

When specifiying the vertexColors for Points the color is adding to the Material.color instead of overwriting it. Only way that material.vertexColors = THREE.VertexColors works is if material.color =“white”

///////////        I WORK      ////////////////
var starsGeometry = new THREE.BufferGeometry();

    
		var points =new Float32Array([1,1,1]);
    var Vcolor =new Float32Array([0,0,1]);
   

		starsGeometry.addAttribute('position', new THREE.BufferAttribute(points, 3));
		starsGeometry.addAttribute('color', new THREE.BufferAttribute(Vcolor, 3));
    
    var starsMaterial = new THREE.PointsMaterial( { color: 'white', vertexColors: THREE.VertexColors } );
		var starField = new THREE.Points( starsGeometry, starsMaterial );
///////////////////////////////////    I Black  /////////////////////////////////
     var starsGeometry2 = new THREE.BufferGeometry();


      var points2 =new Float32Array([2,1,1]);
      var Vcolor2 =new Float32Array([0,0,1]);
   

		starsGeometry2.addAttribute('position', new THREE.BufferAttribute(points2, 3));
		starsGeometry2.addAttribute('color', new THREE.BufferAttribute(Vcolor2, 3));
		var starsMaterial2 = new THREE.PointsMaterial( { color: 'red', vertexColors: THREE.VertexColors } );
		var starField2 = new THREE.Points( starsGeometry2, starsMaterial2 );
///////////////////////////////////    I Red   /////////////////////////////////
    var starsGeometry3 = new THREE.BufferGeometry();


      var points3 =new Float32Array([3,1,1]);
      var Vcolor3 =new Float32Array([0,0,1]);
   

		starsGeometry3.addAttribute('position', new THREE.BufferAttribute(points3, 3));
		starsGeometry3.addAttribute('color', new THREE.BufferAttribute(Vcolor3, 3));
		var starsMaterial3 = new THREE.PointsMaterial( { color: 'red' } );
		var starField3 = new THREE.Points( starsGeometry3, starsMaterial3 );

fiddle: https://jsfiddle.net/nvqropdr/

Three.js version
  • Dev
  • [x ] r92
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5

github_iconTop GitHub Comments

2reactions
donmccurdycommented, May 24, 2018

Is there a general reason for this multiplication(tinting) instead of overwriting?

That multiplication is used by 3D formats imported from modeling tools, and enables various effects. material.color * vertex.color * texture.color allows any of those to modulate the others without requiring too many textures or meshes. If you want vertex colors to be the only colors used, set the material color to white.

0reactions
kpetrowcommented, May 23, 2018

@WestLangley Any chance you could answer this question:

Is there a general reason for this multiplication(tinting) instead of overwriting?

I spent a couple minutes of my time writing this up and think that an overwrite might be a valuable feature.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material#vertexColors – three.js docs
If the material's transparent property is not set to true , the material will remain fully opaque and this value will only affect...
Read more >
Vertex Colors are changing to white - Stack Overflow
Points (geometry, materials);. I am basically setting the mesh color to a uniform value unless I have defined per point colors - then...
Read more >
Changing vertex colors based on mesh proximity? - Unity Forum
1: Changes done by the C# script will not be visible on the Material asset itself, because Material Property Blocks only change the...
Read more >
Vertex Color Materials | Unreal Engine 4.27 Documentation
This page describes how to set up materials that utilize Vertex Color so that you can paint colors in Mesh Paint Mode.
Read more >
Using shaders to apply color in WebGL - Web APIs | MDN
The first thing to do is to establish these colors for the four vertices. To do this, we first need to create an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found