Three.jsとシェーダー　〜実際に描画してみる〜

4723 ワード
three.js WebGL WebGL テキストリンク

ドキュメントを読んでなんとなく雰囲気がわかってきたので実際に描画してみようと思います。

適当にカメラとシーンとライトを用意して、三角形のポリゴンを描画してみたいと思います。
カメラとかシーンの準備は割愛してジオミトリとマテリアルを用意するところだけになります。

まずはジオミトリの準備。

function geo(){
 let g = new THREE.BufferGeometry();
 let vert = new Float32Array([
    1.0,0.0,0.0,
    0.0,1.0,0.0,
    0.0,0.0,1.0 
 ])
 g.addAttribute('position',new THREE.BufferAttribute(vert,3))
 return g;
}

関数化してあるのはいじるときに見やすくしやすかったからです。
自作シェーダーを使うためにはBufferGeometryを使用することになります。
また、BufferGeometryにattribute(頂点ごとに異なった値を持つデータ)を追加するときにはaddAttributeメソッドを使う必要が出てくるので使用しています。

次にShaderの方です。

let shade_par={
    uniforms:{
        "time":{value:1.0}
    },
    vertexShader:[
        "precision mediump float;",
        "void main(){",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"

    ].join("\n"),
    fragmentShader:[
        "precision mediump float;",
        "void main(){",
        "gl_FragColor = vec4(0.0,1.0,0.0,1.0);",
        "}"

    ].join("\n"),
    side: THREE.DoubleSide,
    transparent: true
}

uniformsにtimeをなんとなく渡していますが今回は使っていません(そのうち時間変化とかをさせようと思っています。)
今回は特に処理はせず、色を緑にする処理だけしています。

できたもの

予想通りの結果です。基礎はこれでなんとか確認できたので次は時間で見た目を変えたり座標によるグラデーションを試したりしたいと思います。