개요

WebGL Advent Calendar 2015 의 24일째의 기사입니다.
WebGL 라이브러리의 jThree v3을 사용해보십시오.

jThree v3이란?

v2까지는 Three.js에 의존하는 라이브러리였습니다.
이번 v3(version 3)은, v2의 누구라도 3D 오브젝트를 간단하게 작성할 수 있어 조작할 수 있다고 하는 의사를 계승해, Three.js로부터 완전히 분리하고, WebGL을 네이티브로 취급하게 되었습니다.
그렇게 함으로써 Three.js에서는 할 수 없었던 것도 할 수 있게 되어, 위와 같은 jThree의 의사를 실현할 수 있게 됩니다.
※v3는 현재 정식판이 아닌 개발 단계입니다.

v3의 메인 커미터 기사입니다.
WebGL 라이브러리 용 Deferred Rendering의 동적 라이트, 섀도우 맵의 구현 방법에 대해

[jThree] WebGL에서 요구하는 것

즉시 만져 보겠습니다.

※GOML은 3D 오브젝트를 그리는 마크업 언어가 됩니다.

index.goml

<goml>
  <resources>
    <phong diffuse="blue" specular="#CCC" specularpower="15" name="blue"/>
    <phong diffuse="red" specular="#CCC" specularpower="15" name="red"/>
    <phong diffuse="green" specular="#CCC" specularposer="15" name="green"/>
  </resources>
  <canvases>
    <canvas clearColor="blue" frame=".canvasContainer">
      <viewport cam="CAM1" id="main" width="640" height="480" name="MAIN" skybox="cubemap" backgroundType="skybox"/>
    </canvas>
  </canvases>
  <scenes>
    <scene name="mainScene">
      <object rotation="y(30d)">
        <camera id="maincam" aspect="1" far="20" fovy="1/2p" name="CAM1" near="0.1" position="(0,3,5)"></camera>
      </object>
      <scenelight color="white" intensity="0.3"/>
      <dlight color="#FFFFFF" intensity="0.4" shadow="true"/>
      <pmx scale="0.2" src="/resource/model/Tda/Miku.pmx" position="0,0,0">
      </pmx>
    </scene>
  </scenes>
</goml>

이 설명량만으로 Miku의 모델을 표시시킬 수 있습니다.
장면과 카메라를 만들어 모델 데이터를 불러오기만 하면 됩니다.
처음 코드를 읽는 사람도 직관적으로 알 수 있습니다.

스포트라이트와 바닥을 추가해 봅니다.

index.goml

<goml>
  ...
  <scenes>
    <scene name="mainScene">
      <object rotation="y(30d)">
        <camera id="maincam" aspect="1" far="20" fovy="1/2p" name="CAM1" near="0.1" position="(0,5,6)" rotation="euler(-10d,10d,0)"></camera>
      </object>
      <scenelight color="white" intensity="0.3"/>
      <dlight color="#FFFFFF" intensity="0.4" shadow="true"/>
      <slight color="#FFFF00" position="4,2,-6" rotation="euler(-60d,0,-50d)" decay="0.3"/>
      <pmx scale="0.2" src="/resource/model/Tda/Miku.pmx" position="0,0,0">
        <vmd id="melt" frame="59" src="/resource/motion/mens.vmd" enabled="true" autoSpeed="0.00000001" />
      </pmx>
      <mesh geo="quad" mat="blue" scale="10" rotation="x(-90d)"/>
    </scene>
  </scenes>
</goml>

이런 느낌이 들었습니다.
스포트라이트와 바닥 모두 DOM을 추가하는 것처럼 추가 할 수 있습니다.
※실은 애니메이션도 설정하고 있었습니다.

무대와 조명을 추가해 봅니다.

index.goml

<goml>
  ...
  <scenes>
    <scene name="mainScene">
      <object rotation="y(25d)">
        <camera id="maincam" aspect="1" far="20" fovy="1/2p" name="CAM1" near="0.1" position="(0,3,4)"></camera>
      </object>
      <scenelight color="white" intensity="0.3"/>
      <plight color="#FF0000" position="0,2,-6" distance="7" decay="1"/>
      <plight color="#00FF00" position="3,2,-6" distance="7" decay="1"/>
      <plight color="#FF00FF" position="5,2,-6" distance="7" decay="1"/>
      <plight color="#0000FF" position="-3,2,-6" distance="7" decay="1"/>
      <slight color="#FFFFFF" position="0,2,-3" rotation="euler(-50d,0,0)" decay="0.3">
      </slight>
      <dlight color="#FFFFFF" intensity="0.4" shadow="true"/>
      <pmx scale="0.15" src="/resource/model/Tda/Miku.pmx" position="0,0,-1">
        <vmd id="melt" frame="0" src="/resource/motion/mens.vmd" enabled="true" autoSpeed="1"/>
      </pmx>
      <pmx scale="0.1" src="/resource/model/sakura/sakura_jp.pmx" position="0,0,-4">
      </pmx>
    </scene>
  </scenes>
</goml>

깨끗하게 3D 공간을 재현할 수 있었습니다.

무대는 아래 사이트에서 빌렸습니다.
htps : // 보라 wl 로트 l. 네 t/후에/62812

감상·정리

이번에는 jThree 개발에 종사하지 않은 내가 jThree v3을 만져 보았습니다. 그 결과, 고생하지 않고, 간단하게 씬 작성, 모델 표시를 실시할 수 있었습니다.
jThree가 공식 버전으로 공개되면 웹 콘텐츠에 큰 영향을 미칠 것이라고 느꼈습니다.