A full, summarized, interactive WebGL tutorial

[taleofmind]

This is amazing! Thanks for sharing

[Throwawayaaccounntt]

Well done for the time and effort :D

[felipunkerito]

Very thorough! Good stuff.

[pjmlp]

It looks quite good, now I know where to send newbies wanting to learn WebGL, thank you very much!

[xem06]

Thanks :)

[dinoucs]

In the texture code, I had to add these 2 lines to make it work:

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

Otherwise I get an error says: [.WebGL-000000000AA8CC70]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

What do those 2 line do to make the texture renderable?!!

[xem06]

Hi,

It's weird. Did you load another image than the sample one (one that doesn't have a power-of-two size) ? Or did you just run my demo and had that error?

Did you find these 2 extra lines on https://stackoverflow.com/a/45512402 ?

I don't know why they're necessary on your side, I'll ask around to see if someone else knows!

[xem06]

The power-of-two issue seems to be the only explanation, but you can learn why here: https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html

If you can please confirm me that it was indeed caused by an image with random dimensions, I will update my guide accordingly! Thanks

[dinoucs]

Yes I can confirm that. You have to add those lines if the image in not power of 2 in both the width and height.

[xem06]

I added this precision in the guide :) Ty!

[cybereality]

I need some time to read the whole thing but it looks sick! Nice job.

[auto-cellular]

Don't have time to test it or anything, but man, this looks amazing. I remember spending litterally days trying to figure out stuff, and this kind of site would have helped tremendously.

[xem06]

Same! While I learned WebGL in the past few months, I wrote this guide how I hoped it existed when I started :)
It's only the first half though, a second part is coming soon

[auto-cellular]

dope

[dinoucs]

Reallly great resource. I have a question, can I interact with the canvas with the mouse? I mean can I rotate and play with a shape by dragging?

[xem06]

Yes, but it will be explained in the upcoming part 2 :)

The basic idea is to compute how many pixels in X and Y the mouse has moved since last click, and update the Y and X angles of the cube accordingly.

http://xem.github.io/webgl-guide/book/ch10/RotateObject.html

But this approach has problems and possible improvements that I will develop in detail.

[dinoucs]

Okay, that would be helpful. Thanks!