CODEWITHSUNDEEP
htmlcanvashtml5-canvaswebgl
johnbakers
johnbakers

Reputation: 24770

In HTML5, where is the line between WebGL drawing an non WebGL drawing?

The HTML canvas element is impressive and what people are doing with it is mind blowing. When I study the javascript that developers use, it's not always apparent if what I'm seeing qualifies for the term "WebGL" or not. Where is the line drawn between what is and is not WebGL?

Upvotes: 0

Views: 275

Answers (2)

moka
moka

Reputation: 23047

Generally there is two types of use of <canvas> element right now: 2D and WebGL. Those called context.

You get context using canvas.getContext('yourContextHere');. The easiest way to identify which context is used, just search for getContext and see what is used as first argument.

There is one 2d context, while there is many variations of webgl, like experimental-webgl, webkit-3d and few others, but they will usually contain or webgl or 3d word in it.

Another big difference is dimensions, 2d context is obviously only 2 dimensions, still it is possible to do some math with matrices and simulate 3 dimensions, this technique sometimes is used in order to draw something simple with feel of 3d. But that is rare.

WebGL is based OpenGL ES 2.0 and has own functionality, totally different from 2d context. So if you learn some of it then it will be very easy to distinguish between them.

Upvotes: 0

Marcin
Marcin

Reputation: 49846

It's WebGL if they're using a WebGLRenderingContext. See: https://www.khronos.org/registry/webgl/specs/1.0/

Example 1 from that document shows:

var canvas = document.getElementById('canvas1');
var gl = canvas.getContext('webgl');

Upvotes: 6

Related Questions