Fonction qui déforme une image selon les 4 points du quadrangle

Bonjour,

Je recherche partout, en vain, une fonction (ou une API) javascript qui déforme une image selon les 4 points de ces côtés... J'ai essayé de la faire toute la nuit mais je suis juste arrivé à stretché une image si les lignes point1->point2 et point3->point4 sont parralèles... Hors dans mon moteur, elles ne sont pas parralèles.

Je ne veux pas utilisé le webGL, mais j'utilise canvas par contre. Le but pour moi est d'habiller une map que je dessine avec des lineto. Chaque case est définie par 4 points (qui peut être de n'importe quelle forme). Aussi il me faudra une fonction qui me renvoit (ou me dessine directement selon ces 4 points) une image stretché...

J'ai trouvé des fonctions mais dans des langages de PC... tel pascal ou c++.

Salut !

Pourquoi exclure WebGL ? si c’est un problème compatibilité entre navigateur, il existe de nombreux plugins permettant d’y remédier ( unity , flash player 11 , … et bien d’autres )

Persister à rastériser tes quadrilatères texturés en JavaScript avec l’api Canvas 2D context me semble aberrant … les cartes graphiques depuis les années 90 ont été développés pour répondre a ton type de problème, l’api GL est développé depuis plus de 20 ans pour répondre a ton type de problème … pourquoi refuser ses technologies ?

ben, le truc c'est que j'ai pas trouvé un bon tuto en webGL, j'ai firefox 12 mais il est pas compatible, alors ça m'a vite refroidi. En plus, j'en ai besoin que pour cela, alors je me suis dis que je pourrais faire sans.
Mais tu as raison, tu sais où je peux trouver un bon tuto?

L'API Canvas 2d est limitée par le fait que tu appliques une matrice de transformation à ton opération. Ce qui veut dire que si tu es en train de dessiner une image sur le canevas et que tu veut déformer cette image, c'est possible mais il y aura une relation mathématique entre les différents points. Le mieux que tu puisses obtenir en fait, c'est un parallélogramme.
Hors toi tu veux que tes 4 points soient complètement indépendants. A ma connaissance, ce n'est pas possible avec l'API 2d, donc effectivement, tente ta chance du côté WebGL, mais là je ne connais pas du tout...

Pour ta version de firefox, il te faut peut-être activer WebGL en modifiant les préférences par about:config

Je sais pas si il existe un tuto WebGL meilleur qu’un autre, Souvent ces tutos se focalise sur une fonctionnalité de l’API, cela ne permet pas d’apprendre vraiment les concepts généraux sur la programmation d’un pipeline graphique. Perso j’aime bien les tutoriaux du site Nvidia, par exemple le début du chapitre 1 décrit ces concepts généraux ! Ne connaissant pas d’équivalant en WebGL / HLSL , je te conseil de suivre au moins les 3 1ers .

Tu mentionne, dans le titre de cette discussion, que tes quadrilatères sont des quadrangles, cela éveil ma curiosité, c’est une propriété peut commune cela résulte-il d’une projection ? dans quel contexte travaille tu ?

Merci de vos réponses

p3ga5e : heu je crois que je me suis un peut avancer sur 'quadrangle', en faite je ne sais pas ce que cela veux dire :aie: mais j'ai vu un topic sur un autre site où la personne voulais faire exactement ce que je veux et l'avais appelé comme cela...:lol:

Sinon si tu veux voir : lien moteur graphique

Pour le site de nvidia, j'irai voir, merci. Je me suis jamais mis à la 3d par manque de courage et de bon tuto (dans n'importe quel techno ou/et langage d'ailleurs).

Merci de vos réponse.

En fait, ce topic rejoins celui là topic.

Du courage ! tu n’as pas dû en manquer pour écrire un moteur 3D isométrique ! La prochaine étape serrat-elle l’écriture d’un moteur de Ray-casting ? Ainsi tu couvriras l’évolution des différentes techniques de rendu 3D temps réel des années 80 à nos jours :mrgreen:

N’hésite pas à sauter le pas pour la 3D, apprendre des techniques obsolètes n’est pas forcement inutile, mais ne perd pas de vue les techniques actuel (3D projeté) ou les éventuel techniques futures (peut être un moteur de Raytracing temps réel avec les technique de programmation // comme openCL ou l’extension River Trail )

Si ton but est d’étudier les techniques de génération de terrain je te conseil la technique Texture Splatting , très simple a mettre en œuvre elle permet d’obtenir un résultat saisissant !

p3ga5e :
Là, je suis en train de reproduire la physique de l'eau (enfin j'essaye :aie:) et c'est pas du tout évident...(Je dis bien la physique, genre on déclare qu'il y a tant de quantité d'eau sur une case et l'eau remplis les cases qu'elle devrait remplir en vrai). J'aurais du suivre en physique math au lycée :calim2:

Sinon, j'ai passé deux heures sur les liens que tu m'as donnée, j'ai suivi les tutos, et je ne suis même pas arrivé à afficher un canard en webgl donc j'abandonne la 3d aussi vite que je m'y suis mis...Trop compliqué pour quelqu'un qui bosse seul. J'espère bosser un jour avec quelqu'un qui s'y connait en 3d...

Mais merci beaucoup pour tous les tutos et liens que tu m'as donné. Quand j'aurais le temps, je m'y mettrais serieusement.

Au fait, j'ai découvert le jeu drakensang, quelqu'un sait avec quelle techno il est codé? (webgl je suppose...).
Impressionnant le jeu. A mon avis, c'est pas un projet amateur :P

slt,

pour revenir a la question.
Est-ce qu'il s'agit de trouver une transfo du style
soient les 4 points de limage a,b,c,d
soient les 4 points desires r,s,t,u
de trouver une fonction f telle que
f:a->r
f:b->s
f:c->t
f:d->u

parce que si cest le cas une transfo homographique fera l'affaire

Heu, je sais pas si j'i tout compris.
Mon but est:
j'ai 4 points à l'écran : (par sex, point1.x=100;point1.y=100;...;point4.x=200,point4.x=200)
Ces 4 points sont variables et il n'y a pas de logique entre eux. Pas de parallèle ou de perpendiculaire. En fait, cela forme un quadrilatère quelconque et je veux y mettre une texture dedans. Une texture étant représenté par une image (qui est carré), je cherche une fonction qui me lit cette image et me la déforme dans le quadrilatère.

Cela m'embête de sortir l'artillerie lourde (webgl) pour utilisé juste cette fonction, donc je la recherche en 2d simple...

http://stackoverflow.com/questions/4...g-html5-canvas

Merci merci merci :lol:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

function textureMap(ctx, texture, pts) { var tris = [[0, 1, 2], [2, 3, 0]]; // Split in two triangles for (var t=0; t<2; t++) { var pp = tris[t]; var x0 = pts[pp[0]].x, x1 = pts[pp[1]].x, x2 = pts[pp[2]].x; var y0 = pts[pp[0]].y, y1 = pts[pp[1]].y, y2 = pts[pp[2]].y; var u0 = pts[pp[0]].u, u1 = pts[pp[1]].u, u2 = pts[pp[2]].u; var v0 = pts[pp[0]].v, v1 = pts[pp[1]].v, v2 = pts[pp[2]].v;   // Set clipping area so that only pixels inside the triangle will // be affected by the image drawing operation ctx.save(); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.lineTo(x2, y2); ctx.closePath(); ctx.clip();   // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;   // Draw the transformed image ctx.transform(delta_a/delta, delta_d/delta, delta_b/delta, delta_e/delta, delta_c/delta, delta_f/delta); ctx.drawImage(texture, 0, 0); ctx.restore(); } }

---

Je vais voir si cette fonction marche, si c'est le cas, c'est merveilleux...

Bon cette fonction marche bien. Voilà le résultat...
test

Mais je crois que je vais faire une reconnaissance de frome plane et ainsi réduire le nombre de quadrangle à l'écran, ainsi je pourrai gérer les ombres.

Mais encore deux questions:

Le traitement et l'affichage est assez long (5-6sc), comment empécher firefox de croire que le script bug?
Puis pouvez le tester sous chrome, moi il affiche les texture une fois sur 4...
Donc je comprend pas trop.

Merci.

Sinon merci SpaceFrog pour les liens, j'ai trouvé en plus des biblio sympa.

a part splitter le traiement ... en modifiant l'affichage par bouts (zones) au fur et a mesure ?

Citation:

---

Le traitement et l'affichage est assez long (5-6sc), comment empécher firefox de croire que le script bug?

---

normalement cest denote par un freeze de l'IHM.
Si tu utilises des workers, ca devrait aller mieux.

Citation:

---

a part splitter le traiement ... en modifiant l'affichage par bouts (zones) au fur et a mesure ?

---

heu, là j'avoue ne pas comprendre ce que tu dis...:aie: (tu veux dire, en quelque sorte, qu'à chaque modif (ou lot de modif) je fais un petit sleep?)

Citation:

---

normalement cest denote par un freeze de l'IHM.

---

heu, là non plus (re :aie:)

Je dois me faire vieux.
Par contre, les workers, je vois ce que c'est (:mrgreen:). Je comptais utiliser les workers pour des taches non modificatrice du dom... hors là, le but de cette fonction est de modifier le dom non? (le dessin du canvas devra être interpréter par le script principale et non le worker , mais c'est cela qui prend du temps... Les calculs et les modif des array sont assez rapide...)

Sinon pour chrome, une idée?

Citation:

---

normalement cest denote par un freeze de l'IHM.

---

j'insiste.
Si tu fais du heavy process javascript, alors par exemple, ca commence à ralentir si tu essaies de scroller de taper dans un input, ... (pdt que tu affiches ta map)

Citation:

---

Citation:
a part splitter le traiement ... en modifiant l'affichage par bouts (zones) au fur et a mesure ?
heu, là j'avoue ne pas comprendre ce que tu dis... (tu veux dire, en quelque sorte, qu'à chaque modif (ou lot de modif) je fais un petit sleep?)

---

ouais genre dans ta fonction quadriller_map (jcrois que c'est elle), il faut que tu fasses un timeout. Grossomodo comme ca :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var funcsToDraw = [ function(){}//plot for 0<x<10; 0<y<10, function(){}//plot for 10<x<20; 10<y<20 //etc ]; //funcToDraw is an array of function to call one after the others function drawMap(funcsToDraw){ if(funcsToDraw.length>0){ window.setTimeout(function(){ var drawMe = funcsToDraw.pop(); drawMe();//plot a part of the map drawMap(funcsToDraw); },0); } }

---

l'idée, c'est tu dessines une zone.
Et une fois que tu l'as dessinée, tu mets un timeout de 0.
Si entre temps t'avais eu des events (genre IHM) ou n'importe quoi d'autre, ils sont traités avant. Et ensuite ya ton event pour le timeout qui execute la suite (donc dessin de la zone suivante), etc...

edit:bien sûr, le sample ci-dessus, le teableau de fonctions c'est qu'un exemple, ya plein d'autres implem mieux pensées probablement. Le but de l'exemple c'est juste d'expliciter comment employer le timeout

galerien69: concernant ta méthode avec le settimeout, je l'ai implémenté et je ne gagne (pour l'instant) rien, voir je suis pls lent (et cela ne marche même pas sur chrome, à moins que cela ne vienne d'autre part...:aie:).

Mais merci de te pencher sur ces questions d'optimisation.

Pour les workers, j'ai essayé de m'en servir, j'ai suivi un tuto, essayé de faire un worker trés simple, et pour l'instant, c'est l'échec... J'arrive à rien..
Mais je me décourage pas.
Sinon pour ceux que le moteur 3d iso intéresse, je poursuis sa construction. Je pense écrire un éditeur complet de map, avec fonction topographique (oua le nom...8-) intégrée et le plus de variables modifiable (taille carte, taille case, angle de vue).

Pour l'instant j'ai encore un soucis avec les textures, mais voila les avancées:
http://s408852608.onlinehome.fr/test...-d-ecran_3.jpg
http://s408852608.onlinehome.fr/test...-d-ecran_4.jpg
http://s408852608.onlinehome.fr/test...-d-ecran_5.jpg

Des suggestions pour améliorer le rendu? Des astuces pour la suite?

Ca a de la gueule.

Si je puis ajouter ma pierre à l'édifice... A mon avis, tu essayes de faire faire à Javascript (donc sur le processeur principal) du travail graphique, en calculant chaque quadrilatère un par un. C'est un travail pour lequel les cartes graphiques ont été conçues et optimisées. C'est pourquoi on te suggérait de te mettre à WebGL. Personnellement, je ne connais pas d'autre moyen de rendre ton script vraiment plus efficace... Mais peut-être que je me trompe.

Si tu tiens à rester en 2D, j'avais trouvé il y a quelques temps sur le MDN quelques conseils d'optimisation des scripts, je te fais la traduction ici de ceux qui me semblent utiles pour ton cas :

• Pré-calculer les primitives similaires ou les objets répétitifs sur un canvas non affiché.
  => Si tu arrives à détecter « à l'avance » les objets qui seront identiques, ça pourrait te faire gagner du temps.
• Grouper les appels canvas ensemble (par exemple, utiliser une poly-line au lieu de plusieurs lignes séparées).
  => Je ne sais pas si ça va être évident à appliquer, mais tu pourrais essayer de dessiner une grille ligne par ligne, plutôt que chaque quadrilatère séparément.
• Eviter les coordonnées à virgule flottante, utiliser à la place des entiers.
  => Ca peut paraître évident, mais on ne le sait pas toujours.
• Eviter shadowBlur.
  => A priori tu ne l'utilises pas, donc pas de souci...

Citation:

---

Ca a de la gueule.

---

Merci.

Citation:

---

A mon avis, tu essayes de faire faire à Javascript (donc sur le processeur principal) du travail graphique, en calculant chaque quadrilatère un par un.

---

C'est exactement cela. Mais là où je me questionne c'est sur la lenteur d'affichage et non de calcul. Je m'explique: calculer les coord de tous les points de la map, ça c'est relativement rapide. C'est faire les lineto + fill (ou stroke) qui prend un temps fou... Donc je comprend pas trop pourquoi l'accés au canvas est si lent que cela.

Citation:

---

C'est pourquoi on te suggérait de te mettre à WebGL.

---

J'aimerai bien mais comme déjà préciser , j'y arrive pas. J'ai beau lire des tutos, ça coince toujours quelque part (d'autant qu'il n'y a pas de tuto webgl en français).

Il y a personne pour faire un tuto webgl en français sur developpez.com ? :aie:

Citation:

---

Si tu tiens à rester en 2D

---

Je n'y tiens pas particulièrement mais forcer de constaté que j'y suis obligé.

Citation:

---

Pré-calculer les primitives similaires ou les objets répétitifs sur un canvas non affiché.

---

Comme dis plus haut, ce n'est pas le calcul qui est lent dans ma méthode, c'est le fait de dessiner sur le canvas.

Citation:

---

Grouper les appels canvas ensemble (par exemple, utiliser une poly-line au lieu de plusieurs lignes séparées).

---

Ca par contre, ça peut le faire , mais à terme, il n'y aura plus que des textures (image) drawé et stretché au bonne coord (plus de lineto) donc cette solution peut fonctionner pour mon mode filaire mais pas pour le rendu final.

Citation:

---

Eviter les coordonnées à virgule flottante, utiliser à la place des entiers.

---

Je fais déjà un Math.round de tous mes calculs.

Citation:

---

Eviter shadowBlur.

---

Je ne sais pas ce que c'est mais s'il faut l'éviter, je ne vais pas chercher alors...:ccool:

Ceci étant dit, j'avoue être un peu perplexe sur la suite à donner. En effet, dans mon moteur graphique, tant que je n'avais pas d'élévation de terrain trés haute, je n'avais pas besoins de jouer sur la priorité d'affichage des cases et des objets présents. Un personnage (par exemple) ne pouvais pas passer derrière une montagne (parce qu'il n'y avait pas de montagne assez haute). Je n'avais donc pas besoin de rafraichir la map.
Mais maintenant que je me permet toutes les fantaisies en terme dénivellé, il me faut actualiser ma carte avec tous les objets présents (perso + batiment), mais là, je n'ai pas le fps suffisant avec ma technique en 2d.
Faudra-t-il que je passe en 3d? je crois bien, et j'en déprime d'avance...

Si quelqu'un sait bien ce servir de webgl et qu'il serait intéressé par partager ces connaissances (d'une part) et écrire un moteur 3d iso ( en gros l'affichage de x*y cases qui ont leurs coord, leurs z et l'image de texture)(mon but est de faire un moteur 3d iso réutilisable sur plusieurs projets différents (la 3d iso n'est qu'un cas prédéfini du moteur global)...
Je suis preneur. Sinon, ben le temps que j'apprenne le webgl :cry:...

En tout cas, merci Watilin de tes conseils et du temps que tu as pris à annalyser ma démarche et à y répondre.

Ta réaction face à WebGL, ne présage rien de bon pour l’avenir de cette technologie, car elle semble partagée par de nombreux développeurs Web.

Il n’y pourtant rien d’effrayant ! Certes les concepts sont plus éloignés du "Turtle programming" ( que l’on apprend en primaire, d’ailleurs es ce toujours le cas ?) que l’API canvas 2D.

De plus le pipeline de rendus graphique programmable par shader a énormément simplifié le concept, qui schématiquement est le suivant :

1-Constitution d’un VertexBuffer : comme son nom l’indique il s’agit de définir les propriétés statiques de chaque sommet, comme ca position (vecteur [x,y,z]) ces coordonnées de textures (vecteur [u,v]), des couleurs émissive, diffuse , etc .. .

Code:

---

1 2 3 4 5 6 7 8 9

var quadVertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quadVertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array( [ // x y z u v -1.0, -1.0, 0.0, 0.0, 0.0, //sommet bas gauche 1.0, -1.0, 0.0, 1.0, 0.0, //sommet bas droit 1.0, 1.0, 0.0, 1.0, 1.0, //sommet haut droit -1.0, 1.0, 0.0, 0.0, 1.0 //sommet haut gauche ]), gl.STATIC_DRAW);

---

2- L’écriture d’un vertex shader, c’est la phase de projection 3D -> 2D ce microprogramme ecrit en GLSL s’exécute sur tous tes sommets de manière parallèle, les propriétés sont accessibles par les variables global de type attribute .
Pour la 3D isométrique la matrice de projection semble être la suivante : http://upload.wikimedia.org/wikipedi...c8fc5c484c.png
Cela donnera un vertex shader s’approchant de ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10

attribute vec3 position; #define K1 0.70710678118654752440084436210485 // sqrt(2)/2 #define K2 0.40824829046386301636621401245098 // 1/sqrt(6) #define K3 0.81649658092772603273242802490196 // sqrt(2/3)   void main(void) { mat3x2 projection = mat3x2( K1, -K1, 0.0, -K2, -K2 , K3); gl_Position = projection * position }

---

je te conseil de toujours résoudre tes équations linéaire par des solutions géométrique, car le calcule matriciel est également parallélisé sur GPU.


3- L’écriture d’un pixel ou fragment shader, ce microprogramme écrit en GLSL s’exécute, de manière parallèle, sur tous les pixels de ton canvas afin de déterminer la couleur de celui-ci.
Pour un rendu flat bleu :

Code:

---

1 2 3 4

void main(void) { // R G B A gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);// couleur bleu }

---

4- Boucle de rendu :
a chaque rendu tu doit, en gros:

• activer le couple de shader (vertex et pixel) avec gl.useProgram
• activer le vertexbuffer avec gl.bindBuffer
• mapper les attributs du vertex shader à partir du vertexbuffer avec gl.vertexAttribPointer
• définir les éventuels variable uniform de tes shader ( par exemple la texture à utiliser ) avec gl.uniform*
• rendre tes polygones avec gl.drawArrays ou gl.drawElements,
  je te conseil d’utiliser drawElements, cela semble plus fastidieux à mettre en place, mais cela permet de réutiliser un même sommet pour plusieurs triangles.

Sur quel aspect bloque tu ? je suis pas vraiment intéressé par la conception d’un moteur 3D iso, mais je peux, éventuellement, t’aider à comprendre les principe de base de rendu WebGL, bien que je ne suis pas un expert ...

Pour tes histoires de montagnes, à tout hasard, est-ce que tu connais l'option destination-over ? Ca peut peut-être te donner des idées...

Sinon, il y a une indication que je n'avais pas traduite dans le lien que je t'ai donné l'autre fois, c'est :

Citation:

---

Use multiple layered canvases for complex scenes.

---

En gros il s'agit « d'empiler » les canvas. Pour comparer, je ne sais pas si tu as déjà joué avec les options d'affichage d'un émulateur Snes ou GBA (c'est à peu près le même moteur graphique). Il y a plusieurs couches d'affichage, et tu peux les désactiver séparément. Les éléments les plus hauts sont placés sur la couche la plus haute.
En reprenant le principe, tu pourrais te faire 2 ou 3 canvas, un pour le sol, un pour les montagnes, et pourquoi pas un pour les personnages et autres objets.

Merci de vos réponses.
Alors,
Watilin

Citation:

---

l'option destination-over

---

Oui, ça j'avais essayé.

Citation:

---

Use multiple layered canvases for complex scenes.

---

J'étais aller voir... Le problème c'est que dans l'idéal il faudrait que chaque case soit indépendante. Donc j'aurais x*y canvas... Et je pense retomber dans les problèmes que j'avais eu au départ (concernant x*y image()), plomber le DOM.

Quant à faire un tri et optimiser en temps réel le nbre maximum de calque pour afficher la map, je vais solliciter le GPU...

Merci beaucoup en tout cas.

Tout ça pour dire quoi?
Ben que je me suis mis à Webgl :ccool:.
Je galère très beaucoup (pour rester poli) mais j'arrive à afficher x*y carré en 3d (enfin c'est des carré, pas des cubes, pas besoin pour le terrain)...
Mais là je galère sur la caméra, c'est à dire, qu'au delà des fonctionnalités de zoom et de rotation, je voudra changer la vision par default de toute la scène...
Et j'y arrive pas. Mais je suis confiant.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function initWebGL(canvasElement) { gl = new WebGL(canvasElement);   gl.setShaderProgram("VARYING_COLOR");   }         function OnGLCanvasCreated(canvasElement, elementId) { window.setTimeout(function () { initWebGL(canvasElement);init_map(gl);affiche_case(gl); }, 1000); }   function OnGLCanvasFailed(canvasElement, elementId) { alert("Votre butineur ne supporte pas WebGL !"); }

---

puis

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function affiche_case(gl) { gl.clear();   for (var i in quadrillage_map) { triangleBuffers=quadrillage_map[i].buffer;   gl.setShaderProgram("VARYING_COLOR");   gl.perspective(45, 0.1, 100.0); gl.identity(); gl.translate(-(quadrillage_map[i].x*2), -(quadrillage_map[i].y*2), -30);   gl.pushPositionBuffer(triangleBuffers);   gl.pushColorBuffer(triangleBuffers);   gl.drawElements(triangleBuffers);   }   }

---

et enfin

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

function initBuffers(gl) { var triangleBuffers = {}; triangleBuffers.positionBuffer = gl.createArrayBuffer([ -1, -1, 0.5, -1, 1, 0, 1, 1, 0,   1, 1, 0, -1, -1, 0, 1, -1, 0   ]);   var colors = [ [0, 0, 1, 1], // Front face - Pink [0, 0, 1, 1], // Back face - Green [0, 0, 1, 1], // Top face - Blue   [1, 0, 0, 1], // Bottom face - Turquoise [1, 0, 0, 1], // Right face - Yellow [1, 0, 0, 1], // Left face - Red     ];       var colorVertices = []; for (var n in colors) { var color = colors[n]; colorVertices = colorVertices.concat(color); }   triangleBuffers.colorBuffer = gl.createArrayBuffer(colorVertices);   triangleBuffers.indexBuffer = gl.createElementArrayBuffer([ 0, 1, 2, 0, 2, 5 ]);   return triangleBuffers; }

---

p3ga5e, je pensais partir sur aucun calcul et laisser tout faire à webgl en passant par la camera...

Mon moteur d'affichage sera entièrement calculé en 2d puis passera à la moulinette webgl. heu non?

Code:

---

1 2 3 4 5 6 7 8 9

var quadVertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quadVertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array( [ // x y z u v -1.0, -1.0, 0.0, 0.0, 0.0, //sommet bas gauche 1.0, -1.0, 0.0, 1.0, 0.0, //sommet bas droit 1.0, 1.0, 0.0, 1.0, 1.0, //sommet haut droit -1.0, 1.0, 0.0, 0.0, 1.0 //sommet haut gauche ]), gl.STATIC_DRAW);

---

J'ai mis un temps fou à comprendre comment été représenté les coords dans ce systéme.

Merci d'avoir partagé tes connaissances.

D'ailleurs que ce soit la vue et le zindex, c'est webgl qui gère tous ça. non?

Bref, j'essaye de faire un truc vraiment pas compliqué, mais je vais y arriver.

Houla ! Tu es parti, tète baissé, un peu dans tous les sens ! Je comprends ton envi d’obtenir rapidement un résultat, mais cherche avant tout, a comprendre les bases, sinon tu risque a avoir de sacres migraines

Ton code est trop complexe ! Tu fais beaucoup trop d’opérations dans ta boucle de rendus ! Le but étant d’en faire le moins possible en javascript (CPU mono-thread) et faire bosser un max la carte graphique ( GPU multi-cores) ! donc limite ton rendu de terrain en un seule appel a drawElements en ajoutant tous tes sommets dans ton VertexBuffer. N’es pas pas peur d’utiliser la mémoire vidéo le minimum de VRAM pour WebGL ne doit pas être inferieur 128 Mo, pour avoir déjà travaillé sur des moteur graphique limiter par un VRAM de 4 Mo , 128 Mo c’est l’Amérique :ccool:

Citation:

---

J'ai mis un temps fou à comprendre comment été représenté les coords dans ce systéme.

---

Malheureusement celui-ci dépend énormément du vertex shader, il te faut donc maitriser le vertex shader avant toute chose !

Citation:

---

D'ailleurs que ce soit la vue et le zindex, c'est webgl qui gère tous ça. non?

---

La carte graphique utilise, un chose bien plus puissante, le zbuffer, c’est en gros, pour schématiser, un zIndex pour chaque pixel rendu ! Bref tu as pas te soucier de l’ordre d’affichage de tes objets, la carte graphiques fait le job pour toi ! ( saufe si tur rend des objet tranparent !).

Je vais faire ce que tu m'as dit pour appeler une seule fois drawElements.

J'arrive pas à passer en 3d iso. Je m'explique; pour l'instant j'ai mes carrés affiché vu de dessus. Donc il faut que je calcul les coord de tous les points en fonction de ma vue.

Je suppose que ca se joue là :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

triangleBuffers=quadrillage_map[i].buffer;   gl.setShaderProgram("VARYING_COLOR");   gl.perspective(45, 0.1, 100.0); gl.identity(); gl.translate(-(quadrillage_map[i].x*2), -(quadrillage_map[i].y*2), -30);   gl.pushPositionBuffer(triangleBuffers);   gl.pushColorBuffer(triangleBuffers);   gl.drawElements(triangleBuffers);

---

Mais je trouves pas quoi faire.
Je comprend pas pourquoi mes points sont stocké en relative (toujours de -1 à 1), puis placé.
En 2d, je transformé mes coord 2d en coord 3d avec une fonction mais là je vois pas trop.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function transf_coord_2d_en_3d_iso(x_2d,y_2d) {   //var distance_a_l_origine=Distance(milieu_map.x, milieu_map.y, x_2d, y_2d);   var coord_3d_iso=new Object();   var alpha_radian_x=angle_en_radian(alpha_x); var alpha_radian_y=angle_en_radian(alpha_y); //alert(alpha_x+' : '+alpha_radian); coord_3d_iso.x=Math.round(Math.cos(alpha_radian_x)*(x_2d-milieu_map.x)-Math.sin(alpha_radian_y)*(y_2d-milieu_map.y)); coord_3d_iso.y=Math.round(Math.sin(alpha_radian_x)*(x_2d-milieu_map.x)+Math.cos(alpha_radian_y)*(y_2d-milieu_map.y));   return coord_3d_iso; }

---

Citation:

---

Je comprend pas pourquoi mes points sont stocké en relative (toujours de -1 à 1), puis placé.

---

Rien n’est imposé ! ici tu as créé une un carré de dimension 2x2 ayant pour repère son centre, ensuite tu le duplique en modifiant ce repère par diferentes matrices avec tes fonctions gl.perspective et gl.translate. ces fonctions sont un peu obsolètes elle sont dispos uniquement pour garder rétrocompatibilité du code avec le pipeline fixe Gl 1.0. Donc oublis ça pour le moment !

Il est préférable d’exprimer tous tes sommets de ton terrain, en 3D, dans le repère monde, et écrire ton vertexshader uniquement pour ta projection isométrique !

Code:

---

1 2	coord_3d_iso.x=Math.round(Math.cos(alpha_radian_x)*(x_2d-milieu_map.x)-Math.sin(alpha_radian_y)*(y_2d-milieu_map.y)); coord_3d_iso.y=Math.round(Math.sin(alpha_radian_x)*(x_2d-milieu_map.x)+Math.cos(alpha_radian_y)*(y_2d-milieu_map.y));

---

voir ce code, me fait penser que tu as oublié une étape primordial, avant d’écrire ton moteur graphique constitue toi une librairie mathématique pour le calcul matriciel ou réutilise une Lib existante ! Pour moi c’est le critère principal pour le choix d’un moteur graphique.

Sinon pour en revenir au sujet principal, j’ai écrit ceci pendant ma pause déjeuné !

Cette discussion est devenue très technique ! Trop pour moi qui ne me suis pas encore intéressé du tout à WebGL.
Par contre, j'ai souvent lu qu'il était quand même beaucoup plus simple de passer par une bibliothèque du style Three.js
Que ceux qui connaissent mieux le sujet que moi donnent leur avis ;)

p3ga5e

Code:

---

1 2	coord_3d_iso.x=Math.round(Math.cos(alpha_radian_x)*(x_2d-milieu_map.x)-Math.sin(alpha_radian_y)*(y_2d-milieu_map.y)); coord_3d_iso.y=Math.round(Math.sin(alpha_radian_x)*(x_2d-milieu_map.x)+Math.cos(alpha_radian_y)*(y_2d-milieu_map.y));

---

Je comprend bien qu'il vaille mieux se faire une biblio perso. Je m'en suis déjà faite, mais, tu as raison il me faudrait celle d'addition de matrice, de multiplication de matrices...

Parce que dans

Code:

---

1 2 3 4 5 6 7 8 9 10 11

triangleBuffers=quadrillage_map[i].buffer;   gl.setShaderProgram("VARYING_COLOR");   gl.perspective(45, 0.1, 100.0); gl.identity(); gl.translate(-(quadrillage_map[i].x*2), -(quadrillage_map[i].y*2), -30);   gl.pushPositionBuffer(triangleBuffers);   gl.pushColorBuffer(triangleBuffers);

---

Il faut que j'additionne tous les triangleBuffers pour constituer ma scene et que je les affiche non?

Code:

---

gl.drawElements(toustriangleBuffers);

---

Mais ça, jy arrive pas (n'ayant pas la biblio), si tu en as une , je suis preneur.

Citation:

---

Sinon pour en revenir au sujet principal, j’ai écrit ceci pendant ma pause déjeuné !

---

J'ai étudié, et mon image perso ne s'affiche pas,

Code:

---

WebGL: A texture is going to be rendered as if it were black, as per the OpenGL ES 2.0.24 spec section 3.8.2, because it is a 2D texture, with a minification filter not requiring a mipmap, with its width or height not a power of two, and with a wrap mode different from CLAMP_TO_EDGE.

---

De plus, je cherche à me placer en 3d iso, ta vue reste du dessus.
J'ai bien trouvé un exemple d'affichage 3d iso mais je comprend pas.

Sinon, three.js, j'ai essayer longuement mais pareil, j'ai pas compris...:aie: Avec leurs exemples de moteur 3d iso, j'ai mon axe des z qui s'inverse avec mon axe des y. Bref, elle à l'air pas mal cette librairie mais je préfère apprendre de la base.

Donc je continue mes essais...:ccool:

Citation:

---

Envoyé par MaitreKaio

j'ai souvent lu qu'il était quand même beaucoup plus simple de passer par une bibliothèque du style Three.js
Que ceux qui connaissent mieux le sujet que moi donnent leur avis ;)

---

Three.js est un excellent moteur 3D car il tire, énormément parti, des spécificités du langage JavaScript, son architecture est simple et très customisable. Par contre il manque cruellement d’une documentation !

Citation:

---

Envoyé par Darkyl

Il faut que j'additionne tous les triangleBuffers pour constituer ma scene et que je les affiche non?

---

Je pense qu’il faut ajouter tous tes sommets dans un seul VertexBuffer !
Le vertex buffer ne définit pas les polygones mais juste les sommets. gl.drawElements permet de rendre tes polygones en travaillant avec un IndexBuffer , ce buffer est un tableau d’entier positif contenant la séquence d’indice des sommets

Code:

---

1 2 3 4 5 6 7 8

// creation de l'IndexBuffer d'un quadrilatere ! var indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint16Array([0, 2, 1, 3]), gl.STATIC_DRAW);   //Rendu du quadrilatere gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.drawElements(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_SHORT, 0);

---

Tu disposes que de 3 primitives en WebGL te permettant de créer un polygone gl.TRIANGLES, gl. TRIANGLE_STRIP et gl.TRIANGLE_FAN :
http://http.developer.nvidia.com/CgT...nks/fig1_4.jpg
Malheureusement tu n’as pas droit au QUAD …

Citation:

---

mon image perso ne s'affiche pas

---

vérifie la résolution de ton image, elle doit obligatoirement être une puissance 2 ( 8,16, 32 … etc. )

Citation:

---

J’ai mon axe des z qui s'inverse avec mon axe des y.

---

C’est repère habituel dans les moteur 3D, car c’est celle qui est le plus proche du repère dans lequel fonctionne les carte graphique. Au finale seule le repère de la carte graphique compte ! C’est à dire le résultat du ton VertexShader : le vecteur gl.Position qui est exprimé dans le repère suivant :
http://http.developer.nvidia.com/CgT...nks/fig2_6.jpg
Comme tu peux le voir la carte graphique travail dans un espace de nombre Réel normalisé, quel que soit la résolution pixel est l’aspect ratio de ton canvas. Il te faudra donc prendre en compte le problème de l’aspect ratio dans l’écriture de la projection ou travailler sur un canvas carré .

Citation:

---

mais je préfère apprendre de la base.

---

Heureux de te l’entendre dire ! Oubli pour le moment l’api GL et concentre toi plutôt sur les concepts des Shaders, c’est la que tout ce passe !
As-tu compris les différence entre les attributs, les variables uniform et les variables varying ?
les varying doit certainement être le concept le plus dur a assimiler quand on débute.

@ p3ga5e Tu sais que tu vas bientôt pouvoir écrire un tuto rien qu'avec les réponses que tu donnes ici ? :ccool:

C'était mon idée (le tuto), de me servir de ce topic comme base pour un tuto "Webgl pour les nuls" :ccool:.

Bonne idée MaitreKaio.
Mais attend, j'ai encore plein de questions... :aie:

Là j'essaye de suivre la logique de la dernière réponse de p3ga5e (ma foi, très bien commentée et illustrée, :ccool:).
Merci de m'aider à comprendre les bases de la 3d gérée grâce à webgl...

La suite dans pas longtemps...:P

D'ailleurs pour ceux que cela intéresse : un autre topic où p3ga5e nous éclaire de ses connaissances : topic

Bon, l'explication commence...
Dans ton source:

Code:

---

1 2 3 4 5 6 7 8 9

try { gl = document.getElementById("Render").getContext("experimental-webgl"); } catch(e) {}   if (!gl) alert("Could not initialise WebGL, sorry :-("); else

---

OK, cela nitialise le contexte WebGl et attribut l'objet canvas Render à gl. Jusque là c'est cool :aie:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// compilation des shaders var vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, document.getElementById('vertexshader').textContent); gl.compileShader(vertexShader);   var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, document.getElementById('fragmentshader').textContent); gl.compileShader(fragmentShader);   shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram);   // activation des shaders gl.useProgram(shaderProgram);   shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "position"); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);   shaderProgram.textureUniform = gl.getUniformLocation(shaderProgram, "texture"); shaderProgram.timeUniform = gl.getUniformLocation(shaderProgram, "time");

---

Ca, c'est la partie où tu règle le contexte 3d, si je ne m'abuse.
Là j'ai pas encore tout compris.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// creation d'un vertexShader contenant uniquement des coordonnées de texture 2D vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array( [ // u v 0.0, 0.0, //sommet bas gauche 0.0, 1.0, //sommet haut gauche 1.0, 0.0, //sommet bas droit 1.0, 1.0 //sommet haut droit   ]), gl.STATIC_DRAW);   vertexBuffer.itemSize = 2; vertexBuffer.numItems = 4;

---

Ca c'est la partie où tu crée un carré (en tout cas, 4 points).
C'est cela que je dois mettre en fonction et qui me créera mes cases de la map. Ca ok aussi.

Code:

---

1 2 3 4

gl.uniform1f(shaderProgram.timeUniform, time);   gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertexBuffer.numItems);

---

Ca c'est la partie où je bloque.
C'est normalement ici que le render et ses spécifications se fait mais j'arrive pas à lui changer la vue. Si je comprend bien le principe, il faut que j'applique cette matrice

Code:

---

1 2 3 4 5 6 7 8 9 10

attribute vec3 position; #define K1 0.70710678118654752440084436210485 // sqrt(2)/2 #define K2 0.40824829046386301636621401245098 // 1/sqrt(6) #define K3 0.81649658092772603273242802490196 // sqrt(2/3)   void main(void) { mat3x2 projection = mat3x2( K1, -K1, 0.0, -K2, -K2 , K3); gl_Position = projection * position }

---

à chaque positionbuffer de tous les objets présents dans la scène (sommet)... J'ai essayé par des translate mais il me dit que translate n'est pas une fonction de gl, bizarre, j'aurais pourtant juré :?.

Donc en gros, quand tu créer ton carré, comment tu lui applique une position?
Et une fois cela fait, comment tu bouge la caméra? la matrice projection , tu la met où?

Ca c'est les deux points noirs que j'arrive pas du tout.
Aprés, concernant le rendu en une étape,
j'ai essayé cela:

Code:

---

1 2 3 4 5 6

scene_complete = {}; scene_complete.positionBuffer = gl.createArrayBuffer([]);   scene_complete.colorBuffer = gl.createArrayBuffer([]);   scene_complete.indexBuffer = gl.createArrayBuffer([]);

---

Puis

Code:

---

1 2 3 4 5 6

quadrillage_map[indice_temp].buffer=initBuffers(gl);   //scene_complete=scene_complete+quadrillage_map[indice_temp].buffer+quadrillage_map[indice_temp].buffer.; scene_complete.positionBuffer=ajouter_tableau_dans_tableau(scene_complete.positionBuffer,quadrillage_map[indice_temp].buffer.positionBuffer); scene_complete.colorBuffer=ajouter_tableau_dans_tableau(scene_complete.colorBuffer,quadrillage_map[indice_temp].buffer.colorBuffer); scene_complete.indexBuffer=ajouter_tableau_dans_tableau(scene_complete.indexBuffer,quadrillage_map[indice_temp].buffer.indexBuffer);

---

avec

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

function initBuffers(gl) { var carreBuffers = {}; carreBuffers.positionBuffer = gl.createArrayBuffer([ -1, -1,0, -1, 1, 0, 1, 1, 0,   1, 1, 0, -1, -1,0, 1, -1,0   ]); //gl.translate(matrice_projection);   var colors = [ [0, 0, 1, 1], // Front face - Pink [0, 0, 1, 1], // Back face - Green [0, 0, 1, 1], // Top face - Blue   [1, 0, 0, 1], // Bottom face - Turquoise [1, 0, 0, 1], // Right face - Yellow [1, 0, 0, 1], // Left face - Red     ];       var colorVertices = []; for (var n in colors) { var color = colors[n]; colorVertices = colorVertices.concat(color); }   carreBuffers.colorBuffer = gl.createArrayBuffer(colorVertices);   carreBuffers.indexBuffer = gl.createElementArrayBuffer([ 0, 1, 2, 0, 2, 5 ]);   return carreBuffers; }

---

et enfin pour le rendu:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

gl.save(); gl.setShaderProgram("VARYING_COLOR");   gl.perspective(90, 0.1, 1000.0); gl.identity();   //perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);   gl.translate(1, 1, 40); //gl.translate(matrice_projection); //gl.rotate(Math.PI * 0.5, 1, 0, 0);   gl.pushPositionBuffer(scene_complete);   gl.pushColorBuffer(scene_complete); gl.pushIndexBuffer(scene_complete);   gl.drawElements(scene_complete); //gl.restore();

---

Mais cela ne marche pas... Pas d'erreur mais rien ne s'affiche.

Je sens que tu vas me dire que ce n'est pas la bonne philosophie à appliquer...

N'ayez pas peur de continuer à pousser ce sujet jusqu'au bout, je le trouve hyper intéressant ! A suivre.. :ccool:

Arf ! On n’arrivera à rien à continuer comme ca … :aie:

J’ai commencé à participer à cette discussion car je souhaite que WebGL prenne son essor, pour la seul raison que JavaScript est devenu mon Langage de programmation préféré !
J’aimerais donc que cette techno ce démocratise sur toute les plateformes (surtout les Smartphone) ! Malheureusement peu de développeurs web, s’intéresse à cette techno … apparemment cela est effrayant … :calim2:

Vous parlez de tutoriaux … pour l’avoir déjà observé chez des débutants, je sais que cela ne sert à rien (surtout pour des débutants), car pour obtenir un résultat rapide ils combinent diffèrent tutos, et sans assimiler les bases cela ne sert a rien !
De part mon expérience, le meilleur apprentissage est de ce confronter au problème et de trouver par soi même la réponse !

Le problème de Darkyl c’est que tu fixe un objectif trop élevé, du coup tu te confronte a un trop gros nombre de problèmes, si tu persiste dans cette voie tu risque de lacher l’affaire rapidement ! par dégout. Pourtant je pense que tu possède les compétences nécessaires pour maitriser la programmation graphique via WebGL !

Donc je te propose a toi, et a tous ceux intéressé par WebGL, le deal suivant :
On reprend les bases de zéro… on créer un nouveau topic dans le lequel je poserais un objectif sous la forme d’un exercice ou chalenge, on procèdera ainsi, petit a petit, par des étapes simple ! Le but étant juste de vous faire assimiler les bases ! Ne vous attendez a pas a ce que je vous fasse comprendre comment on créer un moteur graphique , car moi-même j’en suis incapable !

Qu’en dites-vous ?

Je suis intéressé !

(note tu dénigres les tutos à cause de ceux qui copy/pastes, mais ceux qui cherchent à faire par eux-même et trouvent la solution eux-même, trouvent souvent cette solution dans un tuto, sans ça on passe des heure à googler à la recherche d'une doc pas toujours claire et on finit par abandonner).


@Darkyl: désolé pour la déviation de sujet, et je voulais te dire que ton boulot est impressionnant. :ccool:

Moi je suis partant... :ccool: . Merci, d'avance d'avoir pris part au topic.

Si en plus, tu as le courage de faire un autre topic / cours, c'est royal. +1
Je suivrai avec rigueur, écouterai avec ferveur!



Heu, soi-dit en passant, j'arrive un petit peu mais je risque pas d'aller loin... Le hic, c'est qu'il faudrait que j'arrive à un moteur de rendu filaire en 3d d'ici une semaine grand max... Vous savez ce que c'est :aie: mais j'abandonnerai pas, je pense vraiment pas visée haut (à terme) et j'ai la foi.

WillPower, merci du compliment. Je déprime un peu dans mon coin là parce que j'avais bien avancé en 2d, j'étais content, mais alors le passage à la 3d, quand ca veut pas, ça veut pas :?
Donc j'apprécie le compliment.

Pour le débat sur les tutos ou pas, je suis plûtot pessimiste mais le hic, c'est que webgl est pas du tout mais pas du tout documenté donc c'est dur :calim2:.
Sous prétexte qu'il faut connaître openGL, non mais...

Citation:

---

Envoyé par p3ga5e

Malheureusement peu de développeurs web, s’intéresse à cette techno …

---

J’imagine que c'est parce que la plupart des développeurs web ne sont pas graphistes, et n’ont pas la motivation pour se former. Ceux qui s’intéressent à ces deux domaines ne sont pas nombreux… Et on les trouve tous sur ce forum ! :mrgreen:

Citation:

---

J’imagine que c'est parce que la plupart des développeurs web ne sont pas graphistes, et n’ont pas la motivation pour se former.

---

J'ai bien essayé ... mais je confirme que c'est un métier à part.
Dans l'esprit c'est tout beau, une fois sur l'écran c'est autre chose ...
Je ne suis capable que de copier le graphisme des autres, mes productions sont pathétiques :( :cry:
Je laisse donc la graphisme aux graphistes avec beaucoup de frustration !

Oula …Vous n’y êtes pas … WebGL ne s’adresse, certainement pas, a un graphiste. WebGl est une API pour interfacer les cartes graphiques et programmer sur le GPU. Cela s’adresse, donc, bien un développeur.

Les développeurs travaillant dans les métiers du Web (milieu que je ne connais pas) ne semble, guère avoir le profil d’électronicien, et ne semble pas habitués à travailler si bas niveau !

Il existe bien quelques moteur 3D basé sur WebGL ( Three.js, O3D, SceneJS, CopperLicht … ) mais difficile d’appréhender les techniques de rendu 3D sans posséder les bases de la programmation graphique. Les modèles mathématiques utilisés par les moteurs 3D semblent, également, poser un frein.

Je confirme qu'utiliser WebGL sans passer par une bibliothèque est compliqué pour un développeur non initié au bas niveau.

C'est comme l'assembleur pour quelqu'un qui n'est habitué qu'au langage haut-niveau (et encore c++ permet de gérer la mémoire à assez bas niveau me semble-t-il).

De ce fait, pour moi qui n'ai jamais manipulé les bits et autres bizarreries sortis des profondeurs de la machine, on se rend compte qu'on est bien loin d'un vrai développement... mais juste d'une façon de coder trés applicative. C'est comme un développeur qui utilise Jquery et qui pense être fort (de ce fait) en javascript...

Bref, on descend de son piédestal et on prend un cachet d'aspirine...
Depuis les cours de p3ga5e, ma femme me dit que la nuit, je me réveille soudain en disant: 'ils font ch..i..er avec leur 3D...' :aie:

C'est dire à quel point je suis traumatisé...

Mais, WebGL, pour peu que l'on y fasse un effort (et que l'on tombe sur un développeur qui ai la bonté de nous aider), vaut le coup..
Non seulement parce qu'il est encore temps d'être dans les précurseurs, mais aussi et surtout que son défaut (son bas niveau) en fait sa qualité (rapidité d'exécution), ce qui est primordial sur le net.