DEV Community

Cover image for WebGL point sprites, a tutorial

WebGL point sprites, a tutorial

Sam Thorogood on February 06, 2019

Over the past few days, I've been experimenting with WebGL, which is OpenGL from your browser. Personally, I want to build something which lets me ...
Collapse
 
cyring profile image
CYRIL INGENIERIE

Very good, thank you.
A while a go, I have integrate these WebGL primitives from a php WordPress server.

blog.cyring.free.fr/?page_id=4496&...

blog.cyring.free.fr/?page_id=4576&...

The goal was to source coordinates and textures from the html page.

Let me know if you are interested by the source code

Collapse
 
pinacolada profile image
Pina Colada

Hello,
This was a great great tutorial. Thank you :)
I would like to understand why you create a buffer of 500 floats ?
Where is this buffer used in the program ?
And... please write some other WebGL tutorials.
(Sorry for my english.)

Collapse
 
samthor profile image
Sam Thorogood

So the buffer is new Float32Array(1000);, it actually takes 1000 floats.

But since it's used to provide a vec2, an x,y vector, then it supports 500 sprites.

The "500" is just a random number. The demo will fail if you try to add more than 500 images. If you wanted to support any number of sprites, you'd have to create a new, larger array when the original ran out of space.

Also, thanks, I'm glad you enjoyed the article!

Collapse
 
pinacolada profile image
Pina Colada

Understood. Thank you this explanation.

Collapse
 
letochagone profile image
Letocha Torgue Philippe

By default, webgl treats colors as premultiplied.
here the "icon" image is not premultiplied. So you have to add the line
gl_FragColor.rgb *= gl_FragColor.a
if we don't, here is the result, note the white limit at the intersections of the icons
Image description

if we add this line, we see a better result :

void main() {
gl_FragColor = texture2D(spriteTexture, gl_PointCoord);
gl_FragColor.rgb *= gl_FragColor.a;
}

Image description

Collapse
 
maniflames profile image
Maniflames

I'm definitely in for more OpenGL/WebGL!

Collapse
 
nontangential profile image
nontangential

excellent post, exactly what i needed, thank you a lot!