Three.js와 셰이더 ~ 실제로 그려 보자 ~
적당히 카메라와 장면과 조명을 준비하여 삼각형의 다각형을 그려보고 싶습니다.
카메라라든지 씬의 준비는 할애해 지오미트리와 머티리얼을 준비하는 곳만이 됩니다.
우선은 지오미토리의 준비.
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를 어쩐지 건네주고 있습니다만 이번은 사용하고 있지 않습니다(그 중 시간 변화라든지를 시키려고 생각하고 있습니다.)
이번에는 특별한 처리는 하지 않고, 색을 녹색으로 하는 처리만 하고 있습니다.
할 수있는 것
예상대로 결과입니다. 기초는 이것으로 어떻게든 확인할 수 있었으므로 다음은 시간으로 외형을 바꾸거나 좌표에 의한 그라데이션을 시험하고 싶습니다.
Reference
이 문제에 관하여(Three.js와 셰이더 ~ 실제로 그려 보자 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mosamosa/items/c5bdae37e7fcd5feac53
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Three.js와 셰이더 ~ 실제로 그려 보자 ~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mosamosa/items/c5bdae37e7fcd5feac53텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)