54 réponses à ce sujet

[tlecoz]

Bonjour !

Je suis en train de faire quelque tests avec Minko, tout fonctionne bien mais je ne trouve pas comment utiliser la transparence sur les objets.

Je suis parti de ce tuto : http://hub.aerys.in/...-spinning-cubes
J'aimerais mettre une transparence de 50% sur les cubes. J'ai essayé d'utiliser un code couleur jouant sur le canal alpha avec l'objet ColorTexture associé à chaque 'modèle' de cube , mais cela ne fonctionne pas. La couleur est obscurcie mais pas translucide.

J'ai essayé de remplacer le ColorTexture par un BitmapTexture pointant vers un bitmapData translucide mais le résultat est le même.

J'ai pensé que la gestion de la lumière était peut être incompatible avec un effet de transparence. J'ai enlevé l'effet de lumière mais la transparence ne fonctionne toujours pas.

Pas découragé, j'ai essayé de faire ça

private var rootObj:StyleGroup;

rootObj = new StyleGroup();
rootObj.style.set(Blending.ALPHA,true);
rootObj.addChild(scene);

viewPort.render(rootObj);
 

Mais le résultat est identique, avec ou sans l'effet de lumière associé à 'scene'.

Comment puis je faire ?



Merci d'avance !

[grgrdvrt]

salut!

il faut définir le style de cette façon :

rootObj.style.set(BasicStyle.BLENDING, Blending.ALPHA);

le premier paramètre qui indique le style à modifier est toujours une constante d'une classe nommée "MachinStyle" (LightingStyle, BasicStyle...)
j'ai fait la même erreur tout à l'heure

[tlecoz]

Salut Starmonkey !
Merci pour ta réponse !

Ca fonctionne...presque

Ou plutot, ça fonctionne bien avec les ColorTexture mais j'ai l'impression que les BitmapTexture sont autant assombris qu'ils sont transparent. Sais tu s'il est possible d'appliquer la transparence sans modifier les couleurs ?

[Jean-Marc Le Roux]

tlecoz, le 02 November 2011 - 18:59 PM, dit :

Ou plutot, ça fonctionne bien avec les ColorTexture mais j'ai l'impression que les BitmapTexture sont autant assombris qu'ils sont transparent. Sais tu s'il est possible d'appliquer la transparence sans modifier les couleurs ?

La transparence marche si les bitmaps sont transparentes, et donc chargées depuis un PNG par exemple.
Ensuite, il faut également comprendre comment marche le blending sur un GPU.
Le blending suit une équation qui va permettre de "combiner" le pixel calculé par le fragment shader et celui déjà présent dans le backbuffer. Cela explique pourquoi les objets transparents doivent être dessinés en dernier (cet ordre de dessin est géré via la priorité des RendererState, mais c'est une autre histoire...).

Il ne faut pas oublier également le triangle culling. Si on dessine un cube par exemple, seules les faces faisant face à la caméra seront dessinées dans le backbuffer. Il est possible de changer le culling via le style BascisStyle.TRIANGLE_CULLING. Mais attention, lorsqu'on dessine un seul et unique mesh en désactivant le culling, le rendu peut donner des résultats inattendus puisqu'au sein d'un même mesh, certains triangles transparents devront logiquement être dessinés après les autres pour que le blending soit fait correctement, mais on ne peut pas déterminer l'ordre des dessin à l'intérieur d'un mesh.

Pour régler ce problème (qu'il faut à tout prix éviter lors de la conception des modèles), la seule solution c'est de trier les triangles du mesh à chaque frame. Ce qui bien entendu n'est pas une solution viable...

Citation

rootObj.style.set(BasicStyle.BLENDING, Blending.ALPHA);

Attention : chqaue noeud hérite des styles de ses ancêtres, comme en CSS. Si tu actives la transparence à la racine de la scène - et donc sur tous les objets de la scène - alors ils ne pourront pas être triés correctement vu qu'ils auront tous des RendererState avec une même priorité. Il faut donc faire attention à n'utiliser le blending que là ou c'est nécessaire.

La transparence et le blending sont - vous l'avez compris je pense - parfois assez compliqués à utiliser, mais malheureusement, à part trier les RendererState pour que les mesh transparents se dessinent en dernier, on ne peut pas faire grand chose et on est limité par le fonctionnement du GPU.

a+

[tlecoz]

Merci pour cette réponse et ces eclaircissements

Citation

Pour régler ce problème (qu'il faut à tout prix éviter lors de la conception des modèles), la seule solution c'est de trier les triangles du mesh à chaque frame. Ce qui bien entendu n'est pas une solution viable...

Même si cette solution n'est pas viable dans la plupart des cas (dans les cas ou on peut faire autrement ^^), si ca marche correctement peut elle être utile dans le cas d'un systeme de particule ou autre anim utilisant plusieurs milliers d'objets simple (plane/cube) en même temps contenu au sein du même VertexBuffer et partageant le même objet Texture ?

Pour trier les triangles, tu agirais sur les indices contenus dans l'indexBuffer ?
Je pensais que les triangles étaient retriés en interne par le GPU (?)

Merci d'avance !

[Jean-Marc Le Roux]

tlecoz, le 03 November 2011 - 02:27 AM, dit :

Pour trier les triangles, tu agirais sur les indices contenus dans l'indexBuffer ?
Je pensais que les triangles étaient retriés en interne par le GPU (?)

Justement non. Et c'est tout le problème avec la transparence.
Il y'a une énorme différence entre dessiner - à un instant T - un pixel si sa profondeur est inférieure à celle du pixel déjà en place, et trier tous les triangles d'une frame avant de la dessiner.

Pour ce qui est du rendu des particule, le problème (auquel nous nous sommes déjà heurté) est typiquement celui que je décrivait plus haut: l'overdraw des meshes transparents sur eux mêmes. Dans notre moteur à particules (je vous ferais une vidéo de ça bientôt), nous utilisons le Blending.ADDITIVE. Ca à des conséquences assez facheuses car les couleurs saturent vite, mais si on règle bien l'alpha des particules, on peut s'en sortir et faire des effets assez convaincants et qui ne coutent rien en CPU.

On peut aller jusqu'à 16 000 particules par draw call. Ce qui est plutôt cool. Dans notre moteur de particule et grâce aux shaders AS3, il s'uffit d'étendre une interface IParticule pour créer un effet de particules accéléré matériellement. Je présenterais ça plus en détails bientôt sur mon blog.

a+

[Logic]

Miniature(s) jointe(s)

• 

Fichier(s) joint(s)

• 
  
  - Afficher le SWF -
  
   minkoTest.swf   487.93 Ko   162 téléchargement(s)
•  minkoTest.as   2.8 Ko   111 téléchargement(s)

[Jean-Marc Le Roux]

Logic, le 05 November 2011 - 23:52 PM, dit :

minkoTest.swf

Très bonne illustration du problème... et malheureusement il s'agit d'une contrainte liée au fonctionnement du GPU et du rasterizer. Donc on n'y peut pas grand chose.

Il y'a un moyen - très sale et très coûteux - qui consiste à utiliser l'instruction AGAL "kill" quand alpha = 0. Mais ça assassine le GPU et ne gère que ce cas là. Cette instruction n'est pas encore disponible dans les shaders AS3 car elle a un statu très particulier au niveau de l'évaluation/la compilation. Elle sera présente dans la version 2.

a+

[tlecoz]

Hello !

Je ne sais pas si je suis hors sujet mais dans le doute...
http://jpauclair.net...flash-molehill/

Il utilise une image noir et blanc comme un masque pour gérer la transparence, et ca a l'air de fonctionner (mais aucune image ne dispose d'une rotationX/Y donc je ne sais pas si ca fonctionne pareil...)

[Jean-Marc Le Roux]

tlecoz, le 06 November 2011 - 17:35 PM, dit :

Je ne sais pas si je suis hors sujet mais dans le doute...
http://jpauclair.net...flash-molehill/
e pareil...)

L'alpha map est utilisée car les formats de texture compressés ne gèrent pas RGBA mais seulement RGB.
Donc on stocke l'alpha dans une map séparée.

Le fond du problème, c'est surtout que le z-buffer n'est pas du tout approprié pour gérer la transparence...

[Logic]

Sur le moteur Alternativa le problème de la transparence est aussi présent.

[Jean-Marc Le Roux]

Logic, le 08 November 2011 - 22:01 PM, dit :

Sur le moteur Alternativa le problème de la transparence est aussi présent.

Sur le Cryengine aussi
C'est du au fonctionnement du GPU, pas du moteur.

Les quelques astuces pour régler le problème ne sont pas abordables en Flash.
Par exemple, dans Heavy Rain, pour gérer la transparence des cheveux les triangles sont re-triés à chaque frame... Le coût est prohibitif en CPU et en bande passante.

a+

[tlecoz]

Je ne me rend pas compte du tout de à quel point ce serait compliqué à mettre en place, mais ce serait super pratique d'avoir une propriété permettant de déterminer si on veut on non retrier les triangles (en vue de régler ce problème).

Dans certains cas, quand on a quelque centaine de planes (ou moins) pour faire un coverflow/carroussel ou un truc dans le genre , le nombre de triangle n'est pas excessif et ca devrait pouvoir tourner sans problème.

Mais bon, tu n'as peut être pas envie de te prendre la tête avec ça puisque Minko est plus destiné, j'espère, à faire des jeux que des coverflow
















Mais ce serait pratique !

[Logic]

Je plussoie tlecoz.

Je le soutiendrai en ajoutant que le but avec de la 3D dans Flash c'est pas forcément de refaire Quake ou Crysis. On sortira forcément des usages habituels, on expérimentera d'autres voies.

[lilive]

Bonjour,
J'ai lu la discussion car j'ai le même problème je crois avec la transparence.
J'ai fait ici ( http://flash.mediabo...post__p__845446 ) un test comparatif entre 2 modes de rendu:
- Les triangles de premier plan sont dessinés en premier, sauf aux endroits où leur alpha est sous un seuil donné (grâce à kil). Les triangles plus profonds qui sont au même endroit ne sont pas dessinés. Un pixel n'est donc calculé qu'une fois.
- Les triangles de premier plan sont dessinés en dernier, donc par dessus les autres. Un même pixel est donc calculé autant de fois qu'il y a de triangles à cet endroit. Les perfs en prennent un sacré coup.

[Jean-Marc Le Roux]

Logic, le 09 November 2011 - 09:09 AM, dit :

Je plussoie tlecoz.

Je le soutiendrai en ajoutant que le but avec de la 3D dans Flash c'est pas forcément de refaire Quake ou Crysis. On sortira forcément des usages habituels, on expérimentera d'autres voies.

Trier les triangles, ça veut dire non seulement faire des tris, mais aussi ré-uploader les buffers triés.
Donc un coup encore plus important qu'en Flash 10.

Dans le cas d'un coverflow, c'est donc bien plus optimisé de trier les covers, et non les triangles !
Et surtout, le problème n'est pas au niveau des objets transparents en eux mêmes : Minko les gère déjà très bien automatiquement. Le problème, ce sont les objets transparents entre eux.

Citation

Les triangles de premier plan sont dessinés en premier, sauf aux endroits où leur alpha est sous un seuil donné (grâce à kil). Les triangles plus profonds qui sont au même endroit ne sont pas dessinés. Un pixel n'est donc calculé qu'une fois.

C'est une très très mauvaise idée. Kill a un coup prohibitif et de toute façon, ça ne gère que l'alpha == 0. Au delà du fait qu'on a très souvent de la transparence pour autre chose qu'un alpha == 0, j'imagine par exemple que le filtrage bilinéaire peut causer tout plein d'artefacts très disgracieux même quand l'alpha d'origine de la texture est soit 1 soit 0 puisque l'interpolation donnera des valeurs intermédiaires.

Une première solution - horrible - consiste à créer un noeud IGroup qui n'acceptent que des ITransformableScene et les trie en fonction de leur translation. C'est horrible car l'ordre des noeuds d'une scène ne doit pas avoir d'influence sur le rendu obtenu à l'écran. C'est très important. Sinon, vous plongerez dans des problèmes d'ordonnancement tels que ceux qu'on avait dans Flash 10 et ou il faut imaginer des structure de scène complètement délirantes. Parfois, ça amène même des contraintes impossibles à lever.

La meilleure solution, c'est de gérer l'ordre de dessin par la priorité des RendererState qui sont générés par l'API de rendu lors des appels à IEffectPass.fillRendererState. Il faut donc affiner un peu notre gestion de la priorité des RendererState dédiés aux objets transparents pour qu'elle reprenne le principe de l'algorithme du peintre : plutôt que d'affecter une priorité (RendererStage.priority) unique mais moindre au RendererState utilisant le Blending.ALPHA comme nous le faisaons actuellement (cf. BasicEffect.fillRendererState), il faudrait que cette priorité dépendent de la distance entre l'objet rendu et la position de la caméra. C'est assez simple à faire.

a+

[Logic]

Je teste un peu tous les moteurs histoire de comparer objectivement.

J'avais une démo sur Away 3D:
http://www.flashkart.../noorsTest.html

Les transparences passent très bien.

J'ai commencé une version Minko pour me faire la main:
http://www.flashkart...minkoNoors.html

Ca serait cool si ça passait aussi

[Jean-Marc Le Roux]

Logic, le 09 November 2011 - 22:34 PM, dit :

Ca serait cool si ça passait aussi

Dans l'exemple que tu donnes, la transparence marche très bien...

Mais je crois que dans le premier cas tu utilises un blending additif, alors qu'avec Minko tu utilises le blending alpha.

styleGroup.style.set(BasicStyle.BLENDING, Blending.ADDITIVE);
 

Forcément avec un blending additif il y'a moins de problèmes de transparence

[Logic]

Non pas d'additif ni dans l'un ni dans l'autre, tout en alpha

Et dans la version Minko, les superpositions des petites étoiles (des Quad avec PNG alpha) ne se passent pas toujours bien. Mais j'avoue, il faut regarder attentivement

[Jean-Marc Le Roux]

Logic, le 10 November 2011 - 19:02 PM, dit :

Non pas d'additif ni dans l'un ni dans l'autre, tout en alpha

Dans le premier cas les étoiles virent au blanc lorsqu'elles se superposent, donc il n'y a pas que de l'alpha.
Pas dans le second.

Une autre solution c'est de faire des meshes correctement détourés plutôt que d'utiliser des quads.
C'est bien mieux que d'utiliser "kill".

[Logic]

Rolala mais tu es têtu toi

Tiens si tu veux vérifier dans ma page de code toute crado qui pue des pieds

Les étoiles virent au blanc parce que j'anime un ColorTransform

package {
        import away3d.cameras.Camera3D;
        import away3d.containers.Scene3D;
        import away3d.containers.View3D;
        import away3d.core.base.data.UV;
        import away3d.entities.Mesh;
        import away3d.entities.Sprite3D;
        import away3d.events.LoaderEvent;
        import away3d.lights.DirectionalLight;
        import away3d.lights.PointLight;
        import away3d.loaders.Loader3D;
        import away3d.loaders.parsers.OBJParser;
        import away3d.materials.BitmapFileMaterial;
        import away3d.materials.BitmapMaterial;
        import away3d.materials.ColorMaterial;
        import away3d.materials.methods.BasicSpecularMethod;
        import away3d.materials.methods.CelDiffuseMethod;
        import away3d.primitives.Cube;
        import away3d.primitives.Cylinder;
       
        import flash.display.Bitmap;
        import flash.display.BitmapData;
        import flash.display.BlendMode;
        import flash.display.Loader;
        import flash.display.Sprite;
        import flash.display.StageAlign;
        import flash.display.StageScaleMode;
        import flash.events.Event;
        import flash.geom.ColorTransform;
        import flash.geom.Vector3D;
        import flash.net.URLRequest;
       
        [SWF(width="800", height="600")]
        public class noorsTest extends Sprite
        {
       
                private var view:View3D;
                private var scene:Scene3D;
                private var cam:Camera3D;
               
                private var noorsloader3D:Loader3D;
               
                private var numLights:int;
                private var tabLights:Array; //PointLight;
                private var tabLightAnglesOrbit:Array //Number;
                private var lightRadiusOrbit:Number;
                private var numTailStars:int;
                private var tabStars:Vector.<Sprite3D>;
                private var tabTailStars:Array;
               
               
                public function noorsTest()
                {
                        ////////
                        this.stage.scaleMode = StageScaleMode.NO_SCALE;
                        this.stage.align = StageAlign.TOP_LEFT;
                        ////////
                       
                        /////////////////////////////////////////////
                        scene = new Scene3D();
                        cam = new Camera3D();
                        view = new View3D(scene, cam);
                        //view.antiAlias = 4;
                        scene.addChild(cam);
                        this.addChild(view);
                        view.width = Math.min(800, stage.stageWidth);
                        view.height = Math.min(600, stage.stageHeight);
                        view.x = Math.round((stage.stageWidth - view.width) / 2);
                        view.y = Math.round((stage.stageHeight - view.height) / 2);
                        /////////////////////////////////////////////
                       
                        ////
                        view.backgroundColor = 0x111373;
                       
                        /////
                        var cyl:Cylinder;
                        var matCyl:BitmapFileMaterial;
                        matCyl = new BitmapFileMaterial( "assets/bg.jpg" );
                        matCyl.bothSides = true;
                        matCyl.repeat = true;
                        cyl = new Cylinder( null, 1000, 1000, 500, 32, 1, false, false, true );
                        cyl.material = matCyl;
                        cyl.y = 100;
                        scene.addChild( cyl );
                       
                        ////
                        starLoader = new Loader();
                        starLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onStarComplete),
                        starLoader.load( new URLRequest("assets/star.png") );
                }
               
                private var starLoader:Loader;
                private function onStarComplete(e:Event):void
                {
                        ////
                        var starBmpData:BitmapData;
                        starBmpData = Bitmap(starLoader.content).bitmapData;
                       
                        /////
                        numLights = 4;
                        lightRadiusOrbit = 120;
                        tabLights = new Array();
                        tabLightAnglesOrbit = new Array();
                       
                        tabStars = new Vector.<Sprite3D>;
                        numTailStars = 8;
                        tabTailStars = new Array();
                        var matStar:BitmapMaterial;
                        var colTranf:ColorTransform;
                        var j:int;
                        for ( var i:int=0 ; i<numLights; i++ )
                        {
                                tabLights[i] = new PointLight();
                                tabLights[i].fallOff = 250;
                                tabLights[i].y = - 400 + i*150;
                                scene.addChild( tabLights[i] );
                                tabLightAnglesOrbit[i] = i*3;
                               
                                matStar = new BitmapMaterial(starBmpData);
                                matStar.alphaBlending = true;
                                tabStars[i] = new Sprite3D(matStar, 25, 25);
                                colTranf = new ColorTransform();
                                colTranf.color = 0xFFFFFF;
                                colTranf.alphaMultiplier = 1;
                                matStar.colorTransform = colTranf;
                                scene.addChild( tabStars[i] );
                                tabTailStars[i] = new Array();
                                for ( j=0 ; j<numTailStars ; j++ )
                                {
                                        matStar = new BitmapMaterial(starBmpData);
                                        matStar.alphaBlending = true;
                                        colTranf = new ColorTransform();
                                        colTranf.redOffset = Math.max( 0, 255 - 30 *j);
                                        colTranf.greenOffset = Math.max( 0, 255 - 30 * j);
                                        colTranf.blueOffset = Math.max( 0, 255 - 30 * j);
                                        colTranf.alphaMultiplier = 0.85;
                                        matStar.colorTransform = colTranf;
                                        tabTailStars[i][j] = new Sprite3D(matStar, 25-(4*(j+1)), 25-(4*(j+1)));
                                        scene.addChild( tabTailStars[i][j] );
                                }
                        }
                       
                        ////
                        var cube:Cube;
                        var cubeMat:ColorMaterial;
                        cube = new Cube();
                        cube.width = 200;
                        cube.height = 20;
                        cube.depth = 200;
                        cube.y = -88;
                        cubeMat = new ColorMaterial( 0x8AEB34 );
                        cubeMat.ambient = 0.35;
                        cubeMat.specularColor = 0xCC9966;
                        cubeMat.specular = 1;
                        cubeMat.lights = tabLights.slice(0);
                       
                        cube.material = cubeMat;
                        scene.addChild( cube );
                        ////
                        Loader3D.enableParser(OBJParser);
                        noorsloader3D = new Loader3D();
                        noorsloader3D.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
                        noorsloader3D.load(new URLRequest("assets/testNoursUVWrap.obj"));
                        noorsloader3D.rotationX = 90;
                        noorsloader3D.rotationY = 90;
                        noorsloader3D.y = -80;
                        scene.addChild(noorsloader3D);
                       
                        ////
                        this.addEventListener(Event.ENTER_FRAME, enterFrame);
                        stage.addEventListener(Event.RESIZE, resize);
                }
               
                private var mat:BitmapFileMaterial;
                private function onResourceComplete(e:LoaderEvent) : void
                {
                        mat = new BitmapFileMaterial( "assets/CompleteMap2.png" );
                        mat.lights = tabLights.slice(0);
                        mat.ambient = 0.35;
                        mat.specular = 0.3;
                       
                        var celDiffMeth:CelDiffuseMethod;
                        celDiffMeth = new CelDiffuseMethod(3);
                        mat.diffuseMethod = celDiffMeth;
                       
                        var celSpecMeth:BasicSpecularMethod;
                        celSpecMeth = new BasicSpecularMethod();
                        mat.specularMethod = celSpecMeth;
                        mat.specularColor = 0x997722;
                        mat.specular = 1;
                       
                        Mesh(noorsloader3D.getChildAt(0)).material = mat;
                }
               
                private function resize(e:Event):void
                {
                        view.x = Math.round((stage.stageWidth - view.width) / 2);
                        view.y = Math.round((stage.stageHeight - view.height) / 2);
                }
               
                private function enterFrame(e:Event):void
                {
                        ////
                       
                        var colTranf:ColorTransform;
                        var j:int;
                        for ( var i:int=0 ; i<numLights ; i++ )
                        {
                                tabLightAnglesOrbit[i] += 0.125;
                                tabLights[i].x = lightRadiusOrbit * Math.cos( tabLightAnglesOrbit[i] );
                                tabLights[i].z = lightRadiusOrbit * Math.sin( tabLightAnglesOrbit[i] );
                                tabLights[i].y += 5;
                                if (tabLights[i].y >= 400)      tabLights[i].y = -400;
                                tabStars[i].x = tabLights[i].x;
                                tabStars[i].z = tabLights[i].z;
                                tabStars[i].y = tabLights[i].y;
                                for ( j=0 ; j<numTailStars ; j++ )
                                {
                                        tabTailStars[i][j].width -= 2;
                                        tabTailStars[i][j].height -= 2;
                                        colTranf = tabTailStars[i][j].material.colorTransform;
                                        if ( tabTailStars[i][j].width <= 0 )
                                        {
                                                tabTailStars[i][j].x = tabStars[i].x + 14*Math.random() - 7;
                                                tabTailStars[i][j].z = tabStars[i].z + 14*Math.random() - 7;
                                                tabTailStars[i][j].y = tabStars[i].y + 14*Math.random() - 7;
                                                tabTailStars[i][j].width = 25;
                                                tabTailStars[i][j].height = 25;
                                               
                                                colTranf.redOffset = 255;
                                                colTranf.greenOffset = 255;
                                                colTranf.blueOffset = 255;
                                        }
                                        else
                                        {
                                                colTranf.redOffset = Math.max(1, colTranf.redOffset - 50);
                                                colTranf.greenOffset = Math.max(1, colTranf.greenOffset - 50);
                                                colTranf.blueOffset = Math.max(1, colTranf.blueOffset - 50);
                                        }
                                        tabTailStars[i][j].material.colorTransform = colTranf;
                                }
                        }
                       
                        ////
                        var camAngleOrbit:Number;
                        camAngleOrbit = - 2 * Math.PI * this.mouseX / this.stage.stageWidth;
                        cam.x = 240 * Math.cos(camAngleOrbit);
                        cam.z = 240 * Math.sin(camAngleOrbit);
                        cam.y = -100 + 200 * this.mouseY / this.stage.stageHeight;
                        cam.lookAt( new Vector3D(0, 0, 0) );
                       
                        ////
                        view.render();
                }
               
        }
}

 

[Jean-Marc Le Roux]

Logic, le 12 November 2011 - 20:48 PM, dit :

Rolala mais tu es têtu toi

Tiens si tu veux vérifier dans ma page de code toute crado qui pue des pieds

Les étoiles virent au blanc parce que j'anime un ColorTransform

Oui, mais typiquement ton code est intéressant.
Il ne faut surtout pas utiliser un ColorTransform, mais faire ça dans le shader !

[Logic]

Dans Away3D, quand tu appliques un colorTransform sur un material, en interne ça joue sur le shader.

[Logic]

Comment je fais l'équivalent de ce colorTransform dans Minko ?

[thot]

Tu ponds ton propre shader ?

[Logic]

Thoutmosis, le 15 November 2011 - 10:23 AM, dit :

Tu ponds ton propre shader ?

Et mon cul c'est du poulet ?

[Jean-Marc Le Roux]

Logic, le 15 November 2011 - 13:19 PM, dit :

Et mon cul c'est du poulet ?

Si tu espères faire de la 3D temps-réel sans écrire de shader, il va falloir évoluer...
L'écriture de shader représente sûrement 50% du travail sur une application 3D.

Avoir des shaders tout fait c'est bien, mais ça te permettra juste de pondre une application qui ressemblera trait pour trait à celle de ton voisin, ce qui n'est pas le but.

Citation

Dans Away3D, quand tu appliques un colorTransform sur un material, en interne ça joue sur le shader.

Ca m'étonnerait que ça aie une quelconque influence sur le shader. Et si c'est le cas, ça reste une solution très spécifique pour régler un problème plus général : la gestion de shader dynamiques.
Le cas général passera forcément par l'écriture d'un shader.

Tu utilises surement un DisplayObject comme texture. Ca influe le DisplayObject qui est re-uploadé sur le GPU à chaque frame, ce qui n'est pas une solution utilisable en prod' car trop coûteuse.
C'est tout à fait possible de faire la même chose avec une DynamicTexture. Seulement si le but c'est vraiment de faire cet effet graphique, je le déconseille absolument. Les effets graphiques doivent être écrit avec des shaders.

Il FAUT apprendre à écrire des shaders.

Avec Minko, il est même relativement simple d'écrire un shader en AS3 qui prendrait en compte un objet ColorTransform. Mais encore une fois, ça répond à un besoin très spécifique.
Il ne faut surtout pas imaginer que l'on peut se dispenser d'écrire des shaders.

Tu peux également reproduire le même genre de comportement en utilisant le style BasicStyle.DIFFUSE_MULTIPLIER qui permet de spécifier un Vector4 qui sera multiplié au diffuse avant de l'écrire dans le backbuffer. Mais encore une fois, si tu veux des effets de ce type, le mieux est très clairement de s'intéresser à l'écriture de shaders.

Au final, en proposant ce genre de workaround, ça donne l'impression qu'il n'y a rien à apprendre pour faire de la 3D temps réelle. Et c'est complètement faux.
Ca me rappelle le bon vieux "gl_begin" d'OpenGL qui était loué par tous les gens commençant la 3D par ce que "c'est plus simple que DirectX". C'est plus simple oui, mais dans la vraie vie c'est complètement inutilisable et les seules solutions viables sont aussi (voir plus) lourdes en OpenGL qu'en DirectX.

C'est la même chose ici.

a+

[Logic]

Attention encore une fois tu supposes des choses fausses sans même aller te renseigner à la source. Tu donnes une image de débutant naïf trop sûr de lui Tu devrais aller jeter un oeil aux sources d'autres moteurs 3D. Après tout ça sera peut-être inspirant ?

Citation

Il FAUT apprendre à écrire des shaders

OK par quoi je commence ?

[tlecoz]

Salut Jean-Marc,

Citation

Il FAUT apprendre à écrire des shaders.

Si créer des Shaders est à ce point indispensable, peux tu nous montrer comment faire ?

Le code de Minko n'est pas hyper facile à lire et tu disais toi-même au back-from-max que la manière dont il a été codé est un peu différente des autres moteurs, ce qui ne le rend pas très accessible.

Aujourd'hui, il n'est pas vraiment possible de se mettre à Minko (pour faire autre choses que des test) car il n'y a presque aucune ressources disponibles.

On sait qu'il est possible de générer des shaders en AS3, ça à l'air génial mais 99% des flasheurs ne savent même pas à quoi ressemble le code d'un Shader, alors en générer un à partir d'un nouveau framework sans aucun exemple.... bon courage

Pourquoi ne pas nous montrer concrètement comment faire par le biais des différentes questions qui sont posées sur le forum.

La question de logic par exemple me paraît tout à fait pertinente car un flasheur a l'habitude d'utiliser ColorTransform pour faire des effets ; ce n'est sans doute pas pertinent pour un pro de la 3D mais on est pas sur le forum de 3DSMax là...
Il est presque certain qu'une majorité de questions se baseront sur le modèle de fonctionnement de Flash parce que c'est ce que laplupart des membres du forum savent faire

Puisqu'il n'existe presque aucune ressources disponible sur Minko, on est un peu dépendant des réponses que tu donnes sur le forum pour pouvoir avancer... De fait, des réponses du genre

Citation

Avec Minko, il est même relativement simple d'écrire un shader en AS3 qui prendrait en compte un objet ColorTransform.

Sans pour autant nous montrer comment faire ...




C'est décourageant...

[thot]

Sans vouloir voler au secours de qui que ce soit ni faire dans le hautain je tiens à préciser une chose:

Si Adobe a mis à disposition une API bas niveau pour faire de la 3D c'est pour que des gens comme Jean-Marc puissent nous délivrer des moteurs qui nous facilitent un peu le travail.

MAIS ( et j'insiste sur le MAIS ) on ne peut faire l'impasse sur le fonctionnement de la 3D.
Vouloir faire de la 3D avec du code "flash API like" c'est possible mais ô combien peu formateur.

Il est nettement plus efficace et profitable sur le long terme d'apprendre la programmation 3D ( ce qui est difficile certes ).

Si on veut des "jeux de la mort qui tue" ou viser le "AAA" et bien il faut mettre les mains dans le cambouis.
Les shaders sont un aspect essentiel de la programmation graphique bas niveau, et donc par extension de la 3D, refuser de les apprendre c'est un peu comme vouloir customiser sa bagnole sans savoir à quoi ressemble un carbu, sauf que dans le cas de la voiture ... ben il y a pas de couches d'abstraction logicielle pour nous faciliter le boulot.

Donc pour répondre aux questions plus haut, notamment "Comment on fait pour écrire des Shaders", il y a des milliers de tutos qui traînent sur le net sans parler de quelques ouvrages de valeur comme "Real Time Rendering".
Il faut également passer par la case des maths, car c'est quand même bien de savoir un peu ce que l'on fait lorsqu'on manipule les objets 3D.

C'est quelque chose de long mais passionnant, pour ma part je me suis lancé il y a quelques mois et je suis une vraie quiche en maths. Pourtant à force d'effort, de patience, j'ai progressivement augmenté mon niveau, je suis loin d'être assez bon pour écrire mon propre moteur tout seul comme un grand mais maintenant lorsque je manipule un moteur 3D, je comprend tout de suite ce que je fais.

Voilà en espérant n'avoir vexé personne car tel n'était pas le but =).

[Logic]

OK pour les grands discours, mais en pratique, puisqu'il faut se taper des shaders pour faire un colorTransform, par où commencer ?

[lilive]

C'était pas vraiment assez détaillé à mon goût, mais j'ai pu faire mes premiers shader en lisant http://help.adobe.co...888f0-8000.html et en regardant ces exemples http://pixelante.com/tutorials.php
J'imagine que mes lointains souvenirs d'assembleur et mes bonnes bases mathématiques m'ont aidés.

[edit] Sinon j'ai eu l'impression d'un manque de doc pour aborder stage3D et notamment les shaders pour ceux qui n'ont jamais utilisé DirectX ou openGL. A un moment j'étais bloqué, et c'est seulement en regardant des docs sur OpenGL que je m'en suis sorti. Un peu laborieux, quand même.

[Logic]

Ouais donc pour faire un pauvre équivalent du colorTransform

Les maths ça va, mais l'assembleur m'a toujours débecté, c'est viscéral

Alors heureusement que j'ai pas l'ambition de coder un "AAA" Et si un jour l'opportunité se présente, ben on sera forcément à plusieurs sur le projet; et le spécialiste 3D, shader et rendu, ce sera pas moi

Ou bien j'utiliserai un autre moteur que Minko...

Modifié par Logic, 17 November 2011 - 20:54 PM.

[tlecoz]

Hello !

Citation

Il est nettement plus efficace et profitable sur le long terme d'apprendre la programmation 3D ( ce qui est difficile certes ).

Si on veut des "jeux de la mort qui tue" ou viser le "AAA" et bien il faut mettre les mains dans le cambouis.
Les shaders sont un aspect essentiel de la programmation graphique bas niveau, et donc par extension de la 3D, refuser de les apprendre c'est un peu comme vouloir customiser sa bagnole sans savoir à quoi ressemble un carbu, sauf que dans le cas de la voiture ... ben il y a pas de couches d'abstraction logicielle pour nous faciliter le boulot.

Donc pour répondre aux questions plus haut, notamment "Comment on fait pour écrire des Shaders", il y a des milliers de tutos qui traînent sur le net sans parler de quelques ouvrages de valeur comme "Real Time Rendering".
Il faut également passer par la case des maths, car c'est quand même bien de savoir un peu ce que l'on fait lorsqu'on manipule les objets 3D.

En 2D c'est un peu pareil : on peut utiliser des displayObject ou utiliser une structure plus abstraite pour dessiner tout les éléments dans le même objet Graphics (par exemple). La deuxième méthode est beaucoup plus optimisé, permet de bouger beaucoup plus d'élements, etc...

Pourtant, si je devais montrer à un débutant comment faire une animation flash, je pense que j'utiliserai les DisplayObjects et ce sera seulement une fois qu'il sera à l'aise, qu'il sera en demande de "comment faire mieux" que je lui montrerais des méthodes plus abstraites et plus efficaces.

J'ai l'impression qu'on est un peu dans le même cas. Avant de penser à avoir des Shaders de ouf qui se démarquent de la concurrence, j'aimerais d'abord savoir me débrouiller un minimum dans Minko et faire des choses simples (comme utiliser un ColorTransform par exemple...).
En ce qui concerne les Shaders , pour reprendre les mots de Jean-marc lors du back-from-max : "personne n'a envie de les écrire ces shaders" , je ne vais pas lui dire le contraire
Après je ne nie pas qu'il est important de savoir les écrire, mais est ce vraiment la première chose à apprendre quand on démarre la 3D ? Je ne pense pas.
Je pense que la plupart des gens utilisent un framework pour se simplifier la vie.

Si on me dit "pour utiliser Minko, t'as pas le choix, tu dois savoir écrire des Shaders" ou alors "tu peux coder des Shaders en AS3, mais ha! ha! je te dis pas comment!", je pense que la plupart des gens ayant peu d'expèrience en 3D se tourneront vers Away3D qui permet de faire simplement des choses simples.

Avec le temps, c'est certain, il faudra faire de mieux en mieux, les gens d'eux-même chercheront à coder des Shaders et Minko et son ShaderLab apparaitront comme le saint Graal, mais je n'ai pas l'impression qu'on en soit déjà là.

Aujourd'hui, n'importe quel jeu utilisant Stage3D avec n'importe quel Shader (aussi basique soit il) à des chances de faire un carton. Alors pourquoi les devs se prendraient la tête à apprendre à coder l'AGAL tout de suite alors que , pour la plupart, il doivent déjà apprendre à réaliser des projets en 3D ?


Je précise quand même que dans le fond je suis d'accord, c'est bien mieux de comprendre comment marchent les choses en interne, mais FlashPlayer 11 est sorti il y a un mois... C'est tout à ton honneur si tu as commencé à apprendre l'AGAL il y a des mois, mais je ne pense pas que beaucoup de gens aient le même profil que toi (mais je peux me tromper hein !)

[thot]

Alors pour commencer les shaders ( c'est pas de l'AGAL mais bon ... ) tu as ça par exemple -> http://www.siteduzer...s-en-glsl.html.

A savoir qu'il est plus simple d'écrire ses shaders en GLSL qu'en AGAL, mais en utilisant les classes qui permettent de coder des shaders en as3 de minko ça doit être à peu de choses prêts aussi facile. De plus il existe déjà des projets de compilateurs GLSL pour molehill du type -> http://code.google.com/p/glfm/ ( trouvé en deux secondes sur google code et même pas testé avec ça ).

Sinon vous pouvez passer aussi par pixelbender3D, ce qui vous évite de manipuler AGAL directement. J'avoue que lorsqu'on commence à coder ses propres shaders ça pique un peu les yeux, ça a également tendance à monopoliser tout le BPU ( Brain Processor Unit... ouais j'invente des mots ).

Je pense que quand Jean-Marc dit: "personne ne veut les écrire ces maudits shaders" cela sous-entend pas mal de choses notamment que minko va nous faciliter la vie en nous laissant la possibilité d'écrire des shaders en AS3, ce qui est de loin un grooos progrès ( car au risque de me répéter, oui l'AGAL pique les yeux ). Mais je ne pense pas qu'il faille comprendre que grâce à minko, plus personne n'aura jamais à écrire de shaders.
Après je peux me gourer ...

Mais je pense sincèrement que si le projet est open source, c'est aussi pour que les gens puissent s'auto-former, analyser le source, poser des questions et comprendre petit à petit. Comme tout les démarrages ce sera juste douloureux , préparons-nous donc à en ch... encore pendant longtemps.

[Logic]

Pixelbender3D semble être un bon compromis. Sauf si il y a des contre-indications ?

Bon après ça serait pratique d'avoir un exemple minimaliste d'intégration sous Minko pour prendre appui.

[tlecoz]

Hello !

Citation

Je pense que quand Jean-Marc dit: "personne ne veut les écrire ces maudits shaders" cela sous-entend pas mal de choses notamment que minko va nous faciliter la vie en nous laissant la possibilité d'écrire des shaders en AS3, ce qui est de loin un grooos progrès ( car au risque de me répéter, oui l'AGAL pique les yeux ). Mais je ne pense pas qu'il faille comprendre que grâce à minko, plus personne n'aura jamais à écrire de shaders.
Après je peux me gourer ...

J'ai jamais dit le contraire
Mais je pense aussi que ça veut dire "personne n'a envie de les écrire" dans son sens littérale

Bref je ne suis pas du tout en train de dire que l'AGAL c'est nul, et que je n'en ferais jamais, je dis simplement qu'il faut prendre en considération que tout le monde n'a pas les même bagages en 3D , qu'on se trouve ici sur un forum Flash pas sur un forum dédié à la 3D et qu'il ne faut pas s'étonner que seulement 1 mois après la sortie du FP11 peu de gens ai touché aux Shaders.

Je ne dis pas non plus que Minko c'est nul, je ne le pense vraiment pas. Au contraire même, Minko ça a l'air génial, mais pour l'instant c'est surtout frustrant car il n'y a pas assez d'exemples sur le net (à part ceux de JM).
Minko parait super optimisé, mais si je ne sais par ou commencer pour l'utiliser ça ne sert à rien. Comme le dit Logic en 10x moins de ligne que moi ( ), un exemple minimaliste d'intégration dans Minko serait le bienvenu.

D'ailleurs Thoutmosis, si tu sais faire, n 'hésite pas à nous montrer

Citation

Pixelbender3D semble être un bon compromis. Sauf si il y a des contre-indications ?

Adobe a abandonné PixelBender3D bien avant Flash sur mobile , va falloir faire sans

[Jean-Marc Le Roux]

Je vous arrête tout de suite
Avec Minko il n'y besoin ni d'AGAL ni de PB3D.
Avec Minko, les shaders sont écrits en AS3.

Voilà des exemples très simples pour vous aider à commencer le temps que la doc. arrive (ce week end surement):

public class SimpleShader extends ActionScriptShader
{
  // retourne la position du vertex en clipspace (repère écran normalisé [-1 .. 1])
  override protected function getOutputPosition() : SValue
  {
    return vertexClipspacePosition;
  }

  // retourne du rouge pour la couleur du pixel
  override protected function getOutputColor() : SValue
  {
    return float4(1., 0., 0., 1.);
  }
}
 

Un autre exemple avec une texture:

public class SimpleTextureShader extends ActionScriptShader
{
  // retourne la position du vertex en clipspace (repère écran normalisé [-1 .. 1])
  override protected function getOutputPosition() : SValue
  {
    return vertexClipspacePosition;
  }

  // retourne du rouge pour la couleur du pixel
  override protected function getOutputColor() : SValue
  {
    // on doit utiliser "interpolate" car la valeur viens du vertex shader
    var uv : SValue = interpolate(vertexUV);

    return sampleTexture(BasicStyle.DIFFUSE, uv);
  }
}
 

Un exemple pour reproduire l'effet de color transform:

public class SimpleTextureShader extends ActionScriptShader
{
  private var _offset : Vector4 = null;
  private var _multiplier : Vector4 = null;

  public function ColorTransformShader(offset : Vector4, multiplier : Vector4)
  {
    _offset = offset;
    _multiplier = multiplier;
  }

  // retourne la position du vertex en clipspace (repère écran normalisé [-1 .. 1])
  override protected function getOutputPosition() : SValue
  {
    return vertexClipspacePosition;
  }

  // retourne du rouge pour la couleur du pixel
  override protected function getOutputColor() : SValue
  {
    // on doit utiliser "interpolate" car la valeur viens du vertex shader
    var uv : SValue = interpolate(vertexUV);
    var diffuse : SValue = sampleTexture(BasicStyle.DIFFUSE, uv);

    // applique les coefficient multiplicateurs
    diffuse = multiply(diffuse, multiplier);
    // applique l'offset
    diffuse = add(diffuse, _offset);

    return diffuse;
  }
}
 

Voilà comment utiliser de tels shaders sur la scène :

viewport.defaultEffect = new SinglePassRenderingEffect(new MyCoolShader());
 

Voilà comment utiliser de tels shaders sur une sous-scène en particulier :

var es : EffectGroup = new EffectGroup(new SinglePassRenderingEffect(new MyCoolShader()));

es.addChild(... // ajoutez tout ce que vous voulez rendre avec cet effet/shader

_scene.addChild(es);
 

Minko a un compilateur JIT qui, au runtime, compile vos shaders AS3 directement vers du bytecode AGAL uploadé sur la carte graphique. Vous pouvez donc écrire tous vos shaders dans votre projet Flash. De plus ce compilateur effectue beaucoup d'optimisations à votre place, et fait toute l'allocation mémoire, la mise en place des buffers, des textures... tout est automatisé.

Si vous voulez voir le code AGAL généré par le compilateur, vous pouvez activer l'option de debug suivante:

Minko.debugLevel = DebugLevel.SHADER_AGAL;
 

Vous pouvez faire des fonctions, des classes, des boucles, des if... tout ce que vous faites habituellement en AS3.
Il faut juste bien comprendre comment marche :
- l'évaluation de ces shaders : qu'est ce qui se passe côté GPU et CPU
- la compilation de ces shaders : comment ça fonctionne derrière et comment rendre les shaders dynamiques/paramétriques
- comment marche un vertex et un fragment shader : ça, on ne peut pas y couper

La doc expliquera tout ça en détail, c'est pour ça que c'est un peu long.
Mais en gros, oubliez l'AGAL.

a+

PS: j'ai écrit les shaders sans checker, il y'a peut-être des petites erreurs mineures.

[tlecoz]

Ah ouais effectivement on est loin du code AGAL !



Merci beaucoup pour ces exemples !

J'ai hâte de lire la doc maintenant que je sais qu'elle est en préparation

[thot]

Sympa l'exemple !! Merci Jean-Marc

[Logic]

Cool je vais tenter de faire mumuse avec ça demain. Merci Jean-Marc

[Jean-Marc Le Roux]

Logic, le 18 November 2011 - 21:48 PM, dit :

Cool je vais tenter de faire mumuse avec ça demain. Merci Jean-Marc

De rien.
Bien sûr il s'agit d'exemples simples.
On peut faire des choses bien plus compliquées.
Mais si vous savez comment marche un vertex/fragment shader et que vous utilisez l'auto-completion, vous devriez arriver à produire tout ce que vous voulez.
La seule opération AGAL qui n'est pas encore accessible c'est le "kill" pour des raisons assez compliquées (compilation, évaluation, tout ça...) que je ne détaillerais pas ici.

Dans la V2 de Minko, il y'aura :
- une séparation plus claire entre les styles et les textures
- le support de l'opération AGAL "kill"
- une compilation plus rapide
- une meilleure allocation mémoire pour les constantes
- un éditeur visuel de shaders : le shader lab

Il va sans dire que la possibilité d'écrire des shaders en AS3 est une des fonctionnalités les plus importantes de Minko. Et c'est d'ailleurs aussi une de celles qui nous a demandé le plus de temps. Mais cela nous paraissait primordial de proposer une manière efficace de travailler avec le GPU et de rendre ça accessible à des flasheurs.

J'ai créé un topic à part pour mettre les shaders AS3 d'exemple pour ne pas qu'on s'emmêle les pinceaux.

a+

[Jean-Marc Le Roux]

L'intégration de l'instruction AGAL "kil" ainsi que l'ajout d'un tri automatique des draw call en fonction de la profondeur dans minko 2 permet de gérer toutes ces problématiques de transparence :

var m : Mesh = new Mesh(
  CubeGeometry.cubeGeometry,
  {
    diffuseMap : TextureLoader.load(/* charge le png */),
    alphaThreshold : 0.1 // ne traite pas tous les pixels dont l'alpha est <= 0.1
    blending : Blending.ALPHA
  }
);
 

Pour implémenter cette fonctionnalité dans vos propres shaders, vous pouvez regarder comment nous avons procéder dans le BasicShader, qui est celui utilisé par défaut dans Minko :

if (meshBindings.propertyExists(BasicProperties.ALPHA_THRESHOLD))
{
  var alphaThreshold : SFloat = meshBindings.getParameter('alphaThreshold', 1);

  kill(subtract(0.5, lessThan(diffuse.w, alphaThreshold)));
}
 

[tlecoz]

Salut Jean Marc,

D'avance, désolé de t'embêter avec cette question un peu piège, mais c'est pour être sur de comprendre (parce que pour l'instant je ne comprend plus)

Tu dis aujourd'hui

Citation

L'intégration de l'instruction AGAL "kil" ainsi que l'ajout d'un tri automatique des draw call en fonction de la profondeur dans minko 2 permet de gérer toutes ces problématiques de transparence :

mais un peu au dessus dans le sujet , lilive disait

Citation

Les triangles de premier plan sont dessinés en premier, sauf aux endroits où leur alpha est sous un seuil donné (grâce à kil).

et tu lui as répondu

Citation

C'est une très très mauvaise idée. Kill a un coup prohibitif et de toute façon, ça ne gère que l'alpha == 0. Au delà du fait qu'on a très souvent de la transparence pour autre chose qu'un alpha == 0, j'imagine par exemple que le filtrage bilinéaire peut causer tout plein d'artefacts très disgracieux même quand l'alpha d'origine de la texture est soit 1 soit 0 puisque l'interpolation donnera des valeurs intermédiaires.

Il est très très probable que je comprenne mal, mais j'ai l'impression que la solution que tu proposes aujourd'hui ressemble à la solution de lilive ?
Si oui, qu'est ce qui t'a fait changé d'avis ?

C'est chouette que ça fonctionne facilement en tout cas !



PS: Désolé de ne pas être venu à ton workshop tout à l'heure et d'avoir pris la place de quelqu'un d'autre pour rien ; je voulais venir, julien B. m'avait inscrit mais ne m'avait pas dit à quel heure c'était et on ne s'est pas croisé ...

[Jean-Marc Le Roux]

La différence comme tu peux le lire dans le code, c'est que kill() n'est appelée que si la propriété "alphaThreshold" est définie. il n'y a donc aucune différence de performance pour les autres meshes. Il en va de même pour le tri en profondeur des draw call, qui n'est activé que si le blending est alpha ou additif.

Tu as donc toutes les options à ta portée, à toi de peser le pour et le contre entre un mesh avec plus de triangles ou l'utilisation de kill().