Creating custom material with babylon in npm

breakin · February 11, 2020, 12:43pm

Hello. First post here!

I’ve been trying to follow the guide at Create a Material for the Materials Library - Babylon.js Documentation.

Doing that is a bit akward since I use babylon using npm so I can’t change the material library there. Instead I need to clone a fresh babylon and do my work there to produce a new material library. I build it using gulp. However I am having issues using it (my own material library) from typescript.

My question then; Is there an example where a custom material is added outside of the babylon source code? Preferably in typescript.

If not, is there an example that does what I tried above succeesfully? I ran into issues with importing modules but it might be due to my inexperience with typescript. If this is the way to do it I can show the exact issues I am running into (if there is no example to look at).

Cheers!

Deltakosh · February 11, 2020, 5:06pm

Hey!

You actually need nothing more than this file:

github.com

BabylonJS/Babylon.js/blob/master/materialsLibrary/src/simple/simpleMaterial.ts

import { Nullable } from "babylonjs/types";
import { serializeAsTexture, serialize, expandToProperty, serializeAsColor3, SerializationHelper } from "babylonjs/Misc/decorators";
import { Matrix } from "babylonjs/Maths/math.vector";
import { Color3 } from "babylonjs/Maths/math.color";
import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
import { IEffectCreationOptions } from "babylonjs/Materials/effect";
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 "./simple.fragment";
import "./simple.vertex";

This file has been truncated. show original

The only change you need is to provide the shader code as a text

Other option is to use:

NME: How To use the Node Material - Babylon.js Documentation
or ShaderMaterial: Use ShaderMaterial - Babylon.js Documentation

breakin · February 11, 2020, 9:00pm

Oh. I was trying that but did not think it would work out in the end. That is encouraging!

Will that work even if the shaders (in text) uses include? To me it seems that the build steps that process the fx-files does quite a bit of work that I am not sure would work without it.

My goal is to clone the pbr material since I need to change it in ways that is not currently possible so we are not talking about short shaders snippets I am afraid So using includes would help.

Thanks for you help so far. I am trying on my side to understand what is possible.

Evgeni_Popov · February 12, 2020, 12:22am

Have you tried PBRCustomMaterial?

https://doc.babylonjs.com/api/classes/babylon.pbrcustommaterial

https://www.babylonjs-playground.com/#LIVRIY#11
https://www.babylonjs-playground.com/#VGWB9T#5

breakin · February 12, 2020, 8:01am

Hi Evgeni,

I’ve seen it and I came to the conclusion that I would need to customize the shader more than what it allowed for. I was thinking of copying it and then adding mechanism for adding custom shaders anywhere (not only at the CUSTOM-defined points), but that would be very brittle when we change the babylon version and the PBR-material shader source is changed. Will try the other approach some more!

Topic		Replies	Views
CustomMaterial in babylonjs-materials not recognnized as part of BABYLON namespace Bugs	1	16	July 7, 2024
Babylonjs-materials CustomMaterial documentation is missing. Is it still supported? Alternatives? Questions	5	684	March 2, 2022
Referencing the 'babylonjs-materials' dependency in the react project and using 'CustomMaterial'? Questions	1	379	April 9, 2020
Trouble with importing NodeMaterial to the local project, Noob question : ) Questions	2	416	March 13, 2020
Can't import GridMaterials in latest Babylon in NextJS + Typescript - Example Repo Questions documentation , material	21	1151	July 24, 2023

Creating custom material with babylon in npm

Related topics