WebGL에서 조에트로프를하고 싶었습니다.

전치

WebGL Advent Calendar 12 일입니다.

이전에는 착시의 일종인 슬릿 애니메이션을 WebGL과 레이마칭으로 구현한 적이 있었습니다.

참고 : 3D 같지만 2D 하지만 역시 잘 보면 3D 뭐든지 역시 2D 뭐든지 잘 생각해 보면 이것이 GLSL 사용한 레이마칭이지? - Qiita

뭐 일종의 놀이로 실장한 느낌이었습니다만, 생각 외에 잘 움직이고, 자신이 제일 놀랐습니다.

이번에도, 착시의 재료로 무엇인가 할 수 없을까라고 생각해 재료를 생각해 보았습니다만…

여러가지 생각해 결국, 조에트로프를 WebGL 로 실장해 보면 어떤 결과가 되는 것일까라는 것이 전전부터 신경이 쓰여 있었으므로, 시험해 보았습니다.

뭐 시간이 별로 없고, 슛으로 만든 느낌으로 응한 것은 아무것도 하지 않습니다…

원래 조에트로프란 무엇인가 라는 것은 이하의 Wikipedia의 기사를 참고로.

회전 엿보기 - Wikipedia

구현해 본 결과는 다음에서 확인할 수 있습니다.

h tps : // / ぁ s. 오 rg / rk / 조에 t 로페 /

소스는 GitHub에서.

doxas/advent2018: advent calendar 2018 demo

메커니즘

어쩐지 보니 괜찮습니다만, 실린더의 지오메트리를 만들어 거기에 조금씩 모습이 다른 그림을 붙여 주고, 고속으로 회전시켜 줍니다.

이 애니메이션의 원이 되는 그림은, 어쩐지 손으로 도트라든가 치는 것이 좋았습니다만 쉐이더로 쓰는 편이 간단할 것 같았기 때문에 GLSL 로 애니메이션 써 버렸습니다.

시간의 경과에 의해 그대로 애니메이션하는 쉐이더는 이하로부터 확인할 수 있습니다.

GLSL로 그리기 시작한 애니메이션

이것을, 4 x 4 의 블록으로 단락지어 합계 16 회, 하나의 프레임 버퍼에 구워 줍니다.

실제로는, 코드 쪽에서는 8 x 8 라든지 더 세세한 테이블로 할 수도 있습니다만, 너무 세세해도 뭔가 별로 결과는 바뀌지 않기 때문에, 4 x 4 의 16 프레임으로 애니메이션이 일주한다 그렇습니다.



이런 식으로.

그것을 실린더의 각 면에 뻗어서 문지릅니다.

가속화되면 흔들림이되는 문제

구현하기 전부터 어쩐지 상상은 하고 있었습니다만…

시간의 경과에 따라 회전하도록 하고 있으면 부동 소수점의 미묘한 정밀도의 문제라고 하는지 흔들림도 있을지도 모르고, 아마 잘 되지 않는 것이 아닐까 생각하고 있었습니다. 안의 정, 속도를 올리면 서서히 흔들림이 커져 버리는군요…

매 프레임, 얼마나 회전하는지를 정수화해 확실히 결정해 버리면 아마 흔들림은 적게 할 수 있다고 생각합니다만, 어쩐지 그것은 하지 않고, 흔들리는 느낌 그대로 하고 있습니다.

화면 우측의 슬라이더를 사용하면 회전 속도를 임의로 변경할 수 있으므로, 신경이 쓰이는 분은 흔들어 보세요.

이런 사실을 만들어 보면 알겠지만, 역시 현실 세계는 훌륭하게 잘 되어있지요…

언젠가 저도 현실이 되고 싶어요…