OpenGL Graphics | Website Development & More!

Welcome to programming creatively – A general programming video tutorials endeavour.

As of 25th March 2022 this site has just been made live. Source code is included on each tutorial page below the video (excluding the RCS Teaser series).

Detailed explanations accompanied with diagrams will be added in due course.

Embedded systems tutorials are to be added later.

Modern OpenGL Graphics Programming for Making 3D games

Your physics (gameplay) routines reside and run in the main loop on the CPU side, and your game’s characters such as the main player, enemies, spaceships, aliens, etc, are all created by using 3D modelling software such as Blender or Maya...

Those models are then imported into your game, making them ready for processing via the graphics rendering pipeline. Your main loop then executes the physics routines, and then calls upon the OpenGL API to render your models with the assistance of your graphics card.

Although the rendering pipeline consists of several stages, you’re only required to access the vertex shader and the fragment shader stages in order to produce a perfectly functional game.

A Simplified Overview Example

  1. Draw game characters in Blender (3D modelling)
  2. Create and initiate an OpenGL context display window using GLFW
  3. Write the minimum necessary vertex shader and fragment shader code
  4. Create the OpenGL vertex shader and fragment shader program object
  5. Import the models into your game by using the ASSIMP import library
  6. Load all the model’s images into OpenGL to be used as image textures
  7. Create vertex – array and buffer objects, and the element buffer object
  8. Write the minimum necessary physics routines to run in the main loop
  9. Within the main loop, transfer any shader uniform updates to the shaders
  10. Clear the colour & depth buffers, bind textures & VAO, call glDrawElements

The following program performs translation and rotation transformations via the GLM maths library; it generates both perspective and orthographic shadows that remain true to the light positions as they animate around the scene, and it also takes advantage of GLFW’s keyboard, mouse and joystick user input. The only shaders it uses are the vertex shader and the fragment shader...

Conceptualising via Visualisation (Understanding)

3D computer graphics is visual by its very nature, and so it’s not surprising that visualisations help enormously with conceptual understanding. Take skyboxes for example... understanding why they work is a conceptual challenge – can a skybox be created by printing onto big sheets of rigid cardboard? Or do they require graphics programming?

Skyboxes are often rendered by using OpenGL’s built-in cubemap sampler functionality, but you can simply just import a 3D model cube instead, that already has the 6 images applied, and then render the cube like a normal model. Or you can render a sphere which is even easier… or even a full-screen quad for maximum efficiency.

Website Development | HTML - CSS - JavaScript

Two approaches to learning website development are: 1) Use some kind of website builder, and 2) Take control into your own hands by learning the "Essential 3" (HTML, CSS, and JavaScript). The advantages of learning those three programming languages compared to using a website builder are huge, the most significant of which are listed below...

Your 1st Taster - CSS Flexbox In All Its Glory

The following video demonstrates CSS Flexbox in considerable detail. Relatively speaking flexbox is one of the modern (introduced in 2009) alternatives to using "floats" (and other techniques) for creating responsive layouts. We dive into all the details of how flexbox works, looking at many different examples.

CSS Flexbox vs CSS Grid (Do We Need Grid?)

CSS Grid became widely supported by all browsers from Spring 2017. Some programmers were reluctant to learn this new major specification because of having already learnt flexbox, which itself works great for creating responsive layouts... so do we really need grid?