tutorial - Learning OpenGL from your browser

Hello,

I am writing a down-to-earth tutorial to learn modern OpenGL from your browser.
It will be somehow finished in about a week.

This is a good starting point to understand some 3d terms if you want then to explore this part of the code :

Do not hesitate to leave comments directly inside the document

p.s: sorry in advance for any typos, not a native english speaker !

Hi Ruddy, thanks for your stusdes on WebGl.

I try some code and get this :

test webGL on opera 46.0 windows 10

test ch 3.5. Code sample page 11

VM299:14 Uncaught ReferenceError: canvas is not defined
at <anonymous>:14:1

4.3. Code sample page 15
Paste code 3.5, then the following one :

VM457:14 Uncaught ReferenceError: canvas is not defined
at <anonymous>:14:1

5.3. Code sample page 18
VM547:42 Uncaught TypeError: Cannot read property ‘VERTEX_SHADER’ of null
at createProgram (<anonymous>:42:58)
at <anonymous>:20:11

Jolo

Hi
I make a new test (Ruddy send me some precision)

If you just want to make some code test :

  1. you need a blank page ( www.blank.page) (an empty page with no url don’t work, Nor “not empty” page)

  2. on the blank page you run the console (Shift Crtl I on opera 48)

  3. get the code on Ruddy’s link
    select and copy : page 11 (date 21/10/2017 : text may evolve => paragraph : 3.5. Code sample)

  4. paste code in the console
    enter

and you the see the result on the www.blank.org page.

    on firefox 55 you need to write : Allow pasting on the console    to be allowed to past ...

That 's a good starting point to manage 3D graphics on webpage.

Thank’s for Ruddy’s work

Jolo

Hi Jolo,

Thanks for your testing and kind words! Will continue to update this document as soon as i find some time !
Will also port the examples to my github repository.
Do not hesitate to ask questions overthere !

Best regards

p.s: OpenGL 3.0 for the web aka WebGL2 is to be supported by nearly every major browser, except Microsoft Edge which say “probably yes” but takes its time for 3 years…
Please vote here to make them understand that this would be extremely nice for a modern web experience :