three.js GPGPU - glsl shader 사용하기

GPUComputationRenderer 사용해보기

 

Threejs 에서 GPGPU 사용 01

 

위 포스팅을 참고해서 GPGPU를 테스트해보도록 하자.

 

현재 이렇게 mesh를 렌더링한 상태에서 mesh points로 바꿔본다.

 

const cube = new THREE.Points(
  new THREE.PlaneGeometry(2, 2, 128, 128),
  new THREE.PointsMaterial({color:'red', size: 1})
)
scene.add(cube)

이렇게 mesh를 points로 material을 points material로 바꾸었는데,

 

point로 렌더링이 되지는 않는다.

하지만 그렇다고 mesh plane도 아니다. 

뭔가 입체적이다. 

 

const cube = new THREE.Points(
  new THREE.PlaneGeometry(2, 2, 128, 128),
  new THREE.PointsMaterial({color:'red', size: 0.01})
)
scene.add(cube)

사이즈를 100배 줄여보니 

 

이제서야 점으로 나온다. 

 

이걸 하나하나 조정하려면 material을 shader를 사용해서 변경해야한다.

 

shader 파일 작성하기 

//vertexshader
void main()
{
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;
}

//fragmentshader
void main()
{
    gl_FragColor = vec4(1.0,1.0,1.0,1.0);
}

shader에 대해서는 파이프라인 구조를 어느정도 알고 있어야한다.

vertex와 fragment(pixel) shader를 만든다. 

 

Typescript glsl 파일 import 

 

Typescript glsl 파일 import 하기

 

vite typescript 에서 glsl 컴파일 에러 해결하기

 

위 두 포스팅을 통해서 typescript cannot find module 문제와

glsl 컴파일 문제를 해결하자.