0

I'm finding the way to create some noise in WEBGL shaders. Some noise for vertex displacement or colors randomization inside shader itself. I want to have it inside a shader in order to not consider what i'm rendering. Just to make current fragment color randomized or vertex position moved a bit.

You can see my shaders code here: https://github.com/rantiev/webgl-learning/blob/master/stars/index.html

It's plain simple shaders:

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;    
    varying vec2 vTextureCoord;    
    uniform sampler2D uSampler;    
    uniform vec3 uColor;    
    void main(void) {
        vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }   
</script>
Rantiev
  • 2,121
  • 2
  • 32
  • 56
  • 2
    A quick google for "GLSL noise" brings up lots of them. [These ones on stackoverflow for example](http://stackoverflow.com/questions/4200224/random-noise-functions-for-glsl). [This article from the Book of Shaders](https://thebookofshaders.com/11/). Searching shadertoy.com also brings up [lots of examples](https://www.shadertoy.com/results?query=noise) – gman Sep 15 '16 at 01:24
  • 1
    [Here](https://github.com/ashima/webgl-noise) is a great repository with several kinds of noise functions which do not require an textures or other uniform inputs. Each file is fully self-sufficient. Just copy-paste the entire file into your shader and enjoy. – Sergey Sep 15 '16 at 05:01
  • Thanks guys. I'm talking about WEBGL, looking to these links you proposed (which i saw before) i got even more questions. What is .glsl files etc. I want to add noise into shader script in HTML. I think it's possible without any .glsl files c++ samples and other crazy stuff. I might be wrong - novice to WEBGL. – Rantiev Sep 15 '16 at 18:10
  • Thanks, Ah now i see that i can use .glsl, thought it has nothing to do with WEBGL. – Rantiev Sep 15 '16 at 22:31

1 Answers1

1

Here is one way to do it:

First, we calculate a screen space uv by dividing gl_Position.xy by gl_Position.ww and remap it from (-1, +1) to (0 to 1).

vec4 projCoords = projection * view * model * attr_pos;

vec2 screenUV = projCoords.xy/projCoords.ww; // (from -1 to 1)
screenUV = screenUV * 0.5 + 0.5; // remap to (0 to 1)

Then with this uv we can apply a screen space noise via either a random texture or some math calculation in the shader. Assuming that you generated a random texture, then noise is simply:

vec4 noise = texture2D(u_randomTexture, screenUV);

If you want to use calculations in the shader, look into implementing something like perlin2D noise or perhaps search in shadertoy.

WacławJasper
  • 3,284
  • 14
  • 19
  • Yep, i want indeed calculations inside a shader itself. And still has no idea how shadertoy can help. Have no clue, because in shader toy we have no vertex/fragment shaders, we have one piece of code which i can't use in javascript. – Rantiev Sep 15 '16 at 18:34
  • Ah now i got your idea, have it working. Though using of gl_Position didn't give any randomization, i didn't use random texture, want to go without any other textures connection. Is any possibility to use functions like Math.random() from js or any other language? – Rantiev Sep 15 '16 at 18:47
  • No. EL5: What you do is copy and paste say https://github.com/ashima/webgl-noise/blob/master/src/noise2D.glsl into shader then calculate noise as `float noise = snoise(screenUV); ` – WacławJasper Sep 15 '16 at 19:10
  • Great, Thanks. I seemed that i can't use .glsl, i thought i need to connect these files anyhow or upload to any browser or system folder etc. – Rantiev Sep 15 '16 at 22:32