We have shown how you can introduce 3D graphics to your programs relatively easily using sprites. WebGL, the web version of OpenGL, offers tremendous possibilities for those prepared to invest much time and effort into learning its complexities. Biotopia, the winning entry in the Smart Mobile Studio graphics competition, makes most impressive use of WebGL for some amazing 3D graphic modelling. The runner-up also used WebGL; Dan ported his Delphi game engine "Gen" to SMS and it is now available (in the folder Smart Mobile Projects\Contest Demos\Afternoon Walk\Gen2Web) to anyone with the requisite knowledge and skill. See an impressive demo of the engine online.

There are many new concepts to learn when working with WebGL. Tools such as ThreeJS make it easier to use, but you will want to understand the detail of the raw code to be able to get the most out of WebGL. HelloWebGL is a 3D Smart Mobile Studio demo with comments, but it introduces new ideas rather quickly. Our later examples are based on this demo. We start with simple examples to introduce the OpenGL ES Shader Language (called GLSL ES, where ES stands for Embedded Systems such as mobile phones).

For a clear explanation of the underlying JavaScript and for a well-written introduction to the complex topic of 3D graphics see the online chapters of this book. It introduces you to essential terms such as array buffer, clipping planes (near and far), fragment shader, GPU, materials, mesh, model, model view matrix, primitive, projection matrix, scene, textures, transform, vertex shader and viewport. Another valuable reference, which we use for guidance and for code to convert from JavaScript to Smart Pascal, is the popular Learning WebGL.

Follow the links below for examples that introduce WebGL features gradually.

Programming - a skill for life!

Useful for games, with drawing routines (including transforms and text fonts), images, sprites and WebGL 3D graphics. Now includes Box2D physics and rendering by Pixi.js.