CustomProceduralTexture setting float uniform

Questions
1

Hi again!
I was looking for an example of passing a uniform float (“blend”) to a CustomProceduralTexture, as diffuseTexture for StandardMaterial

my custom.fragment.fx

#ifdef GL_ES
precision highp float;
#endif

varying vec2 vPosition;
varying vec2 vUV;

uniform sampler2D globeGrey;
uniform sampler2D globeGreen;
uniform float blend;

void main(void) {
 vec3 color = mix(texture2D(globeGrey, vUV).xyz, texture2D(globeGreen, vUV).xyz, blend);
 gl_FragColor = vec4(color, 1.0);
}

Can someone point me in the right direction/example? :slight_smile:

2

Hello you can have a look at some of our procedural textures like fire:

3

thanks @Deltakosh!

I started to see here
https://doc.babylonjs.com/how_to/how_to_use_procedural_textures#creating-custom-procedural-textures
creare

  • i’ve create config.json and custom.fragment.fx
  • but after many attempts I can not understand how to vary the uniforms declared (i’m using TweeMax)
4

you call myProceduralTexture.setFloat(name, value)

5

I did that, in fact. Should this be enough for see the fragment update ? does not happen :frowning:
here my config json

{
    "animate": true,
    "refreshrate": 1,
    "uniforms": [
     {
         "type": "float",
         "name": "blend",
         "value": "0.0"
     }
 ],
    "sampler2Ds": [
     {
         "sample2Dname": "globeGrey",
         "textureRelativeUrl": "globe-bw-cacaca.jpg"
     },
     {
         "sample2Dname": "globeGreen",
         "textureRelativeUrl": "globe-bw-green.jpg"
     }
    ]
   }

if I change the value of the uniform in config.json is correctly detected and applied

6

solved!

here my tweening

TweenMax.to(this.blendTexture, this.timeOverPointer * 0.5, {
          value: 1,
          onUpdate: tween => { this.material.diffuseTexture.setFloat('blend', tween.target.value) },
          onUpdateParams: ["{self}"]
    })

but it works if in config.json "animate": false

7

makes sense! thanks for getting back to us :slight_smile:

1 Like