GridMaterial colored axis?

lluull · July 1, 2019, 2:29pm

Hi here,

the GridMaterial exploration continue.
do is possible to have only the two main lines color as red for the x axis and blue for the z axis ?

this time i do not provide any scene exemple because i am like without any imaginative ideas to how approach this using the GridMaterial.

thx.

Wingnut · July 1, 2019, 3:00pm

Hi lluull. SOME people do this…

https://www.babylonjs-playground.com/#1VFIK2#3 (lines 22-37)… coded by someone else.

I added the .001 values to all the Y values on the points… to make sure the axes lines were slightly above the ground… avoids any possible “z-fighting” problems. I don’t think there is a built-into-gridMaterial way to do this… but others might comment soon… with better ideas.

lluull · July 1, 2019, 5:17pm

Hi Wingnut,

thx for the answer.

yep of course, there is alway a way to create additional lines and manage them any time some changes are made to main grid (scaling, change global to local etc…).

i was hoping because we have this nice grid plane and material, it be nice to have also built in axis color with some minimal dedicate methode.

who know, maybe is a good ideas for future version of this great engine.

ps: i hope so the dev’s team see this

Deltakosh · July 1, 2019, 5:29pm

Hey this could be a good opportunity to do a PR

github.com

BabylonJS/Babylon.js/blob/master/materialsLibrary/src/grid/gridMaterial.ts

import { serializeAsTexture, serialize, expandToProperty, serializeAsColor3, SerializationHelper } from "babylonjs/Misc/decorators";
import { Color3, Vector3, Vector4, Matrix } from "babylonjs/Maths/math";
import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
import { MaterialDefines } from "babylonjs/Materials/materialDefines";
import { MaterialHelper } from "babylonjs/Materials/materialHelper";
import { PushMaterial } from "babylonjs/Materials/pushMaterial";
import { MaterialFlags } from "babylonjs/Materials/materialFlags";
import { VertexBuffer } from "babylonjs/Meshes/buffer";
import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
import { SubMesh } from "babylonjs/Meshes/subMesh";
import { Mesh } from "babylonjs/Meshes/mesh";
import { Scene } from "babylonjs/scene";
import { _TypeStore } from 'babylonjs/Misc/typeStore';

import "./grid.fragment";
import "./grid.vertex";

class GridMaterialDefines extends MaterialDefines {
    public OPACITY = false;
    public TRANSPARENT = false;

This file has been truncated. show original

Pinging @sebavan as he wrote the initial material to see if he has ideas on how to do it fast

sebavan · July 1, 2019, 6:55pm

not sure there is an easy way, @Wingnut answers is probably the easiest

Topic		Replies	Views
Grid Material opacity/visibility Questions	6	548	October 13, 2020
Fix for GridMaterial's bright line intersections Feature requests	8	1010	April 6, 2022
BABYLON.GridMaterial() is not a constructor Questions material	2	2073	February 19, 2021
Help with GridHelper - 3d coordinates Questions	2	635	June 21, 2021
Ability to change line material (eg.: for animated line shader) Feature requests material , shader	8	615	February 24, 2021

GridMaterial colored axis?

Related Topics