Pour jouer avec des vidéos dans un espace 3D il n’est pas nécessaire d’employer WebGL.
Craftymind présente ses essais avec l’appel drawImage() de l’API Canvas du HTML5:

Pour l’effet en live:
c’est là.

Voir un extrait du code:

copy.drawImage(video, 0, 0);
draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);

Cette “video dome” –visible avec un navigateur WebGL valide– donne seulement à voir une rue mais produit un effet de téléprésence et de liberté troublant. D’autant plus qu’une fois la video arrêtée, le panorama reste orientable…

La signature des librairies est la suivante :
script type=”text/javascript” src=”../../external/Sylvester.src.js”> script>
script type=”text/javascript” src=”../../src/gameglu.js”> script>
script type=”text/javascript” src=”../../src/webglu.js”> script>

On peut se demander si le MIT qui travaille sur le ‘raccordement’ de video pour enrichir les émissions de télévision avec leur hors champs a mis lui aussi du webgl dans ses équations.

Comme Iq avec son Shader toy 2 , des acteurs de la Demoscene trouvent désormais avec WebGL une façon encore plus immédiate de donner à voir le coeur de leurs codes.

Les amateurs et débutants pourront -avec grand soin et respect- tritouiller shaders et fonctions ésotériques et vérifier leurs intuitions directement dans leur browser ! (rappel : Minefield, Chromium, Webkit…).

Mais attention, quelques démos comme les superbes “Cube torus” et “Super Spongy” sont chatouilleuses. Mal choisis, les paramètres de shaders pourraient vous ramener à cet autre classique: le BSoD…(blue screen of death)

Tout cela est encore expérimental et renoue avec la fraîcheur des défis de codeurs.

Via le site Learning Webgl une démo qui met en oeuvre le ray tracing dans un canvas WebGL.

la démo c’est par ici (toujours pour les navigateurs aptes au WebGL Minefield, Chromium, Webkit)

Et surtout le making of avec l’ensemble des shaders mais des commentaires en japonais uniquement…

Après une sympatique démo de système solaire dansant à l’electro

C’est ce que nous propose les “Worlds of WebGL” de Jacob Seidelin

A consommer sans modération mais avec un browser WebGL valide (Minefield plutôt que Chrome…)

On se penchera ensuite sur le code javascript pour voir s’il s’agit de particules, d’instances avec du LOD et comment le vertex shader travaille les coordonnées etc etc…

Le site Pcpro indique que lors du CeBIT des chercheurs de l’Université de Sarre et du centre de recherche allemand en intelligence artificielle ont fait une démonstration d’un concurrent possible pour WebGL et O3D, le XML3D

L’article anglais parle de ‘ray tracing’ … dans un browser ?

Rien n’est téléchargeable pour l’instant, il ne nous reste donc qu’un petit film à disséquer (celui au début du billet).

Autre source d’info et discussion sur les différences avec le VRML et X3D : le bulletin de l’ambassade de France en Allemagne

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

Il s’agit de simples observations de plans ou de volumes de liquides et donc pas de simulation informatique. Historiquement, cette science relie la physique et d’autres champs comme la lutherie, pour l’étude des résonances acoustiques des instruments. www.cymatics.org.

Mais depuis que la sonde Cassini a confirmé la présence d’une structure hexagonale sur Saturne, l’astronomie…et l’Ufologie se mêlent aussi de cymatique…

Pour les amateurs de simulations 2D et 3D le site Cymatics renvoie aux applets java de Paul Falstad pour les figures d’interférences de base.

Au fait ça ferait de beaux tests OpenCL des vagues 3D ?

SocialLua est une librairie Lua dont le but est de proposer une interface pour les principaux sites web 2.0 et reseaux sociaux comme Twitter. La documentation est pour le moment très limité mais on peut imaginer que d’autres sites comme digg ou stumbleupon seront par la suite supportés.

Comme GeeXLab supporte Lua, vous pouvez normalement tester cette librairie de manière relativement simple.

require("social.twitter")
social.twitter.tweet("Hello from SocialLua!", username, password)

Pas seulement geeks dans la pénombre mais aussi représentants des Lumières à leur façon.

Admiration oui, mais aussi Explication.

Ainsi vous avez certainement plané sur le synthé de la démo elevated
eh bien planchez maintenant…