Custom fragment shaders as textures to objects

I’m not sure I’m describing this quite right, but here’s what I’m trying to do: I want to be able to generate textures entirely within a fragment shader of a CustomShader, and then have them be applied to the object as if they were “normal” textures.

When I try to adapt dynamic fragment shaders from other code sources (like Shadertoy or whatever), I end up with a texture that doesn’t rotate or scale when I move the camera. Here is a really simple example I made where a random noise generation texture is being generated within the shader and being applied to a model:

In the above example (which is just a simple example, not a real implementation), I would want the noise texture to be applied to the surface of the balloon in the same way it would be if I had generated the noise file as PNG and then applied it as the texture to the model as a TextureUniform.

My ultimate goal is to have a fragment shader that can dynamically change itself (entirely within the shader, not by rendering a TextureUniform image and passing it to the shader) in an animated way, and look like it is the material surface of the object.

So in the above example, I would expect zooming in to make the individual pixels look larger, zooming out to make them smaller, etc. And in general it ought not look “flat” (like it does in the example) but like an applied texture (e.g., I want the noise to follow the contours of the balloon, not just be sort of superimposed on it).

It seems like this ought to be possible and that I’m just missing something obvious in my conversion of these shaders? Like using gl_FragCoord seems wrong, but I don’t know really what the alternative is (replacing it in the above example with fsInput.attributes.positionEC gives results that seem a little more dynamic, but still aren’t right).

I’ve looked at every Cesium CustomShader example I’ve been able to find and not found a good example of this kind of thing, though.

Thank you.

I’m not sure I really totally solved my problem but I did figure out what I was doing in wrong in that example!

The issue, as I suspected, was using gl_FragCoord for the coordinates. What I needed to use is fsInput.attributes.texCoord_0. So changing the line that references the position to that made it work. Here’s an example that shows both that it is able to position the texture and modify it along with a uniform changing (in a really ugly way, but just an example):

I still feel like I’m just probing the edges of this, so if there are other ways to do this better, I’m all ears!! :slight_smile:

Here’s a more interesting example of applying a fragment shader as a texture. Basically seems to work?

Looks awesome @Nucleon! Please let us know if you’re working on anything that can be shared publicly. We love to feature interesting Cesium use cases on our website!