New Error with THREE.js r69+

[titansoftime]

Hi Jbouny,

After upgrading to r69 (and r70dev) I get the following error: "[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source and destination textures of the draw are the same."

The water still works just fine though =]

[dy-dx]

I am getting this as well, but with THREE.js 66 (the one that is live on http://jeremybouny.fr/ocean/demo/) on Chrome 40, OSX 10.10.

But Firefox 34 & Safari 8 work fine.

[titansoftime]

It seems this error no longer exists in the current version of chrome. Must have been a browser bug. Closing.

[fweibel]

Hi !

It seems that there has been a chrome upgrade (last night I think..) and the error came back. The ocean is working fine, but he console throw this message

"[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source and destination textures of the draw are the same."

THREE r68, Chrome 40.0.2214.91 m

[titansoftime]

Indeed it did. This is a chrome bug methinks. Wondering how to word it for a bug report.

[dy-dx]

Not a "bug," though it is annoying: https://code.google.com/p/chromium/issues/detail?id=421695

[jamespantalones]

+1

[jbouny]

Same problem with the mirror example: http://threejs.org/examples/#webgl_mirror

I try to see if can do something. Thanks for the report to chromium!

[mcanet]

In Firefox error is different with Three.js r70:
Error: WebGL: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once) three.min.js:546:371

[SimoneGianni]

I think I found a workaround to this. IIUC, the problem is basically this :

• The is the scene
• In the scene there is the water plane
• It has the texture on it
• The water material renders the scene, from a different point of view, in the texture
• But when this happens, the texture is in the scene
• WebGL complains that it has to read and write from the same texture

My current workaround is as follows :

• I create a dummyTexture, along with texture and tempTexture; a WebGLRenderTarget of size 1x1 seems to work.
• I replace the material texture (altering the uniforms) just before rendering the mirrored image
• This way, the scene doe snot contain the same texture it is rendering to
• I put back the texture in the (setting it back in the uniforms) after the rendering is complete.

So basically, lines around 353 becomes :

// Remove the texture from the scene
this.material.uniforms.mirrorSampler.value = this.dummyTexture;

var renderTexture = (isTempTexture !== undefined && isTempTexture)? this.tempTexture : this.texture;
this.renderer.render(this.scene, this.mirrorCamera, renderTexture, true);

// Set back the texture
this.material.uniforms.mirrorSampler.value = this.texture;

Let me know if this helps out!

[jbouny]

You are right. It is so nice to have a clean console! Thank you for your clear explanations.

With a dummy texture, it works.

[leo-cheron]

Nulling this.material.uniforms.mirrorSampler.value before rendering should work. No need for dummy texture here.

[fweibel]

Simply nulling the texture also work for me :) Thanks for the solutions

[jbouny]

This doesn't work for me.
If I set mirrorSampler.value to null, it gives me the same error: "Source and destination textures of the draw are the same".
On chrome 45.0 on Windows 8.1.
I will try to investigate.

[titansoftime]

I updated the ocean shader sample at three.js to incorporate fog and side support. Works perfect(at least for me) from the latest master build (72). No dummy or null required.

[jbouny]

There are some differences between the implementation on this repo and the three.js example. I know it is not cool.

In any cases, nice work @titansoftime (and congratulations for the release of your game :) ).

The right solution (for me?) was in the ocean shader sample at three.js. It uses a visibility flag instead of a dummy texture.

[titansoftime]

@jbouny Thank you x 2 =]