WebGL

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 Programming Guide: Interactive 3D Graphics Programming with WebGL by Kouichi Matsuda and Rodger Lea. You can sign up for a free trial with oreilly.com to view the book online. Another valuable reference, which we use for guidance and for code to convert from JavaScript to Smart Pascal, is the popular Learning WebGL by Gregg Tavares.

Follow the links below for examples that introduce WebGL features gradually. We are currently preparing further examples using Version 3 of Smart Mobile Studio. See, for example, Using a TW3WebGL Component to Display a Rectangle with Coordinates in Pixels in Version 3.0 of Smart Mobile Studio and Using a TW3WebGL Component to display a Texture in Version 3.0 of Smart Mobile Studio. Be prepared to experiment when getting to grips with this challenging topic.

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.