todo.txt

verifier que tout les attributes d'un vertexBuffer ont le meme type, sinon créé d'autre vb

ne pas rassembler les données des uniformGroup dans un unique Float32Array pour préserver les types de données 
|-> faire tout pareil sauf la mise a jour des dates, primitiveType par primitiveType plutot que uniformGroup par uniformGroup 


gerer les pipelineType "render-mixed" (si la renderPipeline contient une resource IO ) ; gerer le type "vertexDebug" pour gérer le debug avec les renderPipeline qui exploitent un vertexBufferIO 



















pouvoir définir une valeur de debug une seule fois via BuiltIns.vertexDebug 

et s'en servir plusieur fois , par exemple : 

debug.test = 123;
//some code 
debug.test = 456;


doit produire 
debug.test__ID__1 = 123;
debug.test__ID__2 = 456;




c'est davantage un computeVertexFeedback qu'un vertexFeedback 



si on utilise des Vec4Array,Matrix4x4,Matrix4x4Array ,... 
|-> nbInstance dans le vertexBufferIO = Math.max(Matrix4x4Array.length * 4 * nbVertex,Math.max(Vec4Array.length *  nbVertex,4 * nbVertex))   (4 == matrix4x4)


on repartie les données sur 4 VertexBuffer ;
   - pour les float,vec2,vec3,vec4,...  : 1 Float par buffer , quitte a mettre des 0 

            par exemple pour un vec2()
            BUF0 : vec2.x, 
            BUF1 : vec2.y
            BUF2 : 0 
            BUF3 : 0

    - pour les array of float/vec : 
            par exemple pour un vec2()
            BUF0 : vec2.x x nbInstance, 
            BUF1 : vec2.y x nbInstance
            BUF2 : 0      x nbInstance
            BUF3 : 0      x nbInstance

   - pour les matrixs : 1 Vec4 par buffer 

            BUF0 : m1,m2,m3,m4
            BUF1 : m5,m6,m7,m8
            BUF2 : m9,m10,m11,m12
            BUF3 : m13,m14,m15,m16

   - pour les Matrix4x4Array , 1 vec4 par buffer 
                      
            BUF0 : m1,m2,m3,m4  x nbInstance
            BUF1 : m5,m6,m7,m8  x nbInstance
            BUF2 : m9,m10,m11,m12 x nbInstance 
            BUF3 : m13,m14,m15,m16 x nbInstance 
                   
                   
                   


(1 float par buffer pour tout, sauf les matrixs (4 float by buffer) )   
  



pour ajouter des elements de debug dans la renderPipeline : 
- ajoute un tableau de point permettant de dessiner un quad dans les constantes du shader de la renderPipeline
- ajuste le nombre de instanceCount 
=> dans le shader , verifie si l'instanceId correpond a un element de debug 
   => si oui , 
            si le vertexId < 4 , dessine le quad 
            sinon  output.position = vec4(10000000.0,10000000.0,10000000.0,1.0);



 ajoute une propriete 'renderDebugShader" dans l'objet de config du debugger
 |=> si cette propriété est défini , ce sera le code ajouté dans le vertexShader exploitant les renderDebugs 

ajoute une propriété 'computeDebugShader' dans l'objet de config 
|=> si la propriété est défini , on applique ce code au renderDebug a la fin du traitement











 bug de vertexSahderDebugger + pipelinePlugin ? 























-fix bug params + add button "lose device" 
- simplify / normalize file structure 
  |-> put textures in ShaderResource , implements IShaderResource
     |-> test demo after each changes
	 
	 
- remove ResizableRenderPipeline from samples 
  |-> keep the class 
  
- load assets directly in the sample , not in the class Sample to expose the complete process 

- create a WebGpuViewer class exteds ResizableRenderPipeline based on a canvas in order to easily integrate demos in tutorials 


- write some tutorials 

- renderBundler 
- fix bugs defined in readme 

- vectorGraphics
- BitmapText 
- others demos 

- create a reactComponent containing WebGpuViewer


//------------------------------------------



fix l'histoire du tableau avec le shader décomposé en 2 dans light/shadow 




gérer le fait d'utiliser le même objet plusieurs fois avec des noms de propriétés différentes




quand on créé une classe qui extends PrimitiveType et qui dispose de propriété custom
|-> dans le shader , cela convertit notre PrimtiveType en struct 
    |-> on ne peut plus utiliser notre variable comme PrimitiveType, ce qui peut etre pénible
        |-> par exemple , si j'ai une classe Dimension extends Vec2 avec width et height ,
            dans le shader je ne peux plus faire pos.xy * dimension 
            ===> je suis obligé de faire vec2(pos.x * dimension.width, pos.y * dimension.height) 
                 ce qui est super relou 


                |-> ajoute un process a la fin du build qui  
                    - scanne le code ligne par ligne 
                    - cherche dans chaque ligne la présence d'un nom de struct 
                     |-> si on en trouve, on vérifie que le caractère d'après est un point 
                         |-> si ce n'est pas le cas, on créé une nouvelle variable locale qui contient un équivalent de notre struct en primitiveType 

 
                ou alors.... et c'est sans aucun doute le mieux  (mais plus difficile)
                |-> on restructure toutes les données sans aucune struct, ce qui implique de re-aligner les uniform sans struct 
                   |-> et on reconstruit le code du shader





renderBundle sample 
GameOfLife sample 
computeBoids sample 
deffered rendering sample
texture setup sample
ribbon sample 
bitmapFont sample
SDF Font Sample 
VectorGraphic Sample

export to JSON 

buildPipelineFromJSON 



//#######################################################################################################






dans un cas comme celui là : 

pipeline.initFromObject({
    machin:{
        a:new Float(),
        b:new Vec2(),
        img:new ImageTexture(),
        sampler:new TextureSampler();
        attribute:new VertexAttribute.Vec2(),
        vertexBuffer:new VertexBuffer({
            aaa:VertexAttribute.Float()
        }),
        obj:{
            truc:new vec3(),
            bidule:new vec4()
        }
    }
})

'machin' devient un uniformBuffer qui contient 'a' , 'b' et 'obj' sous forme d'un UniformGroup (qui produira un struct) 
'img' et 'sampler' sont ajouté au bindgroup de la pipeline
'vertexBuffer" est ajouté au bindgroup de la pipele 
'attribute' est ajouté dans 'vertexBuffer' 


dans un cas comme celui là :

let objects = [];
for(let i=0;i<4;i++){
    objects[i] = {
        a:new Float(),
        b:new Vec2(),
        img:new ImageTexture(),
        sampler:new TextureSampler(),
        attribute:new VertexAttribute.Vec2(),
        vertexBuffer:new VertexBuffer({
            aaa:VertexAttribute.Float()
        }),
        obj:{
            truc:new vec3(),
            bidule:new vec4()
        }
    }
}


pipeline.initFromObject({
    objects
})


'objects' devient un UniformBuffer qui contient 'a' sous forme d'un FloatArray , 'b' sous forme d'un vec2Array et 'obj' sous forme d'une UniformGroupArray  


'img' devient un tableau d'image 
'sampler' devient un tableau de sampler 

'attribute' passe dans 'vertexBuffer' 

on ajoute un bout de code dans les constantes du shader ;
const vertex_buffer_start_indexs:array<i32, arrayLength> = [vertexStartId1,vertexStartId2,vertexStartId3]
const vertex_buffer_lengths:array<i32, arrayLength> = [vertexLen1,vertexLen2,vertexLen3]
const vertex_length = vertexBuffer.attributes.length






Idealement, il faudrait trouver un moyen de pouvoir écrire 

const {a,b,objs,img,sampler,attribute, aaa} = objects[instanceId]; 

directement dans le shader , ce qui produirait en réalité 



//si, et seulement si, on embarque une vertexBuffer / vertexAttributes dans l'objet , on récupère l'instanceId comme ça sinon on utilise le BuiltIns.instanceId

let start:i32;
let len:i32;
let instanceId:i32;
for(let i=0;i<vertex_length;i++){
    if(vertexId >= vertex_buffer_start_indexs[i]  && vertexId < vertex_buffer_start_indexs[i] + vertex_buffer_lengths[i]){
        instanceId = i;
        break;
    }
}

//-------

const a = objects.a[instanceId]
const b = objects.b[instanceId]
const objs = objects.objs[instanceId]
const img = imgs[instanceId];
const sampler = sampler[instanceId];





==================>>>>>   IL FAUT FAIRE CA !!!!!!! 




















ajouter un autre type GPUObject extends UniformGroup qui permet également de stocker les autres IShaderResources
|-> pouvoir créer un tableau de GPUObject comme ça par exemple 


Admettons qu'on dispose déja d'une Pipeline permettant d'afficher un carré coloré qui servira de classe de base défini comme ça 

class QuadPipeline extends RenderPipeline {
    constructor(renderer,options){
        super(renderer);
        this.initFromObject({
            vertexId:BuiltIns.vertexInputs.vertexId,
            uv:BuiltIns.vertexOutputs.Vec2,
            vertexShader: {
                constants: `
                    const pos = array<vec2<f32>,6>(
                        vec2(-1.0, -1.0),
                        vec2(1.0, -1.0),
                        vec2(-1.0, 1.0),
                        vec2(1.0, -1.0),
                        vec2(1.0, 1.0),
                        vec2(-1.0, 1.0),
                    );
                `,
                main: `
                output.position = vec4(pos[vertexId],0.0,1.0);
                output.uv = vec2(0.5 + pos[vertexId]*0.5);
                `
            },
            fragmentShader:`output.color = vec4(uv,0.0,1.0);`,
            ...options
        })
    }
}

et puis pourquoi pas un type custom de base 

class Dimension extends Vec2 {

    constructor(x=0,y=0){
        super(x,y);
        this.initStruct("width","height");
    }

    public get width():number{return this.x;}
    public set width(n:number){this.x = n;}

    public get height():number{return this.y;}
    public set height(n:number){this.y = n;}

}


//---- 
Quand j'arriverai au bout de ce que je suis en train de faire,
on pourra créer 4 images à 4 position différente au sein de la même pipeline
(ce qui est infiniment plus optimisé que de dupliquer des pipeline, mais infiniment plus compliqué à mettre en place aussi)

avec un code aussi simple que :



let urls = [
    "img0.jpg",
    "img1.jpg",
    "img2.jpg",
    "img3.jpg",
]


var images = new GPUObject({
    img:new ImageTexture(),
    textureSampler:new TextureSampler(),
    dimension:new Dimension(),
    position:new Vec2(),
}).createInstances(urls.length,(instance,instanceId)=>{

    instance.img.source = await getImageBitmap(urls[instanceId]);
    instance.imgDimension.width = instance.choucroute.source.width;
    instance.imgDimension.height = instance.choucroute.source.height;
    instance.position.x = Math.random() * 500;
    instance.position.y = Math.random() * 500;
})

var pipeline = new QuadPipeline(renderer,{
    images,
    instanceCount:images.length,
    instanceId:BuiltIns.vertexInputs.instanceId, 
    id:BuiltIns.vertexOutputs.Float,
    vertexShader:{
        main:`
            var p = vec2(pos[vertexId].x * images[instanceId].dimension.width , pos[vertexId].y * images[instanceId].dimension.height);
            p += images[instanceId].position;
            output.position = vec4(p,0.0,1.0);
            output.uv = vec2(0.5 + pos[vertexId]*0.5);
            output.id = instanceId;
        `
    },
    fragmentShader:`
        output.color = textureSample(images[id].img,textureSampler,uv)
    `;
});

renderer.addPipeline(pipeline);




verifier a fond uniformBufferAlignment

 => tester avec les UniformGroup / UniformGroupArray 
    ==> tester avec des dizaines/centaines de ressources


UniformGroup => choisir si on veut updater
   - "all" : tout le buffer d'un 
     "minimal": seulement les infos mis a jour
     "auto" : si plus de 50% des ressources doivent être updaté "all" sinon "minimal"









ratio uniform dans renderer 








/*
creation d'une pipeline sous forme d'une classe qui n'extends rien et qui sera exploité comme un fichier texte 

pour utiliser les mots clés de WGSL , on peut écrire ça au debut de la fonction 

const {vec2,float,distance} = XGPU.wgsl (qui ne serait un object vide de type any)
|-> je ne sais pas si vec2<f32> est possible à écrire directement. 
    Si besoin, créé un repo git/npm dédié en faisant en reproduisant tout les types afin de faire de vec2 un Array et de pouvoir ecrire vec2<f32>


==============> Au lieu de créer une classe qui n'extends rien, fais plutot une vrai classe qui extends RenderPipeline 
avec une fonction "shader" qui ne sera jamais appelée et qui contient le code wgsl directemnt en JS !!!
*/







   

--------------

Modifier les VertexAttributes 


   

   |->  pouvoir écrire 
      new VertexBufferIO({
        radius:VertexAttributes.Float, 
        position:VertexAttributes.Vec2
      })

      au lieu de 

      new VertexBufferIO({
        radius:VertexAttributes.Float(), 
        position:VertexAttributes.Vec2()
      })


      simplement dire, si c'est une fonction, on l'execute et utilise l'objet qu'elle retourne à la place 










//-----------------------


const wgsl = {
    f32: (x: number = 0) => void {},
    vec2: (x: any = 0, y: any = 0) => void {},
    vec3: (x: any = 0, y: any = 0, z: any = 0) => void {},
    vec4: (x: any = 0, y: any = 0, z: any = 0, w: any = 0) => void {},

    i32: (x: any = 0) => void {},
    ivec2: (x: any = 0, y: any = 0) => void {},
    ivec3: (x: any = 0, y: any = 0, z: any = 0) => void {},
    ivec4: (x: any = 0, y: any = 0, z: any = 0, w: any = 0) => void {},

    u32: (x: any = 0) => void {},
    uvec2: (x: any = 0, y: any = 0) => void {},
    uvec3: (x: any = 0, y: any = 0, z: any = 0) => void {},
    uvec4: (x: any = 0, y: any = 0, z: any = 0, w: any = 0) => void {},

    f16: (x: any = 0) => void {},
    i16: (x: any = 0) => void {},
    u16: (x: any = 0) => void {},
};



        const vertexShader = (vertexId: number): { position: any, uv: any } => {

            const { vec2, vec4 } = wgsl;

            let vertexPos = [
                vec2(-1.0, -1.0),
                vec2(1.0, -1.0),
                vec2(-1.0, 1.0),

                vec2(1.0, -1.0),
                vec2(1.0, 1.0),
                vec2(-1.0, 1.0),
            ]

            let pos = vertexPos[vertexId];

            return {
                position: vec4(pos, 0.0, 1.0),
                uv: vec2(0.5 + pos * 0.5)
            }
        }

        const getShaderString = () => {

            const lines = ("" + vertexShader).trim().split("\n");
            let result = "";

            const getTypeInsideArray = (lineId: number) => {

                let line = lines[lineId + 1];
                console.log("getType ", lineId, lines[lineId])
                if (line.indexOf("(")) {
                    return line.split("(")[0].trim();
                } else {
                    let n = line.split(",")[0];
                    if (n.indexOf(".")) return "f32";
                    return "i32";
                }
            }

            const getArrayLength = (lineId: number, isFloat: boolean) => {
                let text: string = "";
                lineId++;
                let line;
                for (let i = 0; i < 10000; i++) {//prevent porential infinite loop
                    line = lines[lineId + i];
                    if (line.indexOf("]") !== -1) break;
                    text += line;

                }

                if (!isFloat) return text.split(")").length - 1;
                else text.split(",").length
            }

            const getReturnValue = (lineId: number) => {
                let text: string = "";
                let line: string;
                let t: string[];
                for (let i = 1; i < 10000; i++) {//prevent porential infinite loop
                    line = lines[lineId + i];
                    if (line.indexOf("}") !== -1) break;
                    t = line.split(":");
                    text += "output." + t[0].trim() + " = " + t[1] + ";\n"


                }

                return text;
            }


            let line: string;
            let openArray: boolean = false;
            for (let i = 0; i < lines.length; i++) {
                line = lines[i].trim();
                if (line.indexOf("const {") !== -1) {
                    continue;
                }

                if (line.indexOf("= [") !== -1) {
                    //console.log("A")
                    openArray = true;
                    //console.log("i = ", i)
                    let varType = getTypeInsideArray(i);
                    let arrayLen = getArrayLength(i, varType === "f32" || varType === "i32");

                    console.log(varType, arrayLen)

                    let t = line.split("=");
                    line = t[0] + " = array<" + varType + "," + arrayLen + ">("

                }

                if (openArray && line.indexOf("]") !== -1) {
                    line = line.replace("]", ")");
                    openArray = false;
                }

                if (line.indexOf("return ") !== -1) {
                    result += getReturnValue(i) + "\n";
                    break;
                }

                result += line + "\n";
            }

            return result;

        }

        const shader = getShaderString();
        console.log("shader = ", shader)



    ---------------------------------



const getValues = (model: string, text: string): string[] => {
    // Convert the model to regex pattern
    const regexPattern = model.split("?").join("([\\w.:{}\\[\\]|'\"`\n\s]+)");
    const regex = new RegExp(regexPattern, 'm');

    // Match the regex against the input text
    const matches = text.match(regex);

    // If no match found, return empty array
    if (!matches) return [];

    // Remove the first match which is the whole string
    matches.shift();

    // Return the rest of the matches
    return matches;
};

const input = `let o:{f32} = ['machin', 
'bidule'];`;

let result = getValues("let o:? = ['machin', \n'bidule'];", input); 
console.log(result); // ["{f32}"]

result = getValues("let ?:? = ['machin', \n'bidule'];", input); 
console.log(result); // ["o", "{f32}"]

result = getValues("let ?:? = ?;", input); 
console.log(result); // ["o", "{f32}", "['machin', \n'bidule']"]