soldier skin

const allAnimationDataArray = [];

​

let testGLTF;

​

let _node, LS;

​

const _timer = new p5wgex.Timer();

​

let textureLoaded = false; // そのうち何とかするけどね

​

// lilさんよろしく

const config = {

  mode:0

}

​

function createGUI(){

  const gui = new lil.GUI();

  gui.add(config, "mode", {wait:0, run:1, walk:2}).name("action");

}

​

function preload(){

  testGLTF = loadJSON("https://inaridarkfox4231.github.io/resources/soldier_0.gltf");

}

​

function setup() {

  createCanvas(window.innerWidth, window.innerHeight, WEBGL);

  pixelDensity(1);

​

  createGUI();

​

  const result = analyzeGLTF(testGLTF);

  registAnimation(result);

  registBodyTexture(result);

​

  // メッシュ生成

  // soldierの場合は2種類あって、それはobjの引数を変えるだけ

  // jointとweightもそれぞれ設定してある。boneは一緒なので追随して動く。

  _node = new p5wgex.RenderNode(this._renderer.GL);

  const mu = p5wgex.meshUtil;

​

  for(let k=0; k<2; k++){

    const g = mu.create();

    // 仕様変えたんでもう普通にsliceでOKっす

    g.v = result.obj[k].primitives[0].POSITION.data.slice();

    g.n = result.obj[k].primitives[0].NORMAL.data.slice();

    g.f = result.obj[k].primitives[0].indices.data.slice();

    g.uv = result.obj[k].primitives[0].TEXCOORD_0.data.slice(); // 忘れてた

    // jointとweightですね。はぁ...

    g.joint = result.obj[k].primitives[0].JOINTS_0.data.slice();

    g.weight = result.obj[k].primitives[0].WEIGHTS_0.data.slice();

​

    // aJointは変更なし

​

    mu.regist(_node, g, `soldier_${k}`,{otherAttrs:[

      {name:"aWeight", data:g.weight, size:4},

      {name:"aJoint", data:g.joint, size:4}

    ]});

  }

  let maxBoneNum = -Infinity;

  for(const anim of allAnimationDataArray){

    maxBoneNum = Math.max(maxBoneNum, anim.boneNum);

  }

​

  LS = new p5wgex.StandardLightingSystem(_node);

  LS.initialize({useTexCoord:true});

  LS.addAttr("vec4", "aJoint");

  LS.addAttr("vec4", "aWeight");

  LS.addUniform("mat4", `uBoneMatrices[${maxBoneNum}]`, "vs");

  LS.addCode(`

    mat4 skinMat = aWeight.x * uBoneMatrices[int(aJoint.x)];

    skinMat += aWeight.y * uBoneMatrices[int(aJoint.y)];

    skinMat += aWeight.z * uBoneMatrices[int(aJoint.z)];

    skinMat += aWeight.w * uBoneMatrices[int(aJoint.w)];

    position = (vec4(position, 1.0) * skinMat).xyz;

    normal = (vec4(normal, 0.0) * inverse(transpose(skinMat))).xyz;

  `,"preProcess","vs");

  LS.addUniform("sampler2D", "uBodyTexture", "fs");

  LS.addCode(`

    color = texture(uBodyTexture, vTexCoord);

  `,"preProcess","fs");

  LS.registPainter("skinMeshAnimation");

​

  const cam = new p5wgex.PerspectiveCamera({

    w:width,h:height,

    eye:[150, 150, 150], center:[0, 0, 70],

    top:[0,0,1],near:0.1,far:4000});

  const CC = new p5wgex.CameraController(this.canvas,{dblclick:true});

​

  CC.registCamera("cam",cam);LS.setController(CC);

​

  _timer.initialize("clock");

​

  // これでカメラの情報取得すれば楽ちん

  const IR = new foxIA.Inspector(this.canvas,{keydown:true});

  IR.add("keydown", ()=>{

    const v = cam.getView();

    console.log("eye:" + v.eye.toArray());

    console.log("center" + v.center.toArray());

  });

}

​

function registAnimation(result){

  for(let h = 0; h < 4;h++){

    if(h===2)continue;

    // animationごとにjointMatricesArrayを構成する

​

    const frameNum = result.animation[h].transform.frameNum;

    //console.log(FRAME_NUM);

​

    // boneごとに同じibmを使うんで無駄を避けるために以下略

​

    const bones = result.skins[0];

    //console.log(bones);

    const tfData = result.animation[h].transform.data;

    //console.log(tfData);

    const boneNum = bones.length;

​

    // 名称はjointMatricesの配列：jointMatricesArrayとします

    // 各フレームにはjointの個数だけのjointMatrixが入ります

    // aJointの値の変更はしません

​

    const deltaMatricesArray = new Array(frameNum); // 差分tf

    const jointMatricesArray = new Array(frameNum); // 累積*IBM

    for(let i=0; i<frameNum; i++){

      deltaMatricesArray[i] = [];

      jointMatricesArray[i] = [];

    }

​

    // jointMatricesをボーンごとに生成する

    // じゃあ手始めにdeltaMatricesArray作りますね

    for(let i=0; i<boneNum; i++){

      const bone = bones[i];

      const nd = result.nodes[bone.node];

      const tf = tfData[bone.node];

      let _t, _r, _s;

      if(tf === undefined){

        _t = [];

        _r = [];

        _s = [];

      }else{

        _t = tf.translation;

        _r = tf.rotation;

        _s = tf.scale;

      }

      if(_t.length === 0){

        for(let k=0; k<frameNum;k++){

          _t.push(...(nd.translation !== undefined ? nd.translation : [0,0,0]));

        }

      }

      if(_r.length === 0){

        for(let k=0; k<frameNum;k++){

          _r.push(...(nd.rotation !== undefined ? nd.rotation : [0,0,0,1]));

        }

      }

      if(_s.length === 0){

        for(let k=0; k<frameNum;k++){

          _s.push(...(nd.scale !== undefined ? nd.scale : [1,1,1]));

        }

      }

      // あとはスライスしてまとめるだけ

      for(let k=0; k<frameNum; k++){

        deltaMatricesArray[k].push(createTransform({

          t:_t.slice(k*3,(k+1)*3), r:_r.slice(k*4,(k+1)*4), s:_s.slice(k*3,(k+1)*3)

        }));

      }

    }

    //console.log(deltaMatricesArray);

​

    // node -> joint

    const jointMap = new Array(result.nodes.length);

    for(let i=0; i<boneNum; i++){

      jointMap[bones[i].node] = i;

    }

​

    // これを元にあれを作る

    // おそらくibmを起点としてmultで自分、その親、...でいいはず

    // multはそもそもglsl内部で作用する順になるように定めてあるものなので

    // 分かりやすく言うとA.mult(B)はAが作用してからBが作用するんです

    for(let i=0; i<boneNum; i++){

      const bone = bones[i];

      const nd = result.nodes[bone.node];

      // ibmはコピーしないと変化が残ってしまうので注意！！！！

      const ibm = bone.ibm.copy().transpose(); // 最後に掛ける

      for(let k=0; k<frameNum; k++){

        const deltaMatrices = deltaMatricesArray[k];

        // 起点はibmで、deltaMatricesを自分から親に向かって掛けていく

        // soldierは明日に向かって駆けていく

        // うまいこといったつもりか！この！このこの！

        const m = ibm.copy().mult(deltaMatrices[i]);

        let currentNode = nd;

        while(currentNode.parent !== undefined){

          const nextNode = result.nodes[currentNode.parent];

          const jointIndex = jointMap[currentNode.parent];

          if(jointIndex === undefined) break;

          // ここmultMat4じゃなくてmultなの？？（そうだよ）

          // だから最後に掛けるのは大元のdeltaMatrixなんだわ

          m.mult(deltaMatrices[jointIndex]);

          currentNode = nextNode;

        }

        //m.multMat4(ibm);

        jointMatricesArray[k].push(...m.m);

      }

    }

    // つまりイメージ的にはibm掛けて自分掛けて親掛けて...最後に大元を掛けるらしい

    //console.log(jointMatricesArray);

​

    allAnimationDataArray.push({

      frameNum, boneNum, jointMatricesArray

    });

  }

}

​

function registBodyTexture(result){

  // bodyTextureは1番に入ってる

  const img = result.images[1];

  getImgData(img.url).then((res) => {

    _node.registTexture("soldierBody", {src:res});

    textureLoaded = true;

  });

}

​

function draw() {

  _node.clear(0);

  LS.update();

  const {frameNum, jointMatricesArray} = allAnimationDataArray[config.mode];

​

  _node.usePainter("skinMeshAnimation");

  LS.easyLight({color:"white"});

​

  const phaseIndex = _timer.getElapsedDiscrete("clock", 32, frameNum);

  //const phaseIndex = 0;

  _node.setUniform("uBoneMatrices", jointMatricesArray[phaseIndex]);

  if(textureLoaded){

    _node.setTexture("uBodyTexture", "soldierBody");

  }

  for(let k=0; k<2; k++){

    _node.drawFigure(`soldier_${k}`);

    _node.bindIBO(`soldier_${k}IBO`).drawElements("triangles").unbind();

  }

  _node.flush();

}

​

// dataにjsonをぶちこむ

function analyzeGLTF(data){

  const result = {};

​

  result.nodes = data.nodes;

  // nodesの各オブジェクトにparentを設定しましょう

  for(let i=0; i<data.nodes.length; i++){

    const eachNode = data.nodes[i];

    if(eachNode.children === undefined)continue;

    for(const child of eachNode.children){

      data.nodes[child].parent = i;

    }

  }

​

  // とりまobjデータ...

  const arrayBuffers = [];

  for(let i=0; i<data.buffers.length; i++){

    const bin = data.buffers[i].uri.split(',')[1];

    arrayBuffers.push(getArrayBuffer(bin));

  }

  //const bin = data.buffers[0].uri.split(',')[1];

  //const arrayBuffer = getArrayBuffer(bin);

  const objData = getObjData({

    buf:arrayBuffers,

    meshes:data.meshes,

    accessors:data.accessors,

    bufferViews:data.bufferViews

  });

  result.obj = objData;

  if(data.animations !== undefined){

    const animationData = getAnimationData({

      buf:arrayBuffers,

      animations:data.animations,

      accessors:data.accessors,

      bufferViews:data.bufferViews

    });

    result.animation = animationData;

  }

​

  if(data.skins !== undefined){

    const skinsData = getSkinsData({

      buf:arrayBuffers,

      skins:data.skins,

      accessors:data.accessors,

      bufferViews:data.bufferViews

    });

    result.skins = skinsData;

  }

  // transformにはnodeのところにそれが入ってるんで

  // jointsのnode情報からいろいろ割り出せるはず

​

  if(data.images !== undefined){

    const imageData = getImageData({

      buf:arrayBuffers,

      images:data.images,

      bufferViews:data.bufferViews

    });

    result.images = imageData;

  }

​

  return result;

}

​

function getImageData(data){

  const result = [];

  for(const imgInfo of data.images){

    const mime = imgInfo.mimeType;

    const name = imgInfo.name;

    const bufferView = data.bufferViews[imgInfo.bufferView];

​

    // Uint8Arrayとして取得

    const bytes = createArrayData(data.buf[bufferView.buffer], 5121, bufferView.byteOffset, bufferView.byteLength);

    let byteString = "";

    for (let i = 0, len = bytes.byteLength; i < len; i++) {

      byteString += String.fromCharCode(bytes[i]);

    }

    const base64URL = window.btoa(byteString);

    result.push({name, url:`data:${mime};base64,${base64URL}`});

  }

  return result;

}

​

function getSkinsData(data){

  // 若干ここをいじる必要がある

  // skinごとにjointsとibmデータが入ってるわけだが

  // それを16ずつ分割してibmを作る

  // あとnodeでjointsのあれを取得

  // それで以ってskinDataとし

  // skinDataの配列でもってresultとする

​

  const result = [];

  for(const skin of data.skins){

    const skinData = [];

    const skinAccessor = data.accessors[skin.inverseBindMatrices];

    const skinArrayData = getArrayData(

          data.buf, skinAccessor, data.bufferViews[skinAccessor.bufferView]

        );

    for(let i=0; i<skin.joints.length; i++){

      skinData.push({

        ibm:new p5wgex.Mat4(skinArrayData.slice(i*16, (i+1)*16)),

        node:skin.joints[i]

      });

    }

    result.push(skinData);

  }

  return result;

}

​

function getObjData(data){

  // dataは上記のdataのdata.meshesの他に

  // data.accessorsとdata.bufferViewsが入っています

  // 加えて解読済みのarrayBufferが入っています(data.buf)

  const result = [];

  for (const mesh of data.meshes) {

    const resultMesh = {};

    resultMesh.name = mesh.name;

    resultMesh.primitives = [];

    for (const prim of mesh.primitives) {

      const primitive = {};

      const attrs = prim.attributes;

      for (const attrName of Object.keys(attrs)) {

        // POSITION:0, NORMAL:1, TEXCOORD_0:2

        const attrAccessor = data.accessors[attrs[attrName]];

        const attrArrayData = getArrayData(

          data.buf, attrAccessor, data.bufferViews[attrAccessor.bufferView]

        );

        primitive[attrName] = {

          data:attrArrayData, info:getInfo(attrAccessor)

        }

      }

      const indexAccessor = data.accessors[prim.indices];

      const indexArrayData = getArrayData(

        data.buf, indexAccessor, data.bufferViews[indexAccessor.bufferView]

      );

      primitive.indices = {

        data:indexArrayData, info:getInfo(indexAccessor)

      }

      if(prim.targets !== undefined){

        const targetArray = [];

        for(let i=0; i<prim.targets.length; i++){

          const eachTarget = prim.targets[i];

          const targetAccessor = data.accessors[eachTarget.POSITION];

          const targetPositionData = getArrayData(

            data.buf, targetAccessor, data.bufferViews[targetAccessor.bufferView]

          );

          targetArray.push(targetPositionData);

        }

        // 0～13のウェイトごとのデフォルトとの差分が入っているらしいです

        primitive.targetPositionData = targetArray;

      }

      resultMesh.primitives.push(primitive);

      // とりあえずこんなもんで

    }

​

    result.push(resultMesh);

  }

  return result;

}

​

function getAnimationData(data){

  const result = [];

  for (const animation of data.animations) {

    const resultAnimation = {};

    resultAnimation.useWeight = false;

    resultAnimation.name = animation.name;

​

    // samplersの各成分を解読して放り込んで

    // resultAnimation.samplersとする。そのうえで

    // nodesとchannelsからsamplersのどこを参照するか、

    // あるいはnodesのどのメッシュを参照するか決める感じ。

    resultAnimation.data = [];

    // animationは複数存在する場合があるので。ここにぶちこんでいく。

    for(let k=0; k<animation.samplers.length; k++){

      const sampler = animation.samplers[k];

      const channel = animation.channels[k];

      const resultData = {};

​

      const resultSampler = {};

      resultSampler.interpolation = sampler.interpolation; // LINEARなど

      const inputAccessor = data.accessors[sampler.input];

      const outputAccessor = data.accessors[sampler.output];

      const inputArrayData = getArrayData(

        data.buf, inputAccessor, data.bufferViews[inputAccessor.bufferView]

      );

      const outputArrayData = getArrayData(

        data.buf, outputAccessor, data.bufferViews[outputAccessor.bufferView]

      );

      resultSampler.input = {

        data:inputArrayData, info:getInfo(inputAccessor)

      }

      resultSampler.output = {

        data:outputArrayData, info:getInfo(outputAccessor)

      }

​

      resultData.sampler = resultSampler;

      resultData.channel = channel;

      resultData.node = channel.target.node; // nodeが分かんないと不便

      resultData.path = channel.target.path; // pathが分かんないと不便

​

      // weightsの場合はこれ

      if(channel.target.path === "weights"){

        resultAnimation.useWeight = true;

        const animationFrameCount = resultSampler.input.info.count;

        //console.log(animationFrameCount);

        const outputArray = resultSampler.output.data;

        const weightArray = [];

        const weightNum = Math.floor(outputArray.length/animationFrameCount);

​

        for(let i=0; i<outputArray.length; i+=weightNum){

          const eachWeight = new Array(weightNum);

          // スライスでいいじゃんとか言わないの

          for(let k=0; k<weightNum; k++){

            eachWeight[k] = outputArray[i+k];

          }

          weightArray.push(eachWeight);

        }

        resultData.weights = weightArray;

      }

      // で、translation,rotate,scaleの場合、は...

      // minとmaxを24倍～roundで整数

      // それと別にoutputをそのまま格納すればよいかと

      // たとえばminとmaxが0と30なら[*,*,*,*,*,*,*,*](rotation case)

      // でいい。後で何とかする。対象がboneかmeshかは...どうしようね

      // 対象となるnodeがmeshを持ってるかどうかだと思う。持ってなければbone

      // もっともboneとmesh以外に作用する対象がないことを想定してるけど

      // 今はそれ以外は必要ないでしょう。

      resultAnimation.data.push(resultData);

    }

    if(!resultAnimation.useWeight){

      // weightでない場合にある程度扱いやすくする必要がある

      // フレームを正規化して0～MAX-1としs,r,tそれぞれ配列とする

      // まずscaleで[[],[],...] nodeで？jointと同じでnodeの番号に入れちゃえ

      // たとえばCubeActionの場合は同じとこに全部入る

      // weightとshapeKeyが併用されてる場合でもboneが優先して並ぶので問題ない

      const transformData = [];

      let maxFrame = -Infinity;

      for(const data of resultAnimation.data){

        if(transformData[data.node] === undefined){

          transformData[data.node] = {scale:[], rotation:[], translation:[]};

        }

        maxFrame = Math.max(maxFrame, Math.round(24*data.sampler.input.info.max[0]));

      }

      for(const data of resultAnimation.data){

        const normalizedArray = [];

        const inputArray = data.sampler.input.data;

        const outputArray = data.sampler.output.data;

        let dataSize = 1;

        switch(data.path){

          case "scale": dataSize = 3; break;

          case "rotation": dataSize = 4; break;

          case "translation": dataSize = 3; break;

        }

        const minIndex = Math.round(24*inputArray[0]);

        const maxIndex = Math.round(24*inputArray[inputArray.length-1]);

        for(let i=0; i<=maxFrame; i++){

          // ここでclamp処理

          if(i < minIndex){

            normalizedArray.push(...outputArray.slice(0, dataSize));

            continue;

          }

          if(i > maxIndex){

            normalizedArray.push(...outputArray.slice(-dataSize, outputArray.length));

            continue;

          }

          // それ以外の場合

          // 面倒だったんですがまあこれでいいかなと

          // ratioを出して長さ-1を掛ければ必然的に0～長さ-1にはなる

          const properIndex = Math.floor(((i-minIndex)/(maxIndex-minIndex))*(inputArray.length-1)); // これでいいっしょ

          normalizedArray.push(...outputArray.slice(properIndex*dataSize, (properIndex+1)*dataSize));

        }

        transformData[data.node][data.path] = normalizedArray;

      }

      // ここで行列を作るのはOKだと思う

      // skinAnimationの枠組みで処理できるんで

      // で、nodeのメタデータが要る

      // nodesをさらってpathがある場合に

      // こっちにはpathが無いなら

      // maxFrame+1の数だけそれを用意する

      // たとえばtranslationがないならそれを追加する

      // ここでtransformDataからframeNum個の行列の配列を作り、

      // 計算しやすくしたいところ

      for(const tf of transformData){

        if(tf === undefined) continue;

        const modelMatArray = [];

        const normalMatArray = [];

        for(let k=0; k<maxFrame+1; k++){

          const _s = (tf.scale.length === 0 ? [1,1,1] : tf.scale.slice(3*k,3*(k+1)));

          const _r = (tf.rotation.length === 0 ? [0,0,0,1] : tf.rotation.slice(4*k,4*(k+1)));

          const _t = (tf.translation.length === 0 ? [0,0,0] : tf.translation.slice(3*k,3*(k+1)));

          const tfMat = createTransform({s:_s, r:_r, t:_t});

          // modelMatの方は.mを付けて配列にする

          // normalMatはもう配列になってる

​

          modelMatArray.push(tfMat.m);

          normalMatArray.push(p5wgex.getInverseTranspose3x3(tfMat.getMat3()));

        }

        tf.modelMats = modelMatArray;

        tf.normalMats = normalMatArray;

      }

      resultAnimation.transform = {

        data:transformData, frameNum: maxFrame+1

      }

    }

​

    result.push(resultAnimation);

  }

  return result;

}

​

function getArrayBuffer(bin){

  const byteString = atob(bin);

  const byteStringLength = byteString.length;

  const arrayBuffer = new ArrayBuffer(byteStringLength);

​

  // このプロセスを挟むとうまくいく？

  // 今朝はうまくいってなかったけど。おかしいね。

  var intArray = new Uint8Array(arrayBuffer);

  for (var i = 0; i < byteStringLength; i++) {

    intArray[i] = byteString.charCodeAt(i);

  }

​

  return arrayBuffer;

}

​

// arrayOutputがfalseの場合はそのまま出力されるけども。

// まあjsのarrayのが便利やろ

function getArrayData(buf, accessor, bufferView, arrayOutput = true){

  // それぞれのデータを取得する感じのあれ

  const componentType = accessor.componentType;

  //const _count = accessor.count;  // 24とか30

  const _type = accessor.type;  // "VEC3"とか"SCALAR"

  let _size;

  switch(componentType) {

    case 5126: _size = 4; break;

    case 5123: _size = 2; break;

    case 5121: _size = 1; break; // 追加(boneのJOINTが5121)

  }

  //const bufferView = data.bufferViews[accessor.bufferView];

  //const bufferIndex = bufferView.buffer;

  const byteOffset = bufferView.byteOffset;

  const byteLength = bufferView.byteLength;

  const arrayLength = byteLength / _size;

​

  const resultArray = createArrayData(buf[bufferView.buffer], componentType, byteOffset, arrayLength);

​

  if(arrayOutput){

    const outputArray = new Array(resultArray.length);

    for(let i=0; i<outputArray.length; i++){

      outputArray[i] = resultArray[i];

    }

    return outputArray;

  }

  return resultArray;

}

​

function createArrayData(buf, componentType, byteOffset, arrayLength) {

  switch(componentType) {

    case 5126:

      const f32Array = new Float32Array(buf, byteOffset, arrayLength);

      return f32Array;

    case 5123:

      const i16Array = new Uint16Array(buf, byteOffset, arrayLength);

      return i16Array;

    case 5121: // 追加

      const u8Array = new Uint8Array(buf, byteOffset, arrayLength);

      return u8Array;

  }

  return [];

}

​

function getComponentType(code){

  switch(code){

    case 5126: return "float32";

    case 5123: return "uint16";

    case 5121: return "uint8"; // 追加

  }

  return "";

}

​

// accessorそのままでもいいと思う

// 適宜内容変更して

function getInfo(accessor){

  const result = {

    type:accessor.type,

    count:accessor.count,

    componentType:getComponentType(accessor.componentType)

  }

  if (accessor.max !== undefined) { result.max = accessor.max; }

  if (accessor.min !== undefined) { result.min = accessor.min; }

  return result;

}

​

// gltfをJSONとして取得

async function getJSONData(url){

  //const url = "https://inaridarkfox4231.github.io/resources/MyDog.json";

  try{

    const response = await fetch(url);

    if(!response.ok){

      throw new Error(`status:${response.status}`);

    }

    const json = response.json();

    return json;

  }catch(error){

    console.error(error.message);

  }

}

​

function loadingResources(){

  if(resourcesAreLoaded) return;

  resourcesAreLoaded = true;

​

  const url = "https://inaridarkfox4231.github.io/resources/Flamingo.gltf";

​

  getJSONData(url).then((result) => {

    // resultはJSONオブジェクト。

    console.log(result);

    // ここでいろいろ処理する

  });

}

​

function createTransform(tf={}){

  const s = createMatFromScale(tf.s);

  const r = createMatFromRotation(tf.r);

  const t = createMatFromTranslate(tf.t);

  // 逆みたいです。t,r,s.で、全部転置です...

  // ああそういえば列orderだったわ。

  // でもまあ

  // sやってrやってtやるわけだから

  // multでいいじゃん。

  // そういう風に決めたんだよ。a.mult(b):aやってbやる。

  return s.mult(r).mult(t);

  //return t.multMat4(r).multMat4(s);

}

​

// 要するにこれらをまとめるってことかしら

// んー

// まずはあれですね

// ボーンごとに情報をまとめないと

function createMatFromScale(q){

  let x,y,z;

  if(typeof q === 'number'){

    const args = arguments;

    x = args[0] || 1;

    y = args[1] || 1;

    z = args[2] || 1;

  }else if(Array.isArray(q)){

    x = q[0] || 1;

    y = q[1] || 1;

    z = q[2] || 1;

  }else{

    x = q.x || 1;

    y = q.y || 1;

    z = q.z || 1;

  }

  return new p5wgex.Mat4(

    x, 0, 0, 0,

    0, y, 0, 0,

    0, 0, z, 0,

    0, 0, 0, 1

  );

}

​

function createMatFromRotation(q){

  // まあそうね

  // あれをそのまま、でいいよ。とりあえず。

​

  let x,y,z,w;

  if(typeof q === 'number'){

    const args = arguments;

    x = args[0] || 0;

    y = args[1] || 0;

    z = args[2] || 0;

    w = args[3] || 1;

  }else if(Array.isArray(q)){

    x = q[0] || 0;

    y = q[1] || 0;

    z = q[2] || 0;

    w = q[3] || 1;

  }else{

    x = q.x || 0;

    y = q.y || 0;

    z = q.z || 0;

    w = q.w || 1;

  }

​

  return new p5wgex.Mat4(

    w*w+x*x-y*y-z*z, 2.0*(x*y-z*w), 2.0*(x*z+y*w), 0.0,

    2.0*(x*y+z*w), w*w+y*y-x*x-z*z, 2.0*(y*z-x*w), 0.0,

    2.0*(x*z-y*w), 2.0*(y*z+x*w), w*w+z*z-x*x-y*y, 0.0,

    0, 0, 0, 1

  );

}

​

function createMatFromTranslate(q){

  let x,y,z;

  if(typeof q === 'number'){

    const args = arguments;

    x = args[0] || 0;

    y = args[1] || 0;

    z = args[2] || 0;

  }else if(Array.isArray(q)){

    x = q[0] || 0;

    y = q[1] || 0;

    z = q[2] || 0;

  }else{

    x = q.x || 0;

    y = q.y || 0;

    z = q.z || 0;

  }

  return new p5wgex.Mat4(

    1, 0, 0, x,

    0, 1, 0, y,

    0, 0, 1, z,

    0, 0, 0, 1

  );

}

​

// utility.

// これでいいようです

async function getImgData(url){

  //const url = "https://inaridarkfox4231.github.io/resources/ninetales.png";

  try{

    const response = await fetch(url);

    if(!response.ok){

      throw new Error(`レスポンスステータス: ${response.status}`);

    }

    const blob = await response.blob();

    const dlurl = URL.createObjectURL(blob)

    const img = new Image();

    img.src = dlurl;

    await img.decode(); // HTMLImageElementなのでdecode()

    return img;

  }catch(error){

    console.error(error.message);

  }  

}