Jump to content

Texture Generator De Luxe


Recommended Posts

It's a pleasure to announce a texture generator  "TexGen" to be used by BABYLON developers. Due to the excellent work of @NasimiAsl 's ShaderBuilder it's possible to build a somewhat generic shader and inject the  runtime properties (uniforms) on the fly. I've designed a shader-script which takes altenative inputs, generates artificial normal maps, mixes with another optionally image and outputs a really nice 3D look of the (flat) inputs. Live system available HERE (updated)

Key featuers:

  • Alternative input sources: PatternGenerator, NoiseGenerator and plain image
  • No need for normal maps, they will be generated on the fly by the shader
  • pattern generator on the javascript side, once generated => turbo speed on the shader side
  • noise generator on the javascript side (Perlin,Fractal,Turbulence), once generated => turbo speed on the shader side
  • Preset concept, all shader/pattern/noise-parameters can be reduced to a handful numerical settings (JSON-Format)
  • Full procedural, images can be mixed optionally


Here are some preset patterns from the noise generator and some other Examples.

I hope you find this interesting...



PS. a short description to the LIVE-System (from right to left): on the upper right you find a slider with three input-sources. The next menu are the properties for the pattern generator. On thenext  menu are the shader properties mainly for the normal map creation and a slider "balance" where you can mix another image to the input. And on the left side is the noise menu (I prefer preset9 :) ), there are endless more to be detected...




Full procedural image with noise:


Mixed with another image:


Input source: single image!


Input source: pattern generator


Noise mixed with image:


Link to comment
Share on other sites

@Deltakosh thank you, I'm not sure because Texture Generator consists of two parts: the editor/generator and the corresponding shader-script . Both have dependencies to the  ShaderBuilder which isn't an official extension yet. Suggestions are welcome :)

Here is the amost finished version of the editor (it's a plain BABYLON application). The interface for using the generated output is very straight forward:

@NasimiAsl FYI

var shaderparams = { stepx: 0.005, stepy: 0.005, invR: false,.... // shader parameters
shaderparams.texGen = dynTexGen; //generator texture, image generated from TextureEditor
shaderparams.texMix = dynTexMix; //mixer texture, image generated from TextureEditor
box.material = compoundShader(shaderparams).BuildMaterial(scene);

You can play with the Texture Editor (version alpha) HERE.





Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...