additional attr (fill)

// attributeの追加（fillShader編）

// 見に来る人がいるかどうかわかりませんが、いると困るので

// 簡潔にやり方について説明しておきます。

​

// fillShaderはp5jsの生コードからコピペしてきたものをちょっといじった

// ものですが、要はpとaNormalとcolを適当にいじれば何でもできる感じですね。

// そこは本質ではないので割愛して・・

​

// 追加したいattributeをシェーダー内に

// attribute vec3 aMyAttr;

// といった形で指定します。で、これに相当するp5.RenderBufferというクラス

// を新たに作成して、p5jsのrenderer, これはWEBGLのcreateCanvasで得られる

// レンダラーということですが、そのretainedModeのbuffersのfillのところ、

// ここが配列になってるんですけど、ここに入れます。

// _gl.retainedMode.buffers.fill.push(new p5.RenderBuffer(ほにゃらら));

// って感じで。この辺は生コードを当たるとわかりやすいはず・・

// 次に引数ですが、最初の数字は大きさというかストライドですね、float

// なら1でvec2, vec3, vec4なら2, 3, 4みたいなのを入れます。mat2,mat3,mat4

// なら4, 9, 16になります。floatの個数ですね。次の文字列はジオメトリで

// 用意する配列の名前です。その次は、これはバッファの居場所を識別する

// ための文字列なので使うことはないのですがかぶるとまずいです。かぶらない

// ようにしてください。その次の文字列はattribute変数としての変数名

// （シェーダー内での宣言）と同じものを入れます。最後は_gl,レンダラー

// ですね。

// 次に、ジオメトリーの構成において、さっき配列の名前として用いた

// 文字列で、たとえばmyAttrとすると、

// geom.myAttr = [];

// のように空の配列を用意します。ここにたとえばfloatなら頂点と対応

// するように1つずつ、vec4なら4つずつ、

// geom.myAttr.push(a, b, c, d);

// みたいにして放り込んでいきます。で・・

// そうするとシェーダー内でたとえばこの場合、対応する頂点のaMyAttrが

// vec4(a, b, c, d)の形で使えるようになるわけ。以上です・・割と、

// 簡単ですね。

​

// 注意。attributeの宣言できる最大数は処理系にもよりますが基本16まで

// だそうです。宣言というか、実際にバッファとバインドできる個数の最大値

// ですね（宣言するだけならいくらでもOK）。カウントの仕方はfloat,vec2,

// vec3,vec4すべて「1」扱いです。なのでfloatが3つよりvec3が1つの方が

// 節約になります。また、mat2は2で、mat3は3,mat4は4として扱われます。

​

// 応用？

// さあ・・今のままでも表現するには事足りているように感じるけど・・

// 誰かがうまい活用方法を思いつくといいですね。

// 2024-11-22

// Hello! 過去の自分

// ...

// 1.11.1です。目を覚ませ。

​

let properFrameCount = 0;

​

let gl;

​

let myFillShader;

​

let vsFill =

"precision mediump float;" +

"precision mediump int;" +

​

"uniform mat4 uViewMatrix;" +

​

"uniform bool uUseLighting;" +

​

"uniform int uAmbientLightCount;" +

"uniform vec3 uAmbientColor[5];" +

​

"uniform int uDirectionalLightCount;" +

"uniform vec3 uLightingDirection[5];" +

"uniform vec3 uDirectionalDiffuseColors[5];" +

"uniform vec3 uDirectionalSpecularColors[5];" +

​

"const float specularFactor = 2.0;" +

"const float diffuseFactor = 0.73;" +

​

"struct LightResult{" +

"  float specular;" +

"  float diffuse;" +

"};" +

​

"float _lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal){" +

// ここですね。法線ベクトルとライトベクトルで内積を取ってるのは。

"  return max(0.0, dot(-lightDirection, surfaceNormal));" +

"}" +

​

"LightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector){" +

"  vec3 lightDir = normalize(lightVector);" +

//compute our diffuse & specular terms

"  LightResult lr;" +

"  lr.diffuse = _lambertDiffuse(lightDir, normal);" +

"  return lr;" +

"}" +

​

"void totalLight(vec3 modelPosition, vec3 normal, out vec3 totalDiffuse, out vec3 totalSpecular){" +

// Diffuseのデフォは1.0でSpecularのデフォは0.0です。まあ当然よね。

"  totalSpecular = vec3(0.0);" +

"  if(!uUseLighting){" +

"    totalDiffuse = vec3(1.0);" +

"    return;" +

"  }" +

// ライティング使ってるならDiffuseをいちから計算する

"  totalDiffuse = vec3(0.0);" +

"  vec3 viewDirection = normalize(-modelPosition);" +

// これ以降の処理は定められたライトに対してのみ行なわれる感じね

​

"  for(int j = 0; j < 5; j++){" +

"    if(j < uDirectionalLightCount){" +

"      vec3 lightVector = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;" +

"      vec3 lightColor = uDirectionalDiffuseColors[j];" +

"      vec3 specularColor = uDirectionalSpecularColors[j];" +

"      LightResult result = _light(viewDirection, normal, lightVector);" +

"      totalDiffuse += result.diffuse * lightColor;" +

"      totalSpecular += result.specular * lightColor * specularColor;" +

"    }" +

"  }" +

"}" +

​

// こっから下が追加部分

// ライティング適用するならほんとはこういうの書かないといけなかったのよね

// ディレクショナルオンリーにして余計な部分省いてもいいけど

// アンビエント追加

​

// include lighting.glgl

​

"attribute vec3 aPosition;" +

"attribute vec3 aNormal;" +

"attribute vec2 aTexCoord;" +

"attribute vec4 aMaterialColor;" +

"attribute vec4 aMyAttr1;" +

"attribute vec4 aMyAttr2;" +

​

"uniform mat4 uModelViewMatrix;" +

"uniform mat4 uProjectionMatrix;" +

"uniform mat3 uNormalMatrix;" +

​

"varying highp vec2 vVertTexCoord;" +

"varying vec3 vDiffuseColor;" +

"varying vec3 vSpecularColor;" +

"varying vec4 vVertexColor;" +

"varying vec4 vMyAttr1;" +

"varying vec4 vMyAttr2;" +

​

"void main(void){" +

  // 位置の変更はここでpのところをいじる

"  vec3 p = aPosition;" +

"  vMyAttr1 = aMyAttr1;" +

"  vMyAttr2 = aMyAttr2;" +

//"  float xxx = (aMyAttr1.z + aMyAttr4.z)*0.1;" +

//"  p += vec3(aMyAttr1.x, aMyAttr1.y, 0.0);" +

"  vec4 viewModelPosition = uModelViewMatrix * vec4(p, 1.0);" +

"  gl_Position = uProjectionMatrix * viewModelPosition;" +

​

"  vec3 vertexNormal = normalize(uNormalMatrix * aNormal);" +

"  vVertTexCoord = aTexCoord;" +

"  vVertexColor = aMaterialColor;" +

​

// totalLight

// ここでvDiffuseColorとvSpecularColorに色情報をぶち込んでる

// それらはここでは使われずvarying経由でlightTextureに送られて参照され色が決まる

"  totalLight(viewModelPosition.xyz, vertexNormal, vDiffuseColor, vSpecularColor);" +

"  for(int i = 0; i < 5; i++){" +

"    if (i < uAmbientLightCount){" +

"      vDiffuseColor += uAmbientColor[i];" +

"    }" +

"  }" +

"}";

​

// 若干変更しました

// tintは使いたかったら0～1で今まで通り指定して掛けたかったら掛けてね

// テクスチャで色変えたかったらvVertTexCoordに入ってるから

// 自由に加工して使ってね

// 以上

​

let fsFill =

"precision mediump float;" +

​

"uniform vec4 uMaterialColor;" +

"uniform vec4 uTint;" +

"uniform sampler2D uSampler;" +

"uniform bool isTexture;" +

"uniform bool uEmissive;" +

​

"uniform int uPatternId;" +

​

"varying highp vec2 vVertTexCoord;" +

"varying vec3 vDiffuseColor;" +

"varying vec3 vSpecularColor;" +

"varying vec4 vVertexColor;" +

"varying vec4 vMyAttr1;" +

"varying vec4 vMyAttr2;" +

// getRGB,参上！

"vec3 getRGB(float h, float s, float b){" +

"    vec3 c = vec3(h, s, b);" +

"    vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);" +

"    rgb = rgb * rgb * (3.0 - 2.0 * rgb);" +

"    return c.z * mix(vec3(1.0), rgb, c.y);" +

"}" +

​

"void main(void) {" +

"  vec4 col = vVertexColor;" +

"  if(uPatternId == 0){" +

"    col = vMyAttr1;" +

"  }else if(uPatternId == 1){" +

"    col = vMyAttr2;" +

"  }else if(uPatternId == 2){" +

"    col = 0.5 * (vMyAttr1 + vMyAttr2);" +

"  }" +

"  col.rgb = col.rgb * vDiffuseColor + vSpecularColor;" +

"  gl_FragColor = col;" +

"}";

​

let bg, bgImage;

​

function setup(){

  let _gl = createCanvas(600, 600, WEBGL);

  pixelDensity(1);

  gl = _gl.GL;

  myFillShader = createShader(vsFill, fsFill);

​

  gl.enable(gl.DEPTH_TEST);

  gl.enable(gl.CULL_FACE);

​

  bg = createGraphics(600, 600);

  bgImage = createGraphics(600, 600);

  bgImage.noStroke();

  bgImage.colorMode(HSB, 100);

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

    bgImage.fill(55 + i/10, 100 - i/2, 100);

    bgImage.rect(0, i * 3, 600, 3);

  }

  bg.fill(0);

  bg.textSize(20);

  bg.image(bgImage, 0, 0);

​

  // じゃあベクトル4

  _gl.retainedMode.buffers.fill.push(new p5.RenderBuffer(4, "myAttr1", "myAttr1dst", "aMyAttr1", _gl));

  // 第3引数はバッファの場所を示すのでかぶらないように指定しましょう

  _gl.retainedMode.buffers.fill.push(new p5.RenderBuffer(4, "myAttr2", "myAttr2dst", "aMyAttr2", _gl));

​

}

​

function draw() {

  const patternId = Math.floor((frameCount % 360) / 120);

  clear();

  // 背景設定の仕方

  // まずresetShaderしてshaderをデフォルトにする

  resetShader();

  // 斜め線が入らないようにnoStroke指定

  noStroke();

  // DEPTH_TESTをなくしておく(disableだよ！enableじゃないよ！)

  // これによりすべてのオブジェクトはこれの前に描画される。

  // またrotate処理の前に描画することで回転を防ぐ（一緒に回っちゃう）

  gl.disable(gl.DEPTH_TEST);

  // どうもFRONTにしないといけないようで・・

  gl.cullFace(gl.FRONT);

  // textureを使ってplaneを表示すると背景設定完了になる

  // bgを2Dにして毎フレーム更新で2DTextでinfo表示したりもできる

  texture(bg);

  plane(600, 600);

  // ライト、回転などの処理。

  // directionalLightは回転前のオブジェクトに対して設定しておくと

  // オブジェクトを回転させたとき自動的に追随する

  // 逆に回転してから設定すると回転したオブジェクトに対して

  // そのベクトルで光が当たる

  directionalLight(255, 255, 255, 0, 0, 1);

  directionalLight(255, 255 ,255, 0, 0, -1);

  ambientLight(64);

  rotateX(properFrameCount * PI / 120);

  // メイン描画

  // resetShaderしたうえで独自のshaderを読み込ませる

  resetShader();

  // DEPTH_TESTを戻しておく

  gl.enable(gl.DEPTH_TEST);

  shader(myFillShader);

  myFillShader.setUniform("uPatternId", patternId);

  // fillしますよ、strokeは致しませんよ、という意思表示

  fill(255);

  noStroke();

  // 裏表をきちんと描画するならcullFaceでBACKとFRONTの切り替えをする

  gl.cullFace(gl.BACK);

  // 表面が白くなる

  //fill(255);

  myRect(300, 180, 10, 6);

  gl.cullFace(gl.FRONT);

  // 裏面がオレンジになる

  //fill(255,128,0);

  myRect(300, 180, 10, 6);

  gl.cullFace(gl.BACK); // BACKに戻さないとLineが消えてしまうのね・・

  // ちゃんと戻しておかないと、strokeShaderで曲線の描画もしたい、

  // というときに描画がなされないらしい

  // strokeとpointまでしか扱わないならこの手の処理は不要。

  properFrameCount++;

  bg.image(bgImage, 0, 0);

  bg.textAlign(LEFT, TOP);

  bg.textAlign(CENTER, CENTER);

  const _txt = ["vMyAttr1 only", "vMyAttr2 only", "0.5 * (vMyAttr1 + vMyAttr2)"];

  bg.text(_txt[patternId], 300, 100);

}

​

// 簡単なモデルについて

​

// 平面

function myRect(sizeX, sizeY, detailX, detailY){

  const gId = `myPlane|${detailX}|${detailY}`; // ジオメトリーネーム

  if(!this._renderer.geometryInHash(gId)){

    // gIdの名がついたオブジェクトが存在しなければ構成。

    // つまりこの処理はdetailごとに1回だけ実行されるというわけ。

    // ジオメトリーを用意

    const geom = new p5.Geometry();

    geom.myAttr1 = [];

    geom.myAttr2 = [];

    // ベクトルを一つ用意し変数を変えてコピーして使い回す

    let v = new p5.Vector();

    let index = 0;

    // indexは重要。今回は長方形なので、4 x detailX x detailY個の

    // 頂点を使う。で、面はそれを用いてインデックスで指定する。

    // x1,x2,y1,y2で4つ。

    // どう指定するかというと、こっちから見て描画されるためには、

    // 上から見て反時計回りにする。

    // インデックスの指定の仕方が左上、左下、右上、右下になってるので、

    // 左上、左下、右上でひとつ、右上、左下、右下でひとつ

    // 三角形を指定すればOK.

    // 立体の場合も表面に対して同じように面の頂点の

    // インデックスを指定すればいい。

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

      for(let j = 0; j < detailY; j++){

        const x1 = -0.5 + i / detailX;

        const y1 = -0.5 + j / detailY;

        const x2 = -0.5 + (i+1) / detailX;

        const y2 = -0.5 + (j+1) / detailY;

        // 4つの頂点を(x1,y1),(x1,y2),(x2,y1),(x2,y2)の順に格納

        geom.vertices.push(v.set(x1, y1, 0).copy());

        geom.vertices.push(v.set(x1, y2, 0).copy());

        geom.vertices.push(v.set(x2, y1, 0).copy());

        geom.vertices.push(v.set(x2, y2, 0).copy());

        geom.vertexColors.push(i / detailX, j / detailY, 1.0, 1.0);

        geom.vertexColors.push(i / detailX, j / detailY, 1.0, 1.0);

        geom.vertexColors.push(i / detailX, j / detailY, 1.0, 1.0);

        geom.vertexColors.push(i / detailX, j / detailY, 1.0, 1.0);

​

        geom.myAttr1.push(1.0, i / detailX, j / detailY, 1.0);

        geom.myAttr1.push(1.0, i / detailX, j / detailY, 1.0);

        geom.myAttr1.push(1.0, i / detailX, j / detailY, 1.0);

        geom.myAttr1.push(1.0, i / detailX, j / detailY, 1.0);

        geom.myAttr2.push(i / detailX, 1.0, j / detailY, 1.0);

        geom.myAttr2.push(i / detailX, 1.0, j / detailY, 1.0);

        geom.myAttr2.push(i / detailX, 1.0, j / detailY, 1.0);

        geom.myAttr2.push(i / detailX, 1.0, j / detailY, 1.0);

​

        // 面情報を入れる

        geom.faces.push([index, index + 1, index + 2]);

        geom.faces.push([index + 2, index + 1, index + 3]);

        // インデックスを増やし忘れないように・・

        index += 4;

      }

    }

    // 法線・辺計算は自動的に行なってくれる

    geom._makeTriangleEdges()._edgesToVertices();

    geom.computeNormals();

    // 描画用のバッファを確保する。あんまり大きすぎると

    // バグるので、点の描画などで大きすぎる場合は分割するといいかも。

    this._renderer.createBuffers(gId, geom);

  }

  // 基本スケールを固定したうえでスケール変換して描画するのが基本。

  this._renderer.drawBuffersScaled(gId, sizeX, sizeY, 1);

}