Switch CanvasRenderer demo to WebGLRenderer results in errors [SOLVED]

Questions
,
1

Hello,

I would like to take the example here:
https://threejs.org/examples/?q=canvas#canvas_particles_waves

And use it with the WebGLRenderer, by changing:

renderer = new THREE.CanvasRenderer();

to

renderer = new THREE.WebGLRenderer();

So that I can combine this effect with another that is already using WebGL.

However, doing so results in errors with the particles being rendered, like so:

three.js:18501 Uncaught TypeError: Cannot read property 'offset' of undefined at WebGLSpriteRenderer.render (three.js:18501) at WebGLRenderer.render (three.js:22287) at render (canvas_particles_waves.html:184) at animate (canvas_particles_waves.html:157)

Any ideas?

Thanks so much!

2

Nevermind, I got it working!

The CanvasRenderer demo draws its circles using 2D Canvas drawing commands, like so:

var material = new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: function ( context ) { context.beginPath(); context.arc( 0, 0, 0.5, 0, PI2, true ); context.fill(); } });

2D drawing commands like that don’t translate to 3D WebGL, so I replaced this with:

var geometry = new THREE.SphereGeometry( 5, 32, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );

And directly below that in the nested for loop, the first line becomes:

particle = particles[ i ++ ] = new THREE.Mesh( geometry, material );

That’s it! Everything else works as is.

3

Crossposting:

4

Hi there, is crossposting discouraged? Since stackoverflow is a totally separate website I didn’t think of it.

Thanks

5

Many community members are active on both websites. So it should be sufficient if users just post at one place.

I understand that crossposting is beneficial for the OP since it’s easier to reach more people. On the other hand, it makes the support and maintenance only more complicated since the discussion is spread over multiple sites. Because of this, I personally refuse crossposting.

6

OK, understood.

By the way, here’s the particle wave canvas demo working in WebGL:
http://plu.sx/v2/

Code is here:

Now, I did get an optimization tip, which I’ll implement soon, from WestLangley on StackOverflow, but not here. So maybe crossposting should be allowed. Or maybe I’ll just post in one place first, wait a while, and if no responses, then try other sites.

Thanks,
Carlos