3d avec webgl + mesh

Soyez le premier à donner votre avis sur cette source.

Vue 7 199 fois - Téléchargée 1 121 fois

Description

Avant toute chose : cette source est un test et dispose de grosse erreur de conception, et des manque dûe à une maitrise imparfait du comportement de WebGL.

Maintenant passons aux choses interessantes :
- Importation de fichier X (Modèle 3D sur un formalise DirectX textuel)
- Gestion camera en vue à la 1ere ou 3eme personne
- Texturing
- Gestion de "ciel"
- Implementation de collision rudimentaires basé sur de la 2D (vue de dessus) sur un calcul d' "empatement" cubique (seulement sur les axes X/Z)
- Gestion d'un File.x mesh comme matrice de sol
- Manipulation des File.x mesh

Les points negatifs :
- Le code manque de commentaires (mais pour ca malheuresement, il y a un tel volume que tout commenté rend le code illisible -__-)
- Gros problème de gestion de la lumière (défaut du en partie à une mauvaise gestion de transformations des vecteur normaux)
- Parfois quelques rattage des transformations du à une gestion synchrone et asynchorones des operations sur le moteur (que j'ai aussi codé et qui parfois se rate un peu aussi)
- Collision au sol un peu approximative, car les calcul d'intersection de droite et de plan revienne lourd pour un grand nombre de facette
- Decoupage en objet/sous objet discutable au niveau analytique
- Ne gère pas les modèle multi-textures (pas pris en compte dans la methode d'importation)
- Ne gère pas les materials/map bumping/texture shader
- Pas prevu pour l'implementation de l'alphabending (mais c'est codé au niveau moteur)
- Vous aurez besoin d'un serveur HTTP, car Ajax ne charge pas les fichier locaux
- Vous aurez besoin d'activer WebGL sous firefox

Les contraintes au niveau navigateur sont les mêmes que pour cette source précedente :
http://www.javascriptfr.com/codes/3D-AVEC-WEBGL_53335.aspx

Pour ceux qui veulent tester sous de suite sans lire le code (oh oui je vous comprend)
- Maintenez le clic droit pour que je mouvement de la souris se repercute sur l'angle de la camera
- Avancer/reculer/gauche/droite : Touches R/F/D/G
- Reculer/avancer la vue à la 3eme personne : molette souris
- Modifier les post effet sur textures : Touches 1/2/3/5/6 (1 : normal)

Attention de ne pas poussez le FPS trop haut, certaines actions du moteur de font en plusieurs top pour des question de performances, donc risque d'anomalie sur un FPS trop elevé

Source / Exemple :


// Juste en JS le fichier de lancement et de boucle principal....tout simple, non ?

var gui = 			null;
var fps = 			null;
var camera = 		null;
var map = 			null;

function Start(){

	fps = 		new Fps(10);
	gui = 		new Gui('html_gui');
	camera = 	new Camera();
	map = 		new Map('e2d_gui', 'e3d_background', 'e3d_scene', function(e){ console.log(e); });
	
	EventsListener.CaptureStart(window);	// Capture d'evenements
	EventsListener.ContextMenuLock();		// Bloque le menu contextuel

	XHR.SetCache(true);						// Active le cache fichier (pour eviter les chargement multiples)
	LoadLights3D();							// Charge les lumières
	LoadObject3D();							// Charge la scene
	XHR.ClearCache();						// Vide le cache fichier

	FullScreen();							// Maintient l'interface a la taille de la fenetre
	Loading();								// Attend la fin du chargement			

}
function FullScreen(){
	window.onresize = function(){
		var main = document.getElementById('main');
		var width = main.offsetWidth;
		var height = main.offsetHeight;
		var coef = width/height
		if(coef>document.body.offsetWidth/document.body.offsetHeight){
			// Fullscreen Paysage
			width = document.body.offsetWidth;
			height = Math.round(width/coef);
		} else {
			// Fullscreen Portrait
			height = document.body.offsetHeight;
			width = Math.round(height*coef);
		}
		main.style.display = 'none';
		main.style.width = width + 'px';
		main.style.height = height + 'px';
		main.style.display = 'block';
	}
	window.onresize();
}

function LoadLights3D(){
	map.setAmbiantLighting(0.8, 0.8, 0.8);
	//map.setPointLighting('lux1', 0, 5, 0, 0.3, 0.3, 0.3);
}

function LoadObject3D(){
	map.LoadMapFileX('./mesh/map.x');						// Fichier de sol
	map.LoadBackgroundFileX('./mesh/background.x');			// Fichier de fond 3D

	map.LoadObjectFileX('player', './mesh/pointeur.x');		// Un objet 3D servant de pointeur de joueur
	map.setObjetCollision('player', true);					// Active la collision cubique

	map.LoadObjectFileX('caisse0', './mesh/caisse.x');		// Un objet
	map.ScaleObject('caisse0', 0.4, 0.4, 0.4);				// Etirement
	map.TranslateObjectTo('caisse0', 20, 0, -20);			// Translation
	map.RotateObjectTo('caisse0', 0, 0.4, 0);				// Rotation
	map.setObjetCollision('caisse0', true);					// Active la collision cubique

	map.LoadObjectFileX('caisse1', './mesh/caisse.x');		// Un objet
	map.ScaleObject('caisse1', 0.3, 0.3, 0.3);				// Etirement
	map.TranslateObjectTo('caisse1', 10, 0, -20);			// Translation
	map.RotateObjectTo('caisse1', 0, -0.4, 0);				// Rotation
	map.setObjetCollision('caisse1', true);					// Active la collision cubique
	
	map.LoadObjectFileX('potence', './mesh/potence.x');		// Un objet
	map.ScaleObject('potence', 3, 3, 3);					// Etirement
	map.TranslateObjectTo('potence', -54, 7, 5);			// Translation
	map.RotateObjectTo('potence', 0, 1.57, 0);				// Rotation
	map.setObjetCollision('potence', true);					// Active la collision cubique
	
}
function Loading(){
	if(map.Loaded()){
		Loop();					// Lance la boucle principale
	} else {
		setTimeout('Loading()', 200);
	}
}
function Loop(){

	// Comportement au clavier
	var keys = EventsListener.KeysPressed();
	for(key in keys){
		key = keys[key];
		switch(key){
			// Effet sur les textures
			case 49: map.setTextureEffect('NONE'); break; 		// Touche 1
			case 50: map.setTextureEffect('GRAYSCALE'); break;	// Touche 2
			case 51: map.setTextureEffect('NEGATIVE'); break;   // Touche 3
			case 53: map.setTextureEffect('SATURATE'); break;	// Touche 5
			case 54: map.setTextureEffect('WIREGRID'); break;	// Touche 6
			// Deplacement de l'objet principal (avec application de collision)
			case 82: map.MoveObject('player', 1); break; 		// Touche R
			case 68: map.StrafeObject('player', -1); break;		// Touche D
			case 70: map.MoveObject('player', -1); break;		// Touche F
			case 71: map.StrafeObject('player', 1); break;		// Touche G
		}
	}		
	
	// Gestion camera a la souris
	var p = map.getObjectPosition('player');
	p.y += camera.height;
	camera.SyncEvent(EventsListener, p);

	// Rotation de l'objet selon l'angle de la camera
	map.RotateObjectTo('player', 0, camera.angle.y, 0);
	
	// Map
	map.Redraw2D(camera, {x:590, y:10, width: 200, height: 150}, 1.5);
	map.Redraw3D(camera);
	
	// Bouge le pointeur de joueur
	map.TranslateObjectTo('player', camera.look_at.x, camera.look_at.y-camera.height, camera.look_at.z);
	
	// Affichage
	gui.Clear();
	gui.Write('FPS  '+fps.FPS());
	gui.Write('');
	gui.Write('Camera px:'+camera.position.x);
	gui.Write('Camera py:'+camera.position.y);
	gui.Write('Camera pz: '+camera.position.z);
	gui.Write('');
	gui.Write('Camera ax:'+camera.angle.x);
	gui.Write('Camera ay:'+camera.angle.y);
	gui.Write('Camera az: '+camera.angle.z);
	gui.Write('');
	gui.Write('Camera Thrid Person far :'+camera.distance);
	gui.Write('');
	gui.Write('Texture effect: '+map.getTextureEffect());
	
	// Bouclage
	EventsListener.CaptureRelease();
	fps.FPS_Loop('Loop()');
}

Conclusion :


La encore, c'est experimental, mais entrevoir les capacité de WebGL reste très stimulant, notamment dans le domaine du jeu.
Amis geek, regalez vous !

Vous devrez tout de même pour compendre cette source en detail avoir deja de bonne base en moteur 3D (trigonometrie, matrices, buffer, connaissance des decoupes de type vertex/faces, etc...)

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
706
Date d'inscription
mercredi 17 novembre 2004
Statut
Membre
Dernière intervention
29 septembre 2013

Bonjour,

Pour ma part l'exemple est fonctionnel sur les dernières versions de Chrome et Firefox même si les performances en termes de FPS sont limites (en moyenne 9/10 avec un pc bureautique "standard").
C'est un très bon début (surtout quand on voit le peu de source "next-gen" sur ce site, notamment sur l'utilisation des canvas en jeux et animations 2d/3d). Néanmoins il serai pas mal de continuer a travailler sur le projet pour éclaircir le code, le commenter de manière explicite (balise commentaire) et implicite (meilleur nommage des variables, fonctions, objets...), voir même faire un petit tuto pour détailler la réalisation pas a pas...

Quoi qu'il en soit c'est un bon début, a améliorer, mais bon malgré tout.

Courage pour la suite ^^
Messages postés
33
Date d'inscription
jeudi 17 juillet 2008
Statut
Membre
Dernière intervention
23 juillet 2014

testé ton lien http://kiwik.goldzoneweb.info/webgl/ sous chrome (16)
et ça reste en écran gris....
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
ca marche par contre j'ai du mettre la source en ligne car ca ne marchait pas en local pour chrome comme pour firefox et pour ce dernier il n'y a que webgl.verbose que j'ai modifier en le mettant a true le reste est mis par default

le lien http://kiwik.goldzoneweb.info/webgl/

sinon c'est fonctionnel j'ai pas trop regardé les source j'ai entre apercu du canvas dans le fichier map en tous cas il y a une bonne quantité de code et de math et l'ensemble me parait bien codé et commenté

sinon au niveau des amélioration reglage quand on tourne avec la souris on fait environ un tier de tours avant de sortir de la zone se serait mieux si on pouvait faire un tour complet et il me semble inutile de devoir appuyer sur le clic droit pour faire cette manipe

et pour finir sa fonctionne bien

ps: c'est pour quand l'adaptation de unreal avec webgl
Messages postés
41
Date d'inscription
dimanche 10 octobre 2004
Statut
Membre
Dernière intervention
17 décembre 2010

C'est precisé dans la source donnée en reference ^^.
webgl.force-enabled => true
Dans certains cas, si il y a des raté (deformation anormale de mesh)
webgl.verbose => true
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
j'ai ca comme paramètres

webgl.disable-extensions : false

webgl.disabled : false

webgl.force-enabled : false

webgl.force_osmesa : false

webgl.min_capability_mode : false

webgl.msaa-force : false

webgl.msaa-level : 2

webgl.osmesalib :

webgl.prefer-native-gl : false

webgl.shader_validator : false

webgl.verbose : false
Afficher les 7 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.