Three.js와 셰이더 ~ 실제로 그려 보자 ~

4697 단어 three.jsWebGL
문서를 읽고 어쩐지 분위기를 알고 왔으므로 실제로 그려 보려고 생각합니다.

적당히 카메라와 장면과 조명을 준비하여 삼각형의 다각형을 그려보고 싶습니다.
카메라라든지 씬의 준비는 할애해 지오미트리와 머티리얼을 준비하는 곳만이 됩니다.

우선은 지오미토리의 준비.
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를 어쩐지 건네주고 있습니다만 이번은 사용하고 있지 않습니다(그 중 시간 변화라든지를 시키려고 생각하고 있습니다.)
이번에는 특별한 처리는 하지 않고, 색을 녹색으로 하는 처리만 하고 있습니다.

할 수있는 것





예상대로 결과입니다. 기초는 이것으로 어떻게든 확인할 수 있었으므로 다음은 시간으로 외형을 바꾸거나 좌표에 의한 그라데이션을 시험하고 싶습니다.

좋은 웹페이지 즐겨찾기