2018년 02월 17일에 Hack To The Future (#HTTF)라는 마라톤 형식의 경기 프로그래밍 콘테스트 예선이 열렸습니다.
참가해 주신 여러분 감사합니다.

이번에 이 #HTTF용으로 비주얼라이저를 만들었습니다.

비주얼라이저

문제가 「산형 더하기」라고 하는 세로・가로・높이의 해가 요구되는 것이었기 때문에, 비주얼라이저도 3차원이 보기 쉽다고 생각해, 이런 느낌으로 만들어 보았습니다.
피라미드를 쌓아 정답 데이터에 접근해라. 빨강이 정답과 맞는 곳, 흰색이 부족한 곳, 파랑이 너무 많은 곳이야, 라는 느낌입니다.



파랑과 흰색(과잉·부족분)이라는 묘화 모드도 있습니다.

구성요소

웹에서 3D로 Three.js라는 WebGL을 쉽게 다룰 수있는 라이브러리를 사용합니다. 거의 거의 Three.js 엄마.
5년만에 Three.js를 건드렸습니다만, 메소드명으로 검색했을 때에 일본어 문서와 일본어의 블로그가 많이 나와서 감동했습니다. 정말 고마워.

배치한 오브젝트도, 빨강・백・파랑의 직육면체, 카메라, 라이트, 좌표의 문자, 보조선 정도.

경량화

예상되는 대답은 100*100*20000 정도의 모델입니다만, 구축 개시 직후는 복셀로 표현하려고 메모리 부족으로 브라우저가 떨어졌습니다. 2억개의 Mesh를 Intel HD Graphics로 그릴 수 있는 것은 아닙니다.

여러가지 조사한 결과,. 2억 메쉬가 3개까지 줄었습니다. 대단해.

그리고는 데이터를 바꿀 때마다 초기화 처리의 재검토나 여기 등으로 동작의 경량화를 도모하고 있습니다.
그렇다고는 해도 열심히 하면 아직 경량화할 수 있는 생각이 든다.

참가자의 반응

비주얼 라이저가 3D로 글리글리 수 있어 대단한 메모리 해제 — odan (@odan3240)

비주얼 라이저에서 몇 가지 테스트를하고 모든 모양을 함께 깨달은 후에는 훨씬 빨랐습니다.

— ㅤ (@my316g) #HTTF

<script async=""src="https://platform.twitter.com/widgets.js"/>

2018년 2월 17일 비주얼 라이저 덕분에 "둥근"이 매우 잘 밝혀졌습니다

— fal_rnd@ 절벽 (@fal_rnd) 2018년 2월 17일

<script async=""src="https://platform.twitter.com/widgets.js"/>

생각했던 것 이상으로 호평이었던 것 같아서 안심했습니다.

라고 해도, 몇개의 버그 보고나 묘화가 무겁다고 하는 의견도 받았으므로 향후에 살리고 싶은 곳입니다.

다음 번

2018/03/03(토)에 동 콘테스트 Hack To The Future의 본선이 개최될 예정입니다.

음... 다음 주말입니까? 비주얼라이저의 구현 사이에 맞을까…