Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Débuter avec Shockwave 3D

Compatible Director MX2004. Cliquer pour en savoir plus sur les compatibilités.Par glurp (Elliot Coene), le 16 février 2010

Première notions de 3D

Pour ce tutorial, je vais supposer que vous êtes déjà un peu familier avec la 3D, c'est à dire que vous avez déjà ouvert ou entendu parler de 3DSMax, OpenGL et DirectX, et que vous êtes un minimum familier avec les mathématiques.

Petit rappel lexical :
- Un vecteur est une liste de 3 chiffres, correspondant aux 3 axes de la 3D X, Y et Z, qui peut désigner un point (vertex) dans l'espace ou une direction (axe).
- Un modèle est un ensemble de vertex, arrêtes, faces, polygones, constituant une forme. Tout “objet 3D” est un modèle.
- Un shader définit le type de surface d'un modèle (brillance, texture, opacité, etc.)

La 3D sous Director

Pour faire de la 3D sous Director, il faut oublier tout ce que vous avez appris concernant les sprites et la timeline car ils ne seront pas utilisés. En effet, tout se passera au sein de l'acteur 3D, notre “monde”, qui contiendra tout ce dont nous aurons besoin.

Pour comprendre la structure d'un fichier Shockwave 3D, il suffit de le déplacer vers la barre de propriété dans “l'inspecteur d'objet” et de déplier les points hiérarchiques, ou d'utiliser un Xtras fort pratique pour tous ceux qui comptent travailler en 3D ; j'ai nommé 3DPI, qui offre selon moi l'interface qu'il manque à Director.

Notre monde 3D est donc constitué comme ceci :
- modelResource : contient les “modes d'emploi” pour fabriquer les modèles
- model : contient les instances des modelResource. Un modelResource n'est jamais directement affiché, il est donc toujours obligatoire de créer nos models avant de les afficher et contrôler.
- light : contient toutes les lumières du mondes (8 maximum en simultanées)
- shader : comme expliqué plus haut, il s'agit de la couche qui recouvre nos models
- texture : contient toutes les textures (images bitmap destinées à être appliquées aux shaders)
- camera : contient toutes les cameras
- motion : contient les différentes animations créées dans un programme 3D. Elles peuvent être en keyFrame ou en bones (utilisation d'articulations).
- group : contient tous les groupes créés

Un petit exemple

Pour visualiser chaque étape de la création d'une application 3D, nous allons fabriquer un exemple simple. D'abord il faut préparer la scène 3D, puis nous allons y introduire une sphère, un sol et un cylindre, et enfin nous tenterons d'animer la sphère autour du cylindre.

Créer un nouveau projet, puis faites Insertion > élément de média > Shockwave 3D pour créer un nouvelle acteur 3D que vous nommez “scene”.
Placez cette acteur scène sur la timeline de la frame 1 à la frame 20 et faites en sorte que l'acteur recouvre le stage.
Voilà, c'est la dernière fois que nous utiliser la timeline :) .

Faites un clic droit sur le sprite et créer un script que vous nommerez “scene_behavior”.
Pour cette exemple je choisis d'être simple, j'écrirai donc tout le code au sein de ce script de comportement.

Préparons d'abord les événements de bases dont nous avons besoin :

property pWorld
 
on beginsprite me
  pWorld = sprite(me.spritenum).member  
end
 
on exitframe me
  go to the frame
end

Nous allons commencer par créer une fonction “createResources” qui créera toutes les resources nécessaires :

on createResourcesAndModels me
 
  -- Initialise le monde --
  pWorld.resetWorld()
 
  -- Création des resources --
  tSol = pWorld.newmodelresource("sol", #plane)
  tSol.width = 1000
  tSol.length = 1000
 
  tSphere = pWorld.newmodelresource("sphere", #sphere)
  tSphere.radius = 20
 
  tCylindre = pWorld.newmodelresource("cylindre", #cylinder)
  tCylindre.height = 100
 
  -- Création des models --
  pWorld.newmodel("sol", pWorld.modelresource("sol"))
  pWorld.newmodel("sphere", pWorld.modelresource("sphere"))
  pWorld.newmodel("cylindre", pWorld.modelresource("cylindre"))
 
end

Ensuite, nous allons les positionner correctement.
Tous les models, cameras, lumières et groupes possèdent une propriétés “transform” qui est un objet de transformation gérant les positions, les rotations et les axes.
C'est donc cet objet que nous allons manipuler dans une fonction appelée “setTransform”.

on setTransform me
 
  -- Rotation pour avoir un sol plat --
  pWorld.model("sol").transform.rotation = vector(90,0,0)
 
  -- La sphere est placée à côté du cylindre --
  pWorld.model("sphere").transform.position = vector(50, 50, 0)  
 
  -- On remonte le cylindre pour le poser sur le sol --
  pWorld.model("cylindre").transform.position = vector(0,50,0)
 
  -- Déplacement de la camera en hauteur, regardant légèrement vers le bas --
  pWorld.camera[1].transform.position = vector(0, 100, 300)
  pWorld.camera[1].transform.rotation = vector(-15,0,0)
 
 
end

Ensuite vous pouvez déjà ajouter l'appel aux deux fonctions dans le beginSprite et lancer l'application. Vous devriez alors voir tous vos éléments placés correctement, mais pas encore texturés.
Nous allons donc créer une fonction “addTextures”, mais avant, importez 3 images bitmap différentes respectant le format en puissance de 2 (c'est très important de respecter cette règle).
Pour ma part j'ai 3 images en 128*128 appelées “sphere”, “sol” et “cylindre”.
Pour le moment, les models ont tous le même shader par défaut, il va donc d'abord leur créer leur shader avant de pouvoir y placer les textures :

on addTextures me
 
  -- Création des shaders différents --
  tShaderSol = pWorld.newshader("sol", #standard)
  tShaderSphere = pWorld.newshader("sphere", #standard)
  tShaderCylindre = pWorld.newshader("cylindre", #standard)
 
  -- Modifions certaines propriétés --
  tShaderSol.shininess = 0
 
  tShaderSphere.shininess = 10
  tShaderSphere.specular = rgb(255,255,255)
 
  -- Applique les shaders --
  pWorld.model("sol").shader = tShaderSol
  pWorld.model("sphere").shader = tShaderSphere
  pWorld.model("cylindre").shader = tShaderCylindre
 
  -- Création des textures --
  tTextureSol = pWorld.newtexture("sol", #fromCastMember, member("sol"))
  tTextureSphere = pWorld.newtexture("sphere", #fromCastMember, member("sphere"))
  tTextureCylindre = pWorld.newtexture("cylindre", #fromCastMember, member("cylindre"))
 
  -- Applique les textures --
  tShaderSol.texture = tTextureSol
  tShaderSphere.texture = tTextureSphere
  tShaderCylindre.texture = tTextureCylindre
 
end

Ajoutez l'appel à addTextures dans le beginSprite et admirez le résultat.

Pour conclure ce tutorial, il ne reste plus qu'à animer la sphere. Comme vous avez pu le voir dans setTransform, il suffira de modifier le transform du model sphere dans le temps.
Pour ce faire, j'ai choisi d'utiliser l'évènement prepareFrame

on prepareframe me
 
  tTransform = pWorld.model("sphere").transform
 
  tTransform.rotate(0,2,0)
 
end

Et voilà le résultat, votre première application 3D !

En savoir plus