DJAFER BADDOU (PhD)
email: dbaddou@gmail.com
Computer Graphics with GL
The Environment
The Environment
This is a tutorial and Platform. Each web page is divided into 4 windows:
Two windows at the left.
At the top of left windows, show a list of chapters of this tutorials.
The window at the top left is to present the notes of the chapters.
The window at the bottom left presents the details of each chapters.
Double click on each one of two windows, make the window larger.
The two windows at the right introduce a platform to a WebGL.
The bottom window at the right is to writes codes. It is labelled “Edit Code
Window”
The first tab is a text area to write the source code WebGL application
using JavaScript.
The second tab is a text area to write the code source for vertex shader
using GL Shader Language (GLSL).
The third tab is a text area to write the code source for fragment shader
using GLSL.
Tutorial and Platform
2
When the chapter is chosen notes and detailed of the chapter are
displayed and all the code sources related to the chapter are written on
the appropriate text area just click on the tabs.
Just click on run code button and the code is executed. Projection screen
and objects will be displayed on the top of the right side window labelled
“Visualization” window.
You could modify the code sources and then click run to see the
modifications displayed on “Visualization” window.
Reset button return back the code source to its origin.
The edit code window and visualization window are actually a platform to
test WebGL code using the following highlights:
The canvas id is: "codeRunning-canvas“
You need to provide code shaders to the WebGL program. There
many ways to provide vertex and fragment shaders. I did them this
way:
var VSTextarea = document.getElementById("vsCode");
var FSTextarea = document.getElementById("fsCode");
vsSource = eval( VSTextarea.value ) ;
fsSource = eval( FSTextarea.value ) ;
Introduction
Computer Graphics with GL
The Tutorial
The Tutorial
For this tutorial, I'm going to assume:
1. you're already a programmer and
2. that you know C/C++ or JavaScript.
3. if not, Chapter 2: Préparation GL Projection Plan introduces
a brief recall of C/C++ and JavaScript languages.
4. but that you haven't necessarily seen OpenGL or WbGL or
done any graphic programming before.
5. Knowing at least some basic algebra and geometry will help
a lot.
6. I'm going to cover OpenGL 3.0, WebGL 2 or OpenGL ES.
7. If I will write enough chapters, I might talk about some of
the new features of OpenGL 3 and 4 after I go through the
basics.
Tutorial and Platform
3
8. In addition to OpenGL, I'll be using two helper libraries:
1. GLUT (the GL Utility Toolkit), which provides a cross-platform interface
between the window system and OpenGL, and
2. GLEW (the GL Extensions Wrangler), which streamlines dealing with different
versions of OpenGL and their extensions.
9. For WebGL no need of any helper. All you need a browser that
support WebGL version 2, such as Firefox,Chrome probably
Safari, Edge and Opera.
Introduction
Computer Graphics with GL
4
Computer Graphics with GL
Préparation GL
Projection Plan
Introduction to
Computer
Graphics
Introduction to
OpenGL/ WebGL
Introduction
Contents
GL Textures
GL
Rastérisation
and Couleurs
Coloring the
Scene
Optique et
Infographie
Illuminée la
Scène
Phong Shading
Model WebGL
Transformations
Géométriques
Notions
Mathématiques
Pipeline de GL
Revisited
Les Mathématiques
et l’Infographie
Notions of
Colours
GL Buffers
Attributes
The chapters of this tutorial are as follow:
The Chapters
Tutorial and Platform
Introduction
