Unlit mesh color is brighter than it should be

[lovelle-cardoso]

I'm trying to make a cube mesh the same color as a sprite in the scene, but the color of the Mesh3D is slightly brighter than the Sprite3D despite them being set to the same exact color.

Here's a simple reproduction case with a Mesh3D cube and Sprite3D square set to the same color of blue:

import { Application, Texture } from "pixi.js";
import { Mesh3D, Color, Sprite3D } from "pixi3d";

let app = new Application({
  backgroundColor: 0xffffff,
  resizeTo: window,
  antialias: true
});

document.body.appendChild(app.view);

let color = 0x33BBFF;

let sprite = app.stage.addChild(new Sprite3D(Texture.WHITE));
sprite.position.z = 4;
sprite.tint = color;

let mesh = app.stage.addChild(Mesh3D.createCube());
mesh.material.unlit = true;
mesh.material.baseColor = Color.fromHex(color);

let rotation = 0;
app.ticker.add(() => {
  mesh.rotationQuaternion.setEulerAngles(0, rotation++, 0);
});

[jnsmalm]

Thanks, I'll take a look

[jnsmalm]

Should be fixed in next release.

[lovelle-cardoso]

@jnsmalm Thanks!

[jnsmalm]

@lovelle-cardoso Let me know if this works as it should in version 2.3.0

[lovelle-cardoso]

@jnsmalm Hm I seem to get an error for any mesh that isn't a cube-geometry mesh (like sphere, circle, or cylinder).

Uncaught Error: shader and geometry incompatible, geometry missing the "a_Tangent" attribute

I think this is because sphere-geometry, cylinder-geometry, circle-geometry don't have a "tangents" property like cube-geometry does.

[jnsmalm]

Do you do anything special than just rendering the meshes?

[lovelle-cardoso]

@jnsmalm I am running pixi7 so perhaps its a compatibility issue? The error is originating from @pixi/core 's GeometrySystem.checkCompatibility method.

Here's the full stack trace:

GeometrySystem.mjs?c253:88 Uncaught Error: shader and geometry incompatible, geometry missing the "a_Tangent" attribute
    at GeometrySystem.checkCompatibility (GeometrySystem.mjs?c253:88:1)
    at GeometrySystem.initGeometryVao (GeometrySystem.mjs?c253:111:1)
    at GeometrySystem.bind (GeometrySystem.mjs?c253:60:1)
    at StandardShader.render (pixi3d.js?3e52:4295:1)
    at StandardShader.render (pixi3d.js?3e52:4508:1)
    at StandardMaterial.render (pixi3d.js?3e52:4570:1)
    at StandardMaterial.render (pixi3d.js?3e52:5126:1)
    at MaterialRenderPass.render (pixi3d.js?3e52:6526:1)
    at StandardPipeline.flush (pixi3d.js?3e52:6971:1)
    at ObjectRendererSystem.render (ObjectRendererSystem.mjs?7d3e:40:1)
    at _Renderer.render (Renderer.mjs?5786:74:1)
    at Version700.render (pixi3d.js?3e52:60:1)
    at CompositeSprite.renderObject (pixi3d.js?3e52:7687:1)
    at CompositeSprite._tickerRender [as fn] (pixi3d.js?3e52:7665:1)
    at TickerListener.emit (TickerListener.mjs?ec71:19:1)
    at _Ticker.update (Ticker.mjs?e45e:144:1)
    at _tick (Ticker.mjs?e45e:22:1)
checkCompatibility @ GeometrySystem.mjs?c253:88
initGeometryVao @ GeometrySystem.mjs?c253:111
bind @ GeometrySystem.mjs?c253:60
render @ pixi3d.js?3e52:4295
render @ pixi3d.js?3e52:4508
render @ pixi3d.js?3e52:4570
render @ pixi3d.js?3e52:5126
render @ pixi3d.js?3e52:6526
flush @ pixi3d.js?3e52:6971
render @ ObjectRendererSystem.mjs?7d3e:40
render @ Renderer.mjs?5786:74
render @ pixi3d.js?3e52:60
renderObject @ pixi3d.js?3e52:7687
CompositeSprite._tickerRender @ pixi3d.js?3e52:7665
emit @ TickerListener.mjs?ec71:19
update @ Ticker.mjs?e45e:144
_tick @ Ticker.mjs?e45e:22
requestAnimationFrame (async)
_tick @ Ticker.mjs?e45e:24
requestAnimationFrame (async)
_tick @ Ticker.mjs?e45e:24
requestAnimationFrame (async)
_tick @ Ticker.mjs?e45e:24
requestAnimationFrame (async)
_tick @ Ticker.mjs?e45e:24
requestAnimationFrame (async)
_tick @ Ticker.mjs?e45e:24
requestAnimationFrame (async)
_tick @ Ticker.mjs?e45e:24
requestAnimationFrame (async)
_requestIfNeeded @ Ticker.mjs?e45e:33
start @ Ticker.mjs?e45e:104
_startIfPossible @ Ticker.mjs?e45e:46
_addListener @ Ticker.mjs?e45e:73
add @ Ticker.mjs?e45e:50
PickingInteraction @ pixi3d.js?3e52:7420
init @ PluginSystem.mjs?fd09:35
emit @ Runner.mjs?a8d9:14
run @ StartupSystem.mjs?cf29:9
_Renderer @ Renderer.mjs?5786:65
autoDetectRenderer @ autoDetectRenderer.mjs?5821:8
_Application @ Application.mjs?89af:10
Application @ Application.ts?15e4:42

[jnsmalm]

@lovelle-cardoso I have tested it for all PixiJS versions from 5.3. Could you please provide some code which reproduces this error?

[lovelle-cardoso]

@jnsmalm I wasn't able to reproduce it after updating from pixi 7.1.0 to pixi 7.2.0. So I think you can close this!