Require Shader Editor to create custom WebGL Shader for BabylonJS

[PiyushBhalala]

Hello Community, 

Can anyone help me to find out the best shader editor for Babylon, I had found that ShaderFrog provides shader editor but it is targetting another engine, I would like to add it for BabylonJS.

Also please provide me some document reference to create a shader for WebGL, as I am a new learner for WebGL Shader and want to use in my App.

[Sebavan]

A good way to shader playing around: https://cyos.babylonjs.com/

Also I am always simply using the playground to create and play with shaders within a ShaderMaterial: https://doc.babylonjs.com/how_to/putting

Finally the playgrounds already existing will be your best friends: http://doc.babylonjs.com/playground/?code=ShaderMaterial

 

[SinhNQ]

Hi @PiyushBhalala

You can easy port shader code from ShaderFrog with Babylon.js engine.

1) Learn about the BABYLON.ShaderMaterial:

- A great tutorial using shader code in Babylon.js: https://babylonjsguide.github.io/advanced/Putting

- Document: http://doc.babylonjs.com/api/classes/babylon.shadermaterial

2) Port shader code from ShaderFrog:

 - Copy code from Fragment & Vertex tag.

- Convert uniforms name:  

The rules:

      + projectionMatrix -> projection

      + modelViewMatrix -> worldview

      + viewMatrix -> view

      + modelMatrix -> world

Full example : http://playground.babylonjs.com/#I423WZ

The above example has ported from: https://shaderfrog.com/app/view/2575

Hope this help you