Dear Lucas:

First of all, let me congratulation you for such an excellent concept and implementation.

I'd like to use your code in a development in the way shown in the Demo 2. The point would be to have the webgl-engine running the water animations at the main screen.

The case is that my development is done with the help of jQuery Mobile, using a multi-page schema, that is, I have only one html document with all the pages in it (including the referred main page).

Due to this architecture I'm concerned about if "raineffect" will keep on running even when not shown (and so using valuable resources). If that is the case, is there any API which I can call in order to stop resume the water animation?

Best regards.

Error: Uncaught (in promise) TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': No function was found that matched the signature provided.
Shows a black background.

Chrome version: 56.0.2924.87 (64-bit)
OS: OSX 10.9.5
Confirmed does not work on windows.

Hello and thanks for this amazing experiment. One small problem: if I change the js files to the non-minified version to play around, the code doesn't work. For example, if I change index3.html to load index3.js instead of index3.min.js, there is an error thrown in Chrome (below).

webgl.js:96 Uncaught (in promise) TypeError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': No function was found that matched the signature provided. at updateTexture (webgl.js:96) at Object.createTexture (webgl.js:84) at GL.createTexture (gl-obj.js:31) at RainRenderer.init (rain-renderer.js:65) at new RainRenderer (rain-renderer.js:27) at init (index3.js:74) at index3.js:39

I HAVE DOWNLOADED ALL FILES IN ZIP FORMAT BUT WHEN I OPEN THEM INTO BROWSER IT DOESN'T WORK

why they are different?

src/shaders/simple.vert

precision mediump float;

attribute vec2 a_position;

void main() {
   gl_Position = vec4(a_position,0.0,1.0);
}

but demo/js/index.js

#define GLSLIFY 1
precision mediump float;

attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_resolution;

varying vec2 v_texCoord;
varying vec2 v_resolution;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

   // pass the texCoord to the fragment shader
   // The GPU will interpolate this value between points.
   v_texCoord = a_texCoord;
   v_resolution = u_resolution;
}

Thank you!
This is the best thing I've ever seen on the Internet.
I posted this on the site:
f5 - scene change.
LMB - video sound.
pic
http://vvl99.narod.ru/RainEffect/index.html
720p
http://vvl99.narod.ru/RainEffect/index5.html
360p
http://vvl99.narod.ru/RainEffect/index4.html

Your work has made me happier, thank you.

Hello,

I just seen that the effect is no longer working on Firefox ( I get a black screen )

Console error : TypeError: Argument 6 is not valid for any of the 6-argument overloads of WebGLRenderingContext.texImage2D.

Hey guys,
Thank you for this spectacular thing))

So, why not create New-tab Chrome extension with real weather data and possibility to change background?

If you'll create a project for that I'll be glad to contribute.

Hi Guys!

I'm wondering how to increase the resolution of the background picture, because it's pixelated for now.

I remember have found the solution last year but I can't find it anymore...

Thanks a lot!

Hi! I LOVE this effect, and I'm planning to adapt it for the web site of my upcoming indie game (with proper attribution of course).

However, I've run into a major roadblock: performance in desktop Safari (not mobile Safari!) is terrible, and I'm not sure what's causing it. It works great in Chrome and Firefox for macOS, and fantastic in mobile safari.

Could there be a way of "downgrading" the effect for Desktop Safari? Perhaps disabling retina resolution? Or would I have to disable it entirely?

Thanks for any advice and tips.

I have a reactJS project and I want to combine this with reactJS project of mine. How can I achieve this..?

Hey guys

Thank you for this project, it's great to see that rain effect in browser
Is there any chance to fix the web browser resize?

Thank you

I'd like to know how one could change the background image from the rain example Could you help with that. I've tried to by modifying the index.js file where textureRainBg and textureRainFg are created like so in the loadTextures function:

{ name: "textureRainFg", src: "img/weather/doc1.png" }

Doing so, i'm ending up with an error : "Failed to execute 'texImage2D' on 'WebGLRenderingContext': No function was found that matched the signature provided." I assumed the image i chose does not meet the requirements to use this function as its a jpeg transformed in a png by just changing the extension. Therefore, I've tried with proper png images, still same errors. Also I don't manage to see where this texImage2D function is called in the canvas creation process. Anyway, what one should use as an image to get it to work ? Where to learn about web gl to master this project ?

Many thanks.