WebGL: INVALID_VALUE: texImage2D: no image data
Uncaught (in promise) DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

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,

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.

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.

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;
}

createTexture(gl, source, i) has a responsibility of creating GL Texture object with source data. creating texture object can be done even if the source is null, except calling texImage2D which is for uploading the buffer data to gpu memory.

Fix solving this issue: https://github.com/codrops/RainEffect/issues/11

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.

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

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!