Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

3D Web App Creation

Fivos Doganis
fivos.doganis@gmail.com

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Contents

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Why use Web technologies for 3D?

  • mobile experiences
  • open technology stack
    • cross-platform, no installation, no app store
    • open source
    • non-proprietary (unlike Unity or Unreal Engine)
    • free
  • leverage many other existing web APIs
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Steps

  • Run
  • Debug
  • Build
  • Modify
  • Create
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Run: check your drivers

  • Update your graphics card drivers if possible
  • Linux: if your GPU is not properly detected, uninstall NVIDIA drivers and use the default ones provided by Ubuntu
sudo apt-get remove --purge '^nvidia-.*'
sudo apt-get install ubuntu-desktop
sudo rm /etc/X11/xorg.conf
echo 'nouveau' | sudo tee -a /etc/modules
reboot
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Run: testing on your mobile

  • Check that your smartphone can read QR codes
  • iOS : default Camera app
  • Android
    • use Google Chrome + scan button
    • or install a trustworthy QR code scanning app like Trend Micro
  • Other 100% web based alternatives
    • webqr.com
    • qrcodescan.in
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Debug

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Build: tools

  • Web development

    • browser (Firefox, Chrome, Safari Mobile)
    • Git (optional yet extremely useful)
    • editor (VSCode), or Glitch (slow, but no installation needed!)

  • Technologies: HTML, JS, CSS, WebGL, THREE.js

  • Optional:

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Browser installation

  • Firefox installed by default
    • should be enough!
  • Chrome
    • to test compatibility as well as some special features
    • install latest version (97+) on mobile
    • you may install Chromium on your desktop
      • open-source without proprietary services
sudo apt-get install chromium-browser
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Git installation

sudo apt-get install git

git config --global user.name "myusername"
git config --global user.email myname@mymailprovider.com
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

VSCode installation

sudo apt update
sudo apt install software-properties-common apt-transport-https wget

wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -

sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"

sudo apt install code

Remove GPG warnings

sudo gpgconf --kill dirmngr
sudo chown -R $USER:$USER ~/.gnupg
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Customize VS Code

  • Avoid UI blinking by changing the settings:
set window.titleBarStyle to custom
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • File > Preferences > Settings > Format on Save ⭐
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Development environment setup

➡️ need to run a server like Live Server, or:

$ cd /home/somedir
$ python -m SimpleHTTPServer

And then point your browser at http://localhost:8000

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Glitch: online interactive editor

But also VSCode.dev, Codepen.io, Repl.it etc.

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

WebGL Exercices

inspired by

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Check that WebGL is supported

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Reminder: Minimalistic web page

<!DOCTYPE html>
<html> 

<head>
    <meta charset='utf-8'>
</head>

<body>    
</body>

</html>
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Reminder: Minimalistic drawing program using the Canvas API

<!DOCTYPE html>
<html> 

<head>
    <meta charset='utf-8'>
</head>
<body>
    <canvas width='640' height='480'></canvas>
    <script>
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d'); // get 2D rendering context, on which we'll draw
        ctx.fillStyle = 'rgba(255, 0, 0, 1)'; // a.k.a. 'red': opaque red
        ctx.fillRect(0, 0, canvas.width, canvas.height); // uses current color
    </script>
</body>

</html>
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

"There Is Also Canvas"

Bruno Imbrizi

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Minimalistic WebGL program: to ensure that everything works fine
⚠️ no error checks, for clarity reasons (don't do this at home! 😉)

<!DOCTYPE html>
<html> 
<head>
    <meta charset='utf-8'>
</head>
<body>
    <canvas width='640' height='480'></canvas>
    <script>
        const canvas = document.querySelector('canvas');
        /** @type {WebGLRenderingContext} */
        const gl = canvas.getContext('webgl'); // instead of '2d'
        gl.clearColor(1., 0., 0., 1.); // RGBA: opaque red
        gl.clear(gl.COLOR_BUFFER_BIT); // uses current color (state machine)
    </script>
</body>
</html>
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

States

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Minimalistic "useful" program: shaders, but no vertex buffer yet

Add this code after gl.clear:

// vertex shader
const vs_source = `
void main() {
    gl_Position = vec4(0., 0., 0., 1.);  // center
    gl_PointSize = 120.0;
}`;

// fragment shader
const fs_source = `
precision mediump float;

void main() {
    gl_FragColor = vec4(0., 1., 0., 1.);  // green
}`;
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Additional code: useful functions (still no error checks!)

function buildShader(gl, shaderSource, shaderType) {
    const shader = gl.createShader(shaderType); // Create the shader object
    gl.shaderSource(shader, shaderSource); // Load the shader source
    gl.compileShader(shader); // Compile the shader
    return shader;
}

function createProgram(gl, shaders) {
    const program = gl.createProgram();
    shaders.forEach(function(shader) {
        gl.attachShader(program, shader);
    });
    gl.linkProgram(program);
    return program;
}
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Finally : load shaders, program and render

// load and compile the shaders
const vs = buildShader(gl, vs_source, gl.VERTEX_SHADER);
const fs = buildShader(gl, fs_source, gl.FRAGMENT_SHADER);

// Create program on the GPU!
const program = createProgram(gl, [vs, fs]);

// Set current program (WebGL is a state machine!)
gl.useProgram(program);

// Draw 1 big point, see shaders 
const offset = 0;
const count = 1;
gl.drawArrays(gl.POINTS, offset, count);
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

States

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

My first triangle

see webglfundamentals

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Initialization

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

1 . Data

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
const vertices = new Float32Array([
    0.5,  0.5,
    -0.5,  0.5,
    -0.5, -0.5]); // 2D points: 3 * (x, y) coordinates
  • Create Vertex Buffer Object (VBO) + UPLOAD to the GPU
const vbo = gl.createBuffer(); // create Vertex Buffer Object (VBO) id
// Set current VBO: bind 'vbo' to the ARRAY_BUFFER bind point,
//  a global variable internal to WebGL (state machine!)
gl.bindBuffer(gl.ARRAY_BUFFER, vbo); 
// UPLOAD current VBO to GPU, where it will be processed by the shaders
// NOTE: STATIC_DRAW: optimization hint for WebGL: our data won't change
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

2 . Shaders

which will use buffer data

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • Vertex Shader: gl_Position will be used by the fragment shader
attribute vec2 a_position; // IN, from buffer: 2D point
void main() {
    gl_Position = vec4(a_position, 0.0, 1.0); // a_position.x, a_position.y, 0, 1, used by the fragment shader
}
  • Fragment Shader: gl_FragColor is the final fragment color
precision mediump float; // float accuracy: lowp, mediump, highp
uniform vec4 u_color; // UNIFORM == CONSTANT for entire shader program
                
void main() {
    gl_FragColor = u_color; // final framebuffer color: RGBA
}
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Detecting shader compilation errors

Call this before gl.useProgram (optional, slow, but often useful 😉)

function checkShaders(gl, vs, fs, program) {
    if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) 
        console.error(gl.getShaderInfoLog(vs));
    
    if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) 
        console.error(gl.getShaderInfoLog(fs));
    
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) 
        console.error(gl.getProgramInfoLog(program));
}
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

3 . Connecting Buffer and Shaders

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

  • Retrieve the variables declared in the shaders

    • costly call (like most gl.getXXX calls)
    • only do this during initialization
    • will be used during rendering

  • ⚠️ use the exact same name that has been defined in the shader

    • arbitrary name, chosen by the developer! (u_ for uniform, a_ for attribute, v_ for varying are common conventions)
// Retrieve 'u_color' shader UNIFORM variable as an id
const u_colorLoc = gl.getUniformLocation(program, 'u_color');	

// Retrieve 'a_position' shader ATTRIBUTE variable as an id
const a_positionLoc = gl.getAttribLocation(program, 'a_position');
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

4 . Rendering!

Buffers and Shaders are ready, we still need to:

  • define states
  • describe buffer layout (often complex since it is very flexible!)
  • draw the scene
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
gl.clearColor(0., 0., 0., 1.); // Set current clear color (black)
gl.clear(gl.COLOR_BUFFER_BIT); // Clear the canvas to current color

gl.useProgram(program); // Set current program (pair of shaders)

// Set the color (constant triangle color, see shader)
gl.uniform4fv(u_colorLoc, [1.0, 0.0, 0.0, 1.0]);
// Tell WebGL how to take data from the VBO
// and supply it to the attribute in the shader.
gl.enableVertexAttribArray(a_positionLoc); // Turn the attribute on
gl.bindBuffer(gl.ARRAY_BUFFER, vbo); // set current vbo
// Tell the attribute how to get data out of positionBuffer
// (ARRAY_BUFFER)
const size = 2; // 2 components per iteration
const type = gl.FLOAT; // the data is 32bit floats
const normalize = false; // don't normalize the data
// stride: 0 = move forward size * sizeof(type) each iteration
// to get the next position
const stride = 0;        
const offset = 0; // start at the beginning of the buffer
gl.vertexAttribPointer(a_positionLoc, size, type, normalize, stride, offset);
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
// primitiveType == gl.TRIANGLES:
// each time our vertex shader is run 3 times,
// WebGL will draw a triangle
// based on the 3 values we set gl_Position to (see shader)
const primitiveType = gl.TRIANGLES;

// Start index of the first vertex
// Must be a valid multiple of the size of the given type.
const startIndex = 0;

// Execute our vertex shader 3 times,
// using 2 elements from the array (see size 2 above)
// setting a_position.x and a_position.y
const count = 3;
gl.drawArrays(primitiveType, startIndex, count);
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

States

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Almost there!

We still need to define one color per vertex instead of the constant uniform color
cf. webglfundamentals

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

1 . Data

adding a color attribute per vertex, with a new array and a new buffer!

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
 // 2D points: 3 * (x, y) coordinates 
// (sqrt(3) / 2 - 0.5) * 640 / 480 == 0.4880338..
const vertices = new Float32Array([-0.75,  -0.5,
                                    0.75,  -0.5,
                                    0., 0.49]);
// create Vertex Buffer Object (VBO) id
const vertexBuffer = gl.createBuffer(); 

 // set current VBO (WebGL is a state machine!)
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// UPLOAD vertexBuffer VBO to GPU,
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); 

 // ** NEW **

 // RGB colors: 3 * (r, g, b, a) values
const colors = new Float32Array([   1., 0., 0., 1.,
                                    0., 1., 0., 1.,
                                    0., 0., 1., 1.]);  
// create Vertex Buffer Object (VBO) id
const colorBuffer = gl.createBuffer(); 

 // set current VBO (WebGL is a state machine!)
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

// UPLOAD colorBuffer VBO to GPU,
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

2 . Shaders

we use the new color attribute that we choose to name a_color
(we could name it mylittlevertexcolor but it looks less professional)

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • Vertex Shader: new varying variable, will be interpolated
attribute vec2 a_position; // IN, from buffer: 2D point
attribute vec4 a_color; // IN, from buffer: RGB color

varying vec4 v_color; // OUT, to fragment shader

void main() {
    v_color = a_color; // color passthrough, sent to fragment shader (interpolated)
    
    gl_Position = vec4(a_position, 0.0, 1.0); // used by the fragment shader
}
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • Fragment Shader
precision mediump float; // float accuracy: lowp, mediump, highp

varying vec4 v_color; // IN, INTERPOLATED color from vertex shader
                        
void main() {
    gl_FragColor = vec4(v_color); // final framebuffer color: RGBA
}
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

3 . Connecting Buffer and Shaders

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

  • Retrieve the variables declared in the shaders

    • costly call (like most gl.getXXX calls)
    • only do this during initialization
    • will be used during rendering

  • ⚠️ use the exact same name that has been defined in the shader

// Retrieve 'a_color' shader ATTRIBUTE variable as an id
const a_colorLoc = gl.getAttribLocation(program, 'a_color');	

// Retrieve 'a_position' shader ATTRIBUTE variable as an id
const a_positionLoc = gl.getAttribLocation(program, 'a_position');
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

4 . Rendering!

Buffers and Shaders are ready, we still need to:

  • define states
  • describe buffer layout (often complex since it is very flexible!)
  • draw the scene
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
    gl.clearColor(0., 0., 0., 1.); 
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program); // Set current program

{
    // Turn the attribute on
    gl.enableVertexAttribArray(a_positionLoc); 
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // set current vbo
    // Tell the attribute how to get data out of positionBuffer
    // (ARRAY_BUFFER)
    const size = 2; // 2 components per iteration
    const type = gl.FLOAT; // the data is 32bit floats
    const normalize = false; // don't normalize the data
    // stride: 0 = move forward size * sizeof(type) each iteration
    // to get the next position
    const stride = 0;        
    const offset = 0; // start at the beginning of the buffer
    gl.vertexAttribPointer(a_positionLoc, size, type, normalize, stride, offset);
}
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • Same steps for colorBuffer
    NOTE: Refactoring! In real life we try and avoid repetition: DRY
{
    // Tell WebGL how to take data from the VBO
    // and supply it to the attribute in the shader.
    gl.enableVertexAttribArray(a_colorLoc); // Turn the attribute on
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    // Tell the color attribute how to get data out of colorBuffer (ARRAY_BUFFER)
    const size = 4; // NOTE: 4 components per iteration
    const type = gl.FLOAT; // the data is 32bit floats
    const normalize = false; // don't normalize the data
    // stride: 0 = move forward size * sizeof(type) each iteration
    // to get the next position
    const stride = 0;        
    const offset = 0; // start at the beginning of the buffer
    gl.vertexAttribPointer( a_colorLoc, size, type, normalize, stride, offset);
}
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • Draw: same code as before!
// primitiveType == gl.TRIANGLES:
// each time our vertex shader is run 3 times,
// WebGL will draw a triangle
// based on the 3 values we set gl_Position to (see shader)
const primitiveType = gl.TRIANGLES;

// Start index of the first vertex
// Must be a valid multiple of the size of the given type.
const startIndex = 0;

// Execute our vertex shader 3 times,
// using 2 elements from the array (see size 2 above)
// setting a_position.x and a_position.y
const count = 3;
gl.drawArrays(primitiveType, startIndex, count);
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

States

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

💪 😎 🎉

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Variations

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Interlaced buffer

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
// POINTS : position + color
const vertexBuffer = new Float32Array([
-0.5, -0.5, // vertex 1 : left
1., 0., 0., // color 1 : red
0.5, -0.5, // vertex 2 : right
0., 1. , 0., // color 2 : green
0., 0.48, // vertex 3 : top
0., 0., 1. // color 3 : blue
]);

const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, vertexBuffer, gl.STATIC_DRAW); // send to GPU

// FACES : indices
const indices = new Uint16Array([0, 1, 2]);
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); // send to GPU
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
gl.enableVertexAttribArray(a_colorLoc);
gl.enableVertexAttribArray(a_positionLoc);
gl.useProgram(program);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
const animate = () => {
    gl.viewport(0.0, 0.0, canvas.width, canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

    gl.vertexAttribPointer(a_positionLoc, 2, gl.FLOAT, false,4*(2+3),0) ;
    gl.vertexAttribPointer(a_colorLoc, 3, gl.FLOAT, false,4*(2+3),2*4) ;

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
    gl.flush();
    window.requestAnimationFrame(animate);
};
animate();
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

More examples

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

WebGL Textured Cube (HTML)

<canvas id="canvas"></canvas>
<!-- vertex shader -->
<script  id="vertex-shader-3d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec2 a_texcoord;

uniform mat4 u_matrix;

varying vec2 v_texcoord;

void main() {
  // Multiply the position by the matrix.
  gl_Position = u_matrix * a_position;

  // Pass the texcoord to the fragment shader.
  v_texcoord = a_texcoord;
}
</script>
<!-- fragment shader -->
<script  id="fragment-shader-3d" type="x-shader/x-fragment">
precision mediump float;

// Passed in from the vertex shader.
varying vec2 v_texcoord;

// The texture.
uniform sampler2D u_texture;

void main() {
   gl_FragColor = texture2D(u_texture, v_texcoord);
}
</script><!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

WebGL Textured Cube (JS, >250 lines)

"use strict";

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.querySelector("#canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);

  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
  var texcoordLocation = gl.getAttribLocation(program, "a_texcoord");

  // lookup uniforms
  var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  var textureLocation = gl.getUniformLocation(program, "u_texture");

  // Create a buffer for positions
  var positionBuffer = gl.createBuffer();
  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // Put the positions in the buffer
  setGeometry(gl);

  // provide texture coordinates for the rectangle.
  var texcoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
  // Set Texcoords.
  setTexcoords(gl);

  // Create a texture.
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  // Fill the texture with a 4x4 LUMINANCE pixel.
  const level = 0;
  const format = gl.LUMINANCE;
  const type = gl.UNSIGNED_BYTE;
  const border = 0;
  const width = 4;
  const height = 4;
  const pixels = new Uint8Array([
    255, 128, 255, 128,
    128, 255, 128, 255,
    255, 128, 255, 128,
    128, 255, 128, 255,
  ]);
  gl.texImage2D(gl.TEXTURE_2D, level, format, width, height, border,
                format, type, pixels);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.generateMipmap(gl.TEXTURE_2D);

  function radToDeg(r) {
    return r * 180 / Math.PI;
  }

  function degToRad(d) {
    return d * Math.PI / 180;
  }

  var fieldOfViewRadians = degToRad(60);
  var modelXRotationRadians = degToRad(0);
  var modelYRotationRadians = degToRad(0);

  // Get the starting time.
  var then = 0;

  requestAnimationFrame(drawScene);

  // Draw the scene.
  function drawScene(time) {
    // convert to seconds
    time *= 0.001;
    // Subtract the previous time from the current time
    var deltaTime = time - then;
    // Remember the current time for the next frame.
    then = time;

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.enable(gl.CULL_FACE);
    gl.enable(gl.DEPTH_TEST);

    // Animate the rotation
    modelYRotationRadians += -0.7 * deltaTime;
    modelXRotationRadians += -0.4 * deltaTime;

    // Clear the canvas AND the depth buffer.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    // Turn on the position attribute
    gl.enableVertexAttribArray(positionLocation);

    // Bind the position buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER)
    var size = 3;          // 3 components per iteration
    var type = gl.FLOAT;   // the data is 32bit floats
    var normalize = false; // don't normalize the data
    var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
    var offset = 0;        // start at the beginning of the buffer
    gl.vertexAttribPointer(
        positionLocation, size, type, normalize, stride, offset);

    // Turn on the texcoord attribute
    gl.enableVertexAttribArray(texcoordLocation);

    // bind the texcoord buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);

    // Tell the texcoord attribute how to get data out of texcoordBuffer (ARRAY_BUFFER)
    var size = 2;          // 2 components per iteration
    var type = gl.FLOAT;   // the data is 32bit floats
    var normalize = false; // don't normalize the data
    var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
    var offset = 0;        // start at the beginning of the buffer
    gl.vertexAttribPointer(
        texcoordLocation, size, type, normalize, stride, offset);

    // Compute the projection matrix
    var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
    var projectionMatrix =
        m4.perspective(fieldOfViewRadians, aspect, 1, 2000);

    var cameraPosition = [0, 0, 2];
    var up = [0, 1, 0];
    var target = [0, 0, 0];

    // Compute the camera's matrix using look at.
    var cameraMatrix = m4.lookAt(cameraPosition, target, up);

    // Make a view matrix from the camera matrix.
    var viewMatrix = m4.inverse(cameraMatrix);

    var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);

    var matrix = m4.xRotate(viewProjectionMatrix, modelXRotationRadians);
    matrix = m4.yRotate(matrix, modelYRotationRadians);

    // Set the matrix.
    gl.uniformMatrix4fv(matrixLocation, false, matrix);

    // Tell the shader to use texture unit 0 for u_texture
    gl.uniform1i(textureLocation, 0);

    // Draw the geometry.
    gl.drawArrays(gl.TRIANGLES, 0, 6 * 6);

    requestAnimationFrame(drawScene);
  }
}

// Fill the buffer with the values that define a cube.
function setGeometry(gl) {
  var positions = new Float32Array(
    [
    -0.5, -0.5,  -0.5,
    -0.5,  0.5,  -0.5,
     0.5, -0.5,  -0.5,
    -0.5,  0.5,  -0.5,
     0.5,  0.5,  -0.5,
     0.5, -0.5,  -0.5,

    -0.5, -0.5,   0.5,
     0.5, -0.5,   0.5,
    -0.5,  0.5,   0.5,
    -0.5,  0.5,   0.5,
     0.5, -0.5,   0.5,
     0.5,  0.5,   0.5,

    -0.5,   0.5, -0.5,
    -0.5,   0.5,  0.5,
     0.5,   0.5, -0.5,
    -0.5,   0.5,  0.5,
     0.5,   0.5,  0.5,
     0.5,   0.5, -0.5,

    -0.5,  -0.5, -0.5,
     0.5,  -0.5, -0.5,
    -0.5,  -0.5,  0.5,
    -0.5,  -0.5,  0.5,
     0.5,  -0.5, -0.5,
     0.5,  -0.5,  0.5,

    -0.5,  -0.5, -0.5,
    -0.5,  -0.5,  0.5,
    -0.5,   0.5, -0.5,
    -0.5,  -0.5,  0.5,
    -0.5,   0.5,  0.5,
    -0.5,   0.5, -0.5,

     0.5,  -0.5, -0.5,
     0.5,   0.5, -0.5,
     0.5,  -0.5,  0.5,
     0.5,  -0.5,  0.5,
     0.5,   0.5, -0.5,
     0.5,   0.5,  0.5,

    ]);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
}

// Fill the buffer with texture coordinates the cube.
function setTexcoords(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array(
        [
          0, 0,
          0, 1,
          1, 0,
          0, 1,
          1, 1,
          1, 0,

          0, 0,
          0, 1,
          1, 0,
          1, 0,
          0, 1,
          1, 1,

          0, 0,
          0, 1,
          1, 0,
          0, 1,
          1, 1,
          1, 0,

          0, 0,
          0, 1,
          1, 0,
          1, 0,
          0, 1,
          1, 1,

          0, 0,
          0, 1,
          1, 0,
          0, 1,
          1, 1,
          1, 0,

          0, 0,
          0, 1,
          1, 0,
          1, 0,
          0, 1,
          1, 1,

      ]),
      gl.STATIC_DRAW);
}

main();
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Optimization

Vertex Array Object ⭐ (bad name for a modern and very cool feature)

  • optimizes rendering speed and encapsulates WebGL state
    ➡️ always use it!

  • makes WebGL look like a modern API

  • see below

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • WebGL 1 (extension always available today)
const ext = gl.getExtension("OES_vertex_array_object");
if (!ext) { // should never happen, extension is omnipresent!
  // tell user they don't have the required extension or work around it
} else {
  let myVAO = ext.createVertexArrayOES();
}
  • WebGL 2
const myVAO = gl.createVertexArray();
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
// at init time
for each model / geometry / ...
    const vao = gl.createVertexArray();
    gl.bindVertexArray(vao);
    for each attribute
    gl.enableVertexAttribArray(...);
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferForAttribute);
    gl.vertexAttribPointer(...);
    if indexed geometry
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    gl.bindVertexArray(null);

// draw
gl.bindVertexArray(vao); // only 1 DrawCall !

// clean
gl.bindVertexArray(null); //Always unbind the VAO when you're done
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

More optimizations ⭐

Valid for any API!

  • Profiling
  • "Batching":
    • Texture Atlas
    • Degenerate Triangle Strips
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

More shaders!

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

The Book of Shaders

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

PixelSpiritDeck

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

ShaderToy

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Vertex Shader Art


Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Online shader editors

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

More advanced APIs

  • WebGL 2.0
    • new shaders: in, out, flexibility, draw_buffers, UBO and more
  • WebGPU (from WebGL to WebGPU)
    • generalizes VAO concepts to all attributes and states
  • THREE.js ⭐ ⭐ ⭐ ⭐ ⭐
    • high-level API: abstracts WebGL! 🎉
      • SceneGraph (like OpenInventor, Unity or Blender) granularity: buffers triangles 3D objects!
    • seamless transition to WebGL2, WebGPU etc.
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

WebAssembly (Wasm)

  • Compile your native code for theweb

{ C++, OpenGL } ➡️ emscripten ➡️ { HTML, JS (Wasm), WebGL }

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • C++
#include <functional>

#include <emscripten.h>
#include <SDL.h>

#define GL_GLEXT_PROTOTYPES 1
#include <SDL_opengles2.h>

//...

// an example of something we will control from the javascript side
bool background_is_black = true;

// the function called by the javascript code
extern "C" void EMSCRIPTEN_KEEPALIVE toggle_background_color() { background_is_black = !background_is_black; }

std::function<void()> loop;
void main_loop() { loop(); }

int main()
{
    SDL_Window *window;
    SDL_CreateWindowAndRenderer(640, 480, 0, &window, nullptr);
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

//...
 
    loop = [&]
    {
        // move a vertex
        const uint32_t milliseconds_since_start = SDL_GetTicks();
        const uint32_t milliseconds_per_loop = 3000;
        vertices[0] = ( milliseconds_since_start % milliseconds_per_loop ) / float(milliseconds_per_loop) - 0.5f;
        glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

        // Clear the screen
        if( background_is_black )
            glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
        else
            glClearColor(0.9f, 0.9f, 0.9f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);

        // Draw a triangle from the 3 vertices
        glDrawArrays(GL_TRIANGLES, 0, 3);

        SDL_GL_SwapWindow(window);
    };

    emscripten_set_main_loop(main_loop, 0, true);

    return EXIT_SUCCESS;
}
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • HTML / JavaScript
<body>

    <!-- Create the canvas that the C++ code will draw into -->
    <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>

    <!-- Allow the C++ to access the canvas element --> 
    <script type='text/javascript'>
        var canv = document.getElementById('canvas');
        var Module = {
            canvas: canv
        };
    </script>
    
    <!-- Call the javascript glue code (index.js) as generated by Emscripten -->
    <script src="index.js"></script>
    
    <!-- Allow the javascript to call C++ functions -->
    <script type='text/javascript'>
        canv.addEventListener('click',    _toggle_background_color, false);
        canv.addEventListener('touchend', _toggle_background_color, false);
    </script>

    <!-- Describe what the user is seeing -->
    <p>Click the canvas to change the background color.</p>
    <hr>
    <p>Minimal example of animating the HTML5 canvas from C++ using OpenGL through WebAssembly.</p>
    <p>Source code: <a href="https://github.com/timhutton/opengl-canvas-wasm">https://github.com/timhutton/opengl-canvas-wasm</a></p>

</body>
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Compilation

  • Install Emscripten

  • Generate index.js and index.wasm:

emcc main.cpp -std=c++11 -s WASM=1 -s USE_SDL=2 -O3 -o index.js
  • Open index.html (using server)
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Result

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

I implemented WebGL in Chrome and my name is on the spec so I have some clue how it works

TL;DR
If you want to get stuff done use three.js.

Gregg Tavares (@greggman)

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE.js

Interactive overview
by
David Lyons
https://davidlyons.dev/threejs-intro

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE.js Manual

⭐ BEST Guide ⭐

https://threejs.org/manual/#en/fundamentals

Complete and simple guide

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

SceneGraph ⭐

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
  • we handle 3D objects instead of buffers
    • higher level, easier, more intuitive
  • each scene is organized as a hierarchy of objets
    • hence the term "scene graph"
  • allows to combine local transforms into global transforms
    • ex: solar system (see below), wheels of a car
  • rendering API abstraction
    • ex: seamless transition from WebGL to WebGPU
  • scene graph optimizations
    • batching
    • smart update of 3D objects
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Solar system example

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE.js Manual (excerpts)

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Setup

in order to "Build"

How to run the examples locally

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Setup

  • THREE.js is a library, NOT a standard API like WebGL
  • THREE.js abstracts WebGL 1, WebGL 2 and WebGPU
  • We need to import its modules before coding:
    • 1️⃣ either using CDN (Content Delivery Network)
      • zero setup: allows quick tests, without installation
    • 2️⃣ or through a full installation (via Node.js)
      • allows complete access to all resources, but introduces a complex toolchain (npm, webpack, rollup etc.)
    • ⚠️ zip download NOT recommended (complex dependencies)
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

1️⃣ Zero Setup: using a CDN

 <!DOCTYPE html>
 <html lang="en">
    
    <head>
        <title>three.js</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    </head>
    
    <style>
      html, body { margin: 0; padding: 0;  overflow: hidden; }
    </style>
    
    <body>

        <script type="importmap">
          {
            "imports": {
              "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
              "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/"
            }
          }
        </script>

        <script type="module">

            // Example of hard link to official repo for data, if needed
            const MODEL_PATH = 'https://raw.githubusercontent.com/mrdoob/three.js/r182/examples/models/gltf/LeePerrySmith/LeePerrySmith.glb';

            import * as THREE from 'three'

            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
            import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

            // INSERT CODE HERE

        </script>
    </body>
</html>
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026
const scene = new THREE.Scene();
const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.PerspectiveCamera( 75, aspect, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

const render = () => {
  requestAnimationFrame( render );
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;
  renderer.render( scene, camera );
};

render();
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

2️⃣ Full setup using NPM

sudo apt install nodejs
curl -L https://npmjs.org/install.sh | sudo sh

See below

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Bundlers

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Manual installation 😠

  • ⚠️ avoid manual installation!

    • shown here for educational purposes
    • ➡️ use three_vite template instead: automatic installation

  • install vite

npm install --save-dev vite
  • install three
npm install three
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE.js IntelliSense

  • easy access to the documentation of THREE.js classes
  • autocompletion
  • type checking, even in JavaScript
npm install @types/three --save-dev

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Automatic installation

THREE.js with "batteries included" 🎉

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE Vite boilerplate + = ❤️

Preconfigured environment (allows to test all official examples)

https://github.com/fdoganis/three_vite ⭐

git clone https://github.com/fdoganis/three_vite.git

cd three_vite

npm install

Run with npm run dev or use F5 in VS Code

Open http://localhost:5173 in your browser

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE Vite TypeScript + + = 🚀

Same as above, with enforced type checking: cath bugs early!

https://github.com/fdoganis/three_vite_ts ⭐

git clone https://github.com/fdoganis/three_vite_ts.git

cd three_vite_ts

npm install

Run with npm run dev or use F5 in VS Code

Open http://localhost:5173 in your browser

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Boilerplate alternatives

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Bundler wars 💥

  • Rollup vs webpack vs Parcel (Comparison)

  • Vite vs Parcel vs esbuild (Comparison)

  • ➡️ If you don't have a favorite bundler, use:

    • Vite (simple, very fast and recent, might be used by THREE) ⭐
    • Rollup (quite simple and fast, used by THREE)
    • Parcel (too simple for THREE modules)
    • webpack (flexible but complex and slow)
    • esbuild (the fastest!)
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Basic THREE.js concepts

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Let's build a solar system

  • full tutorial here ⬅️
  • create a webpage with a canvas
  • create a scene with lights and meshes
    • understand object hierarchy
      • add vs attach
  • render the scene using a camera and renderer
  • animate the scene using requestAnimationFrame
    • or setAnimationLoop
  • see below 👇
0.15
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE.js Editor

  • https://threejs.org/editor/ ⭐

    • basic 3D model edition
    • basic material edition
    • simple 3D format conversion

  • ➡️ use THREE.js editor to create a hierarchy

    • sun ☀️
    • earth 🌍
    • moon 🌔
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Advanced THREE.js

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Advanced THREE.js features

➡️ you can still create your own WebGL shaders and custom geometry in THREE.js! ⭐ 🎉
But most of the time the existing classes should be enough!

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

TSL: Three Shader Language 🎨

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

AI assistance ✨

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Good coding practices

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Helpers

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Debugging tips 🐛

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Debuggers

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Extra features

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Physics (official examples)

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

3D Models

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Textures

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE.js exercises

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE.js exercises

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

THREE.js Projects

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Examples

  • Official examples

    • always up to date!
    • recommended!
      • ⚠️ THREE.js API changes very often!
      • JavaScript API too...

  • Lee Stemkoski

    • old examples
      • code needs updating
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Project ideas

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Fun

  • Adapt existing code or games to use THREE
    • board games
    • "Flash" games
    • classic (video) games (mini-games, party games, sports)
    • add sound, and physics
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

More project ideas

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Technologies

  • Gaussian splatting
  • Animations
    • UI
    • IK skeleton
  • Annotations
  • UX
    • Haptic feedback
    • Text
    • Positional Audio
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

GIS Links

http://www.itowns-project.org/itowns/examples/index.html#3dtiles_25d

http://www.itowns-project.org/itowns/examples/#source_stream_wfs_3d

https://geoservices.ign.fr/documentation/services/utilisation-web/affichage-wmts/cesiumjs-et-wmts

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

https://codepen.io/photonlines/pen/JzaLYJ

https://douglasduhaime.com/posts/visualizing-tsne-maps-with-three-js.html

https://openlayers.org/en/latest/examples/wmts.html

https://www.3ds.com/insights/customer-stories/rennes-metropole

https://www.usinenouvelle.com/article/simulation-de-singapour-a-rennes-comment-la-ville-tire-profit-de-son-double-virtuel.N1018329

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/

https://osmbuildings.org

https://github.com/Microsoft/USBuildingFootprints

https://wiki.openstreetmap.org/wiki/Simple_3D_buildings

https://threejs.org/examples/#misc_controls_map

Extrude using geo json:
https://threejs.org/examples/webgl_geometry_extrude_shapes2.html

From height field to 3D grid mesh
https://blog.mastermaps.com/2013/10/terrain-building-with-threejs.html?m=1

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Infinitown
https://demos.littleworkshop.fr/infinitown

OSMBuildings 3D
https://github.com/OSMBuildings/OSMBuildings

OpenLayers
https://openlayers.org

Leaflet
https://leafletjs.com

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

More:
https://www.sitepoint.com/3d-maps-with-eegeo-and-leaflet/

Other tech:
https://www.igismap.com/everything-about-web-3d-map-examples-tools-library-and-uses/

Terrain
https://felixpalmer.github.io/procedural-gl-js/docs/

3D Tiles (RealityCapture) ⭐

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Wrappers

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

React Three Fiber (R3F)

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

A-Frame

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

ECS

Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

Tests

const THREE = require('three');
const assert = require('assert');

describe('The THREE object', function() {
  it('should have a defined BasicShadowMap constant', function() {
    assert.notEqual('undefined', THREE.BasicShadowMap);
  }),

  it('should be able to construct a Vector3 with default of x=0', function() {
    const vec3 = new THREE.Vector3();
    assert.equal(0, vec3.x);
  })
})
Fivos Doganis | Presentation licensed under CC BY-SA 4.0 | 2026

The End!

https://github.com/orgs/marp-team/discussions/83

https://marpit.marp.app/directives?id=tweak-theme-style

**************************

Voir Readme / TODO

**************************

https://cdn.epic.net/uploads/2022/07/epic-moments_of_happiness-chill_the_lion-loop-ld.mp4

![bg](https://www.vertexshaderart.com/cfs/files/images/vmbz8fi0evme0msb6-thumbnail.jpg)

![bg 100%](https://ipfs.io/ipfs/Qmb8ayrfFzwyMQr4p5ru6V5bLD7v3qodxjnRWvmeAy5SD9)

![bg 100%](https://ipfs.io/ipfs/Qmd91vgr2dxRxFdaaRRVWNmqhfqejB2UbRRgsEnbyPxWP4)

![bg 140%](https://images.unsplash.com/photo-1589431882969-f74b941beb0e)

![bg](https://images.unsplash.com/photo-1505299344687-ee45ad431f9b)

<!-- _footer: cover art "unnamed" by zug https://www.vertexshaderart.com/art/XK2y2Cy63Ez45E7pm

<!-- _footer: image de couverture: https://teia.art/objkt/627718

<!-- _footer: cover art: Mitchell Kavan https://unsplash.com/@mtk

<!-- _footer: photo de couverture: Steven Ramon https://unsplash.com/@ssttevven

![bg fit](https://i.sstatic.net/H8fpQ.png)

![bg fit](https://blog.mozvr.com/content/images/2018/02/a-painter-optimization-1.png)

![bg fit](https://blog.mozvr.com/content/images/2018/02/a-painter-optimization-4.png)

<!-- _class: lead <!-- _paginate: false # **LUNCH BREAK** # :ramen: back at 1:30 PM ---

https://www.youtube.com/watch?v=zBJXXcFy6iU

--- ## [Utilisation de Parcel](https://parceljs.org/getting-started/webapp/) - appeler le bundler directement ``` npx parcel src/index.html ``` --- - ou modifier `package.json` ```json { "name": "my-project", "source": "src/index.html", "scripts": { "start": "parcel", "build": "parcel build" }, "devDependencies": { "parcel": "latest" } } ``` ``` npm start ```

- https://github.com/torinmb/threejs-parcel-es6-starter - https://github.com/DrSensor/js13k-parcel

<!-- _class: <!-- _paginate: # **BREAK** # 30' :hourglass: ---

![bg](https://global.discourse-cdn.com/standard17/uploads/threejs/original/3X/8/7/87055891d6d592cf5e92a296bcdb82183412dd57.png)

ENSG

- [WolfECS](https://github.com/EnderShadow8/wolf-ecs) - [Ape-ECS](https://github.com/fritzy/ape-ecs)

- [nopun-ecs](https://codeberg.org/wbehncke/nopun-ecs)

https://gitlab.inria.fr/Loki/PolyphonyECS