28

Is there some kind of WebGL manual that lists all the functions etc. ? I tried Google but found nothing.

skaffman
  • 381,978
  • 94
  • 789
  • 754
Martin
  • 700
  • 2
  • 11
  • 18
  • 4
    You mean something like this: https://www.khronos.org/registry/webgl/specs/1.0/ ? – Bart May 02 '11 at 09:09
  • This tutorial could help you a lot as it did in my case. http://www.webglacademy.com/ Here you could start from level 0. After completing this tutorial you could use Three.js library to enhance your WebGl content. https://threejs.org/examples/ !! All the best !! – Naman Gaur Sep 05 '17 at 06:14

8 Answers8

16

These two resources helped me a lot

Mozilla Devloper Pages

Great blog with lessons I followed!

Gustav
  • 1,363
  • 1
  • 12
  • 24
  • yes this is what I was looking for. Mozzila has a great refrence. thanks! – Martin May 02 '11 at 16:38
  • These are okay for the JavaScript side, how about help writing vertex/fragment shaders – Drew Sep 05 '11 at 14:06
  • A course I read in Linköping University (Sweden) has this http://webstaff.itn.liu.se/~stegu/TNM084-2010/GLSLfeatures-110.pdf as introduction to GLSL, which is the language used in WebGL – Gustav Sep 08 '11 at 21:39
11

WebGL Cheat Sheet

WebGL Quick Reference Card

CubeJockey
  • 2,191
  • 8
  • 22
  • 31
Jinhyung Park
  • 471
  • 2
  • 10
6

There is also the official manual — the WebGL specification:

https://www.khronos.org/registry/webgl/specs/1.0/

dionyziz
  • 2,350
  • 1
  • 21
  • 29
4

Personally I prefer these ones but then I'm biased because I wrote them. Unlike the other tutorials they don't gloss over anything and don't assume you know 3D math already. They also aren't based on OpenGL tutorials that are 20 years out of date and not really appropriate for WebGL.

gman
  • 83,286
  • 25
  • 191
  • 301
3

There is no manual for WebGL, but the official specification serves as one. To use it as such, you have to understand the following:

WebGL is a JavaScript interface for browsers to OpenGL ES 2.0, which is a graphics API for embedded systems.* Therefore, the WebGL specification doesn't provide the full description of its interfaces. Instead, it refers to the OpenGL ES 2.0 specification and specifies only the differences between the two.

The interfaces that collectively make up the WebGL API are defined in Section 5 of the specification. You can get an overview of them in the table of contents. Sections 5.14.1 and onwards list the attributes and methods of the WebGL context, which is the information that you are most likely interested in. Next to each method signature, there is a link to the corresponding OpenGL ES 2.0 manual entry, where you can find detailed information about them. When using the OpenGL ES 2.0 manual, you have to keep in mind that there are some minor differences between the two APIs. Fortunately, these differences are specified right below the signatures for each method individually and they are summarised in Section 6 of the specification.

*In this regard, a browser can be thought of as an embedded system within a general purpose computer.

Agost Biro
  • 2,251
  • 14
  • 26
3

You should use Giles Thomas' guide: http://www.learningwebgl.com -- This is how I got started.

phillihp
  • 588
  • 6
  • 10
0

API description

If you are interested only in the javascript API, I would suggest

Microsoft WebGL API (IE11 ?)

Mozilla WebGL API

As a starter I would suggest Microsoft one as it describes:

  • extensions
  • objects
  • methods
  • properties
  • GLSL errors

It really focus on the API which makes it easier to explore IMO. You can find a pretty exhaustive list of methods. Note that Microsoft does not seem to implement all the features of WebGL if you compare it to Mozilla one.

On Mozilla you will find other very interesting resources (tutorials etc.). Of course another good place to get information is the kronos website. You will find the specification and reference card.

https://www.khronos.org/webgl/

For as why you cannot find a proper web page describing the Javascript API I would refer to Agost Biro answer

Tutorials

http://webglfundamentals.org/

http://learningwebgl.com/blog/

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial

From those ones you will find even more resources.

Community
  • 1
  • 1
Ronan Quillevere
  • 3,099
  • 1
  • 25
  • 37
-1

This tutorial could help you a lot as it did in my case.

http://www.webglacademy.com/

Here you could start from level 0. After completing this tutorial you could use Three.js library to enhance your WebGl content.

https://threejs.org/examples/

Naman Gaur
  • 9
  • 1
  • Link-only answers don't help, as links "rot" and stop working. Plus it requires someone to go to another site to see what you're talking about. If there's something you want to answer, answer it here. Also, just FYI the question you posted to is off-topic these days (guidelines have changed since 2011) - and has now been officially closed as off-topic as well. – David Makogon Sep 05 '17 at 19:37