three.js GPGPU SPH - three.js GLSL shader version

 

GLSL RWStructuredBuffer

HLSL의 여러 문법이 생각보다 GLSL과 많이 다르다.

 

#version 450

struct Particle{
    float pressure;
    float density;
    vec3 currentForce;
    vec3 velocity;
    vec3 position;
}

float particleMass;
float viscosity;
float gasConstant;
float restDensity;
float boundDamping;
float radius;
float radius2;
float radius3;
float radius4;
float radius5;
float pi;
int particleLength;
float timestep;
vec3 boxSize;

layout(std430, binding = 0) buffer ParticleBuffer {
    Particle particles[];
};

void main() {
    vec2 vUv = gl_FragCoord.xy / resolution.xy;
    vec2 position = texture2D( textureData, vUv ).xy;
    
    position.x += 0.001;
    particles[index]
    
    gl_FragColor = vec4( position, 0.0, 1.0);
}

CPU에서 구조체 배열을 가져오기 위해 RWStructureBuffer를 사용하는 대신에 

GLSL에서는 shader storage buffer object (SSBO)를 사용한다. 

 

Integrate 함수

여기서 compute shader에서 thread를 분리하여 사용하기 위해

numthreads 대신 layout in을 지정한다. 

 

hlsl에서 SV_DISPATCHTHREADID는 

glsl에서 gl_GlobalInvocationID로 대체된다.

 

webgl glsl

일반적인 glsl과는 달리 webgl의 glsl은 전역변수도 선언하지 못하고 버전 명시 등

opengl의 glsl과는 다르게 사용되는 것이 여러가지 있는 것 같다. 

 

또한 webgl에서는 SSBO도 지원하지 않는다고 하니...

이것도 막막하다. 

 

webgl에서 std430도 buffer도 지원하지 않고, 

외부 CPU와의 데이터 상호작용은 모두 texture형태로 주고 받아야하는 것 같다.

 

WebGL GLSL 코드로 수정하기 

여기서는 glsl의 in이나 out 명령어도 사용하지 못한다.

webGL 1.0이라서 여태 공부했던 glsl에 지원하지 않는 기능이 많다.

 

input 변수의 경우 기본적으로 gl_FragCoord (addVariable이나 uniform으로 추가 가능.)

output 변수의 경우 오직 gl_FragColor

이 두 가지만을 사용하는 것 같다.

 

three.js glsl version

three.js에서 glsl 버전을 몇을 사용하나 보니 

 

어... 설마 GLSL3로 변경할 수 있는건가? 

shader material의 경우 설명인데, 이건 webgl 2.0일 때 glsl3을 지원하는 것이다.

 

그럼 GPGPU를 사용하는 GPU computation renderer에서 webgl 버전을 변경할 수 있을까. 

 

const renderer = new THREE.WebGLRenderer({
  context: canvas.getContext('webgl2')  // WebGL 2.0 컨텍스트 사용
});

webgl context를 2.0으로 변경하면 glsl 3 버전을 쓸 수 있다고는 하지만, context를 변경해도

glsl 3 버전의 구문에서 에러가 생긴다.

 

아쉽게도 version 명시를 한다고 해도

이미 내가 작성한 shader 코드 위에 기존에 작성되어있는 shader 코드들이 자동으로 들어가는 상태이다.

 

하는 수 없이 glsl 1.0을 사용해서 구현해보도록 해야겠다...