ware repair - fargo computer repair
Ware Repair closed August 28th, 2020

WebGL and HTML5 Canvas - both provide a good introduction to the fundamentals of game programming and 3D programming.

WebGL and HTML5 Canvas - both provide a good introduction to the fundamentals of game programming and 3D programming.

Written by Diane Diane Ware - November 08, 2018 in Programming

At the start of this blog, I want to point out that I have not relinquished my quest to provide further blogs on the mathematics involved in 3D game programming. And I will provide more blogs in the future about the mathematics involved in 3D programming. 

However, in my research to learn more about 3D programming, I headed down the fork in the road toward WebGL. 

WebGL is a "JavaScript application programming interface for rendering 2D and 3D graphics within any compatible web browser without the use of plug-ins", as quoted from the Wikipedia article. Also quoted from the same article, "WebGL programs consist of control code written in JavaScript and shader code that is written in OpenGL ES Shading Language (GLSL ES), a language similar to C or C++, and is executed on a computer's graphics processing unit (GPU)". 

A very good site for learning WebGL programming is the Mozilla MDN web docs website. The tutorials at this site will inform you that in order to have a good understanding of WebGL, you must know the basics of web design first, i.e. HTML, CSS, and JavaScript (a great site for learning all three is W3Schools). Once you know all of these, it is just a matter of continuing through the tutorial to learn how to create WebGL programs. 

So, what exactly can you create with WebGL? 

Here, at this website, WebGL Samples, are some free, working examples that you can check out. The images below are merely screen shots of the programs - all of the programs are in motion and some have user-interactivity capabilities. 


Color-Adjust (a user can adjust the colors in this program in realtime using a color cube, which is accessed on the left, under Adjustment): 


Dynamic Cubemap

Hopefully the above examples captured your interest and inspire you to learn WebGL for yourself, soon! 

Thank you for reading this blog post :-)




Diane Ware

Manager - Tech Support

I am co-owner of Ware Repair and enjoy working with technology, web design and development, and embedded programming, especially that which applies to robotics. I also enjoy writing blogs and sci-fi novels on my free time.