Web GL : cours 1

Introduction à WebGL

PF Villard d'après le cours de Eric Haines (Autodesk Inc.) disponible sur Udacity

Objectifs

  • Pouvoir développer des sites avec WebGL
  • Comprendre des algorithmes liés à la synthèse d'images
  • Anticiper les contraintes liées à un choix de méthode pour un rendu
  • Connaître les techniques de rendu en 2018

Web GL

  • GL veut dire Graphics Library
  • Inclu dans la plupart des navigateurs internet
  • Une exception : Internet Explorer
  • Il peut y avoir des problème avec des vielles cartes graphiques
  • A tester sur son ordinateur perso !

THREE JS

  • Possible de coder en pure webGL (cf livres à la bibli)
  • Mais résulte en 100aine de lignes de codes !
  • → Utilisation de Three.js
  • = Utilitaire gratuit

Intégration d'un script WebGL 


<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>Ma première application Three.js
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="js/three.js">
		<script>
			// Le script Javascript ici.
		</script>
	</body>
</html>

Exemple de scène


var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var render = function () {
	requestAnimationFrame( render );

	cube.rotation.x += 0.1;
	cube.rotation.y += 0.1;

	renderer.render(scene, camera);
};

render();

Démo

Fonctionnement des TD/TP

Pour chaque TD/TP, télécharger l'archive exercicesWebGL.zip et dézipper la. Elle contient :

  • Un fichier Exercices.html à ouvrir dans un navigateur pour vérifier l'exécution d'un exercice
  • Un dossier lib qui contient la bibliothèque THREE.JS
  • Un dossier media qui contient des images et autres données extérieures utilisées par les exercices
  • Des dossiers coursi avec i qui correspond au cours lié à l'exercice (exemple : cours1 = exercices sur le cour 1 - Points, vecteurs et maillage)

Procedure pour les TP

  • Pour chaque exercice, il faut se rendre dans le dossier correspondant au cours et éditer le fichier JavaScript.
  • Par exemple, pour l'exercice 1-7, creation d'escalier:
    1. editer le fichier creation-escalier.js se trouvant dans le dossier cours1
    2. exécuter le en ouvrant Exercices.html dans un navigateur et en sélectionnant creation-escalier
				
function createStairs() {
	var stepMaterialVertical = new THREE.MeshLambertMaterial( {
		color: 0xA85F35
	} );
	var stepMaterialHorizontal = new THREE.MeshLambertMaterial( {
		color: 0xBC7349
	} );
	var stepWidth = 500;
	var stepSize = 200;
	var stepThickness = 50;

	var verticalStepHeight = stepSize;
	var horizontalStepDepth = stepSize*2;

	var stepHalfThickness = stepThickness/2;

	var stepVertical = new THREE.CubeGeometry(stepWidth, verticalStepHeight, stepThickness);
	var stepHorizontal = new THREE.CubeGeometry(stepWidth, stepThickness, horizontalStepDepth);
	var stepMesh;

	stepMesh = new THREE.Mesh( stepVertical, stepMaterialVertical );

	stepMesh.position.x = 0;
	stepMesh.position.y = verticalStepHeight/2;
	stepMesh.position.z = 0;
	scene.add( stepMesh );

	stepMesh = new THREE.Mesh( stepHorizontal, stepMaterialHorizontal );
	stepMesh.position.x = 0;
	stepMesh.position.y = stepThickness/2 + verticalStepHeight;
	stepMesh.position.z = horizontalStepDepth/2 - stepHalfThickness;
	scene.add( stepMesh );	
}

Suite : POINTS, VECTEURS ET MAILLAGE

Points, Vecteurs Et Maillage