WebGL: les Blogs à Suivre





JeGX m’a demandé de faire un point sur le WebGL et les sites qui proposent des tutoriaux:

Le premier en vue est learningwebgl mais avant tout il faut se procurer un navigateur capable de rendre des scènes WebGL ; le plus stable semble bien être Minefield, la version expérimentale de Firefox qu’il vous faudra configurer selon les bons conseils de LearningWebgl.

Les tuto de ce site sont repris de la célèbre suite de NeHe sur OpenGL.
Les scènes basiques fonctionnent bien dans le navigateur parfois avec les textures arrivant avec un léger retard. Le redimensionement du canvas avec la page est sympa mais on constate parfois un rythme un peu hâché, comme décalé de la synchro verticale.

La particularité de tous ces exemples et tuto en WebGL c’est le recours à des librairies javascript extérieures pour des calculs de matrices ou des tâches non intégrées à WebGL comme la définition de la vue perspective.

Ainsi dans la leçon N°1 de Learning Web les fonctions Matrix, makePerspective ne sont pas du WebGL mais des renvois à deux libs glUtils
et Sylvester:

  var mvMatrix;

  function loadIdentity() {
    mvMatrix = Matrix.I(4);
  }


  function multMatrix(m) {
    mvMatrix = mvMatrix.x(m);
  }


  function mvTranslate(v) {
    var m = Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4();
    multMatrix(m);
  }


  var pMatrix;
  function perspective(fovy, aspect, znear, zfar) {
    pMatrix = makePerspective(fovy, aspect, znear, zfar);
  }


  function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, new WebGLFloatArray(pMatrix.flatten()));
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, new WebGLFloatArray(mvMatrix.flatten()));
  }

Le blog rozengain.com propose justement de voir à quoi ressemble du code WebGL sans aucun lien vers une librairie tierce. Par exemple pour réaliser la vue perspective sans la lib Sylvester:

//    Define the viewing frustum parameters
//    More info: http://en.wikipedia.org/wiki/Viewing_frustum
//    More info: http://knol.google.com/k/view-frustum
var fieldOfView = 30.0;
var aspectRatio = canvas.width / canvas.height;
var nearPlane = 1.0;
var farPlane = 10000.0;
var top = nearPlane * Math.tan(fieldOfView * Math.PI / 360.0);
var bottom = -top;
var right = top * aspectRatio;
var left = -right;

//     Create the perspective matrix. The OpenGL function that's normally used for this,
//     glFrustum() is not included in the WebGL API. That's why we have to do it manually here.
//     More info: http://www.cs.utk.edu/~vose/c-stuff/opengl/glFrustum.html
var a = (right + left) / (right - left);
var b = (top + bottom) / (top - bottom);
var c = (farPlane + nearPlane) / (farPlane - nearPlane);
var d = (2 * farPlane * nearPlane) / (farPlane - nearPlane);
var x = (2 * nearPlane) / (right - left);
var y = (2 * nearPlane) / (top - bottom);
var perspectiveMatrix = [
	x, 0, a, 0,
	0, y, b, 0,
	0, 0, c, d,
	0, 0, -1, 0
];

A surveiller aussi les sites:

-GLGE avec des démos de brouillard, d’ombres et de lumières dynamiques.

-C3DL avec des tutoriaux sur la lumière et les modèles Collada

-SpiderGL avec de beaux exemples dont celui des textures polynomiales sur lesquelles on fait varier l’éclairage

-Prometteur et doté d’une belle console en ligne, le site de Lindsay Kay
SceneJS. Il est un peu plus complexe d’y appréhender l’ensemble des fonctions et l’organisation des éléments

Par exemple le chargement d’un nuage de teapots par une fonction stockée extérieurement:

 generator(
	(function() {
		var elems = [];
		for (var i = 0; i < 500; i++) {
			elems.push({
				x: (250 * Math.random()) - 125.0,
				y: (50 * Math.random()) - 25.0,
				z: (1800 * Math.random()) - 250.0
			});
		}
		var j = 0;
		return function() {
			if (j < elems.length) {
				return { param: elems[j++] };
			} else {
				j = 0;
			}
		};
	})(),
	translate(function(scope) {
		return scope.get("param");
	},
			scale(function(scope) {
				return {
					x:2 ,
					y:2,
					z:2};
			},
					objects.teapot()
					)
			)
	)
)

Autre nouveauté: le X3D n'est pas mort ! Grâce à l'institut Fraunhofer, il est même sauvé par le WebGL.



le framework X3DOM encapsule des scènes X3D via le Document Object Model manipulé en Javascript. Les exemples fournis sont très élégants avec des vues à multiples viewports, l'emploi de Jquery... voyez l'exemple avec :
plusieurs types de fichiers video en textures

2 Comments

  • March 2, 2010 - 4:48 am | Permalink

    Bonjour!

    Thank you for mentioning SceneJS.

    V0.7.0 is coming soon, featuring view frustum culling, level-of-detail, memory management, simpler API and more speed.

    Join the SceneJS FaceBook group at: http://www.facebook.com/group.php?gid=350488973712&ref=mf

    thanks,
    Lindsay Kay

  • Matumbo
    March 2, 2010 - 9:06 am | Permalink

    Merci pour le récap les gars.

  • Comments are closed.