Apprendre à faire de la 3D

Il existe de nombreux langages pour faire de la 3D sur internet, à chaque langage est associé un ou plusieurs plug-in permettant de les afficher. Résultat même si ces langages sont très performants, l'internaute qui n'est pas un fan de 3D n'a jamais le bon plug-in.
Cependant un langage se détache du lot, le VRML pour Virtual Reality Modeling Language, bien qu'il ne soit pas le plus performant, il a plusieurs avantages: c'est un standard du net, il existe plus d'une dizaine de plugs-in, il est reconnu par tout les logiciels de 3D, et surtout il peut fonctionner avec des afficheurs Java donc sans plug-in. Son évolution se fait au travers du X3D qui permet de développer des extensions et la communication avec d'autres langages

Le VRML 2 ou VRML 97 (c'est le meme) est un langage simple qui permet de décrire un monde en 3D et de l'animer. Il possède des interfaces avec le Java et le Javascript. Il est possible de programmer en utilisant un logiciel de 3D ou un simple traitement de texte. Bien que la taille des fichiers soient souvent plus importantes avec les logiciels, ils sont de bonne qualité et peuvent être modifiés à la main notamment pour implementer les animations et interfaces Java ou Javascript. La création de ses interfaces nécessite de connaitre le vrml. Voici donc un tutorial en Francais sur le VRML 2 que vous pouvez télécharger.

	Pour voir ces deux exemples, la souris et le train, il faut un plug-in vrml, Cortona est l'un d'eux.

Pour créer des objets ou des scènes complexes, les compacter et les retravailler il est nécessaire d'avoir quelques logiciels. En voici trois, aussi excellents que totalement gratuits:

BLENDER est un logiciel de création graphique 3D qui surpasse largement les capacités du vrml et se veut un challenger du célèbre 3DSmax. Ce logiciel en open source est incontournable et très populaire, de nombreux tutoriaux sont disponibles sur internet en anglais mais aussi en français.
Téléchargez le chez www.blender.org

CHISEL est un indispensable pour le programmeur VRML, il corrige, compacte, simplifie et nettoie les fichiers vrml exportés par les logiciels de 3D. D'une efficacité remarquable, ce logiciel place dans le domaine publique à la fermeture de Trapezium produit des fichiers tout à fait clair et structurés.
Vous le trouverez à cette adresse: www2.hrp.no/vr/tools/chisel/install.htm

CONTEXT est un éditeur de texte pour programmeur qui a l'avantage de colorer de nombreux langages en fonction de leurs syntaxes (pas le vrml, mais les java, html, javascript, ect) Il peut ouvrir plusieurs fichiers à la fois, il décale et compte les lignes automatiquement. Je l'utilise pour toutes les retouches sur mes fichiers VRML et HTML.
Il est disponible chez www.context.cx

* Depuis que le Java n'est plus integré à Windows, il est necessaire d'installer le plug-in Java.

Pour utiliser de la 3D, il est nécessaire d'avoir un afficheur ou moteur 3D. En effet le vrml ne fait que décrire une scène mais n'est pas un programme autonome.
L'afficheur peut être une applet Java incorporée dans la page web et qui sera chargée automatiquement sans que l'utilisateur n'ai rien a faire.
L'utilisation de ce systeme nécessite des connaissances en html, java, javascript et bien sur vrml.

Dans cet exemple il y a deux applet: Blaxxun 3D l'afficheur vrml et fauteuil.class qui sert d'interface avec l'utilisateur.
Il faut bien comprendre que Blaxxun3D ne fait qu'afficher la scène 3D et renvoyer les évènements de souris. Toutes les interactions avec l'utilisateur doivent être programmées indépendement. Ce qui présente un gros avantage: nous pouvons créer une interface spécifique à chaque demo.

Nous allons voir ici le fonctionnement de fauteuil.java. Je ne décrirai pas le systeme de connection entre cette applet et Blaxxun3D, la documentation fournie avec est très complète quoiqu'en anglais. Voici le code source de cette applet fauteuil.java

Note: pour compiler cette applet il est necessaire d'utiliser la library fournie avec blaxxun 3D.

Voici pour commencer la connection entre le java en bleu et le vrml en rouge. Le nom situe apres le DEF dans le VRML est utilise dans l'applet pour l'indentifier.Notez qu'il faut se connecter au noeud fauteuil avec browser.getNode() avant de pouvoir atteindre le champ rotation avec fauteuil.getField(). browser est le nom donnée a l'applet blaxxun 3D dans son champ name.

private boolean connectNodes(){ try { fauteuil=browser.getNode("fauteuil"); fauteuilRot=fauteuil.getField("rotation"); tempsTable=browser.getNode("TEMPSTABLE"); tempsTableStart=tempsTable.getField("startTime"); tempsEcran=browser.getNode("TEMPSECRAN"); tempsEcranStart=tempsEcran.getField("startTime"); dossier=browser.getNode("dossier"); dossierRot=dossier.getField("rotation"); (...) } }

#vrml v2.0 utf8 DEF fauteuil Transform { rotation 0 1 0 0 children [ Shape { appearance Appearance { material material { diffuseColor 0 0 1 } } geometry IndexedFaceSet { coord Coordinate { (...)

Pour la rotation du fauteuil, la fonction onEvent récupere la position de la souris transmise par l'evenement MOUSE_DOWN. La fonction update3D récupère la valeur de rotation dans le champ rotation du noeud fauteuil avec fauteuilRot.getValueFloatArray(), la modifie et la renvoie dans le vrml avec fauteuilRot.setValueFloatArray().

     public boolean onEvent(java.awt.Event event){
        switch (event.id){
            case java.awt.Event.MOUSE_DOWN:{
                x=event.x;
                break;
            }
            case java.awt.Event.MOUSE_DRAG:{
                update3d(event.x-x);
                x=event.x;
                break;
            }
        }
        return false;
    }

    public void update3d(int deltax){
        float[] rot=new float[4];

        rot=fauteuilRot.getValueFloatArray(0,-1);
        rot[3]+=deltax/40f;
        fauteuilRot.setValueFloatArray(0,-1,rot);

    }

<#script> function anime(v) { document.applet.anime(v); } function dossier(v){ document.applet.dossier(v); } function doNothing() { } <#/script>

<#img usemap="#map1" src="textures/boutons.gif"  width="153" height="80" border="0">
<#map name="map1">
<#area shape="rect" coords="20,7,45,32" href="Javascript:onClick=doNothing(1);" onMouseDown="dossier(1);" onMouseUp="dossier(5);" >
<#area shape="rect" coords="20,40,47,66" href="Javascript:onClick=doNothing(1);" onMouseDown="dossier(2);" onMouseUp="dossier(5);" >
<#area shape="rect" coords="66,26,92,51" href="Javascript:onClick=doNothing(1);" onMouseDown="dossier(3);" onMouseUp="dossier(5);" >
<#area shape="rect" coords="107,27,133,52" href="Javascript:onClick=doNothing(1);" onMouseDown="dossier(4);" onMouseUp="dossier(5);" >
<#/map>

comme pour la <#a href="javascript:anime(1);">tablette<#/a> et <#a href="javascript:anime(2);">l'ecran.<#/a>

public void moveTo(){
    float[] rot=new float[4];
    float[] trans=new float[3];

    switch (val){
        case 1:
            rot=dossierRot.getValueFloatArray(0,-1);
            if (rot[3]<1.1) rot[3]+=0.01;
            dossierRot.setValueFloatArray(0,-1,rot);
        break;
        (...)

        case 3:
            rot=jambeRot.getValueFloatArray(0,-1);
            if (rot[3]<1.1) {
                rot[3]+=0.01;
                jambeRot.setValueFloatArray(0,-1,rot);
                trans=piedTrans.getValueFloatArray(0,-1);
                trans[2]-=0.002;
                piedTrans.setValueFloatArray(0,-1,trans);
            }
        break;
        (...)
    }
}

    public void anime(int v){
        double arg=(double) System.currentTimeMillis()/1000;

        if (v==1){
            if (!flagTable){
                tempsTableStart.setValueDouble(arg);
                flagTable=true;
            }
        }
        if (v==2){
            if (!flagEcran){
                tempsEcranStart.setValueDouble(arg);
                flagEcran=true;
            }
        }
    }

    #vrml

    DEF TEMPSTABLE TimeSensor {
        cycleInterval 5
        loop FALSE
    }

L'animation du repose pied et du dossier utilise un système similaire à la rotation du fauteuil. Pour la tablette on envoie un startTime au TimeSensor TEMPSTABLE ce qui démarre une animation prégrogrammée dans le fichier vrml. La valeur du startTime est (double) System.currentTimeMillis()/1000 , même chose pour l'écran.

Le cube transparent

Vous pouvez télécharger Blaxxun3D v2 ici.C'est une version totalement gratuite sans limitation accompagnée de sa documentation. ATTENTION,la version que je propose ici est une version d'évaluation et ne devra pas etre utilisée sur des sites professionnels.

Il existe d'autres visualiseurs 3D en Java: Kaon, 3dAnywhere, Anfy et Sumea. Vous trouverez des details sur ces applets sur le site www.3dvf.com