Three.js r83で何が変わったのか
2016/12/21
  • このエントリーをはてなブックマークに追加

このエントリは「Three.js Advent Calendar 2016」の18日目です。

はじめに


想定より遅くて今月はもう出ないかと思っていたThree.jsのr83がやっと出たので、この際なので突如欠員が出たThree.js Advent Calendarの一記事ということにしてざっくり変更点をまとめます。Advent Calendarがなくてもどのみち同じようなエントリを上げていたと思いますが。

要点


大きいのは遂にWebGL2Rendererが入りWebGL2対応が正式に始まったことでしょうか。FirefoxもChromeも次のバージョンからWebGL2がフラグなしで有効になるようなので、我々開発者も少しずつ慣れておいたほうがいいかもしれません。WebGL2以外では今回から追加された面光源も場所を選べば効果的に利用できそうでうれしいところです。

コードの変更点


ということで以下、r83のリリースノートの要約です。

バグフィックス


Audio回りの不具合が修正されたようです。あまり踏んだ人はいなさそう。

Audio
setBuffer()内で本来一度しか利用できないAudioBufferSourceNodeが複数回利用されている不具合が修正されました。 (#10060
AudioListener
deprecatedになっているAudioListener#setPositionと#setOrientationが使用されていたので修正されました。(#9845


追加


BufferAttribute
onUpdateCallbackプロパティとdisposeArray()が追加されました。前者は値更新時のコールバック、後者はGPUにデータ送信後にメモリを節約するためのメソッドです。(#9512
Cylindrical
円柱座標を表すクラスが追加されました。合わせてVector3にsetFromCylindrical()メソッドも追加されています。(#10253
ImageLoader
Access-Control-Allow-Originヘッダの指定に従ってクロスオリジンで画像をロードできるようになりました。(#10168
Layers
copy()メソッドとclone()メソッドが追加され、Object3Dのcopy()メソッド内部で利用されるようになりました。(#10245
ObjectLoader
古いフォーマットと不正なJSONのチェックが追加されました。(#9944#9099
MeshBasicMaterial
MeshBasicMaterialはライトに反応しないマテリアルですが、焼きこまれた影はサポートする必要があるということでlightMapのサポートが追加されました。(#9975
MeshToonMaterial
このマテリアルを使用するとこういう感じ(左)にできるそうです。#9912#10176#10186#10187
MeshNormalMaterial
bumpMap、normalMap、displacementMapのサポートが追加されました。(#10343
PolarGridHelper
極座標を見やすくしてくれるヘルパー?が追加されました。(#10179
RectAreaLight
面光源が追加されました。合わせてRedtAreaLightHelperクラスも追加されています。初めてのThree.jsの原著では外部ライブラリを使った面光源の説明があったんですが、three.jsのバージョンアップで動かなくなっていたので省略しました。「初めてのThree.js 第2版」の第2版が出ることがあればぜひセクションを足したいところです。(#9234#10041#10210
ShapeBufferGeometry
ShapeGeometryのBufferGeometry版が追加されました。(#9970
Uniform
clone()メソッドが追加されました。(#10178
WebGL2Renderer
まだそれほど大きくありませんが、遂にWebGL2対応が始まった模様です。(WebGL2Renderer

削除


BoundingBoxHelper
機能的にBoxHelperに完全に含まれているのでdeprecatedになりました。(#10197
WebGLState
clearColor()、clearDepth()、clearStencil()メソッドが削除されました。state.colorBuffer.setClear()などを使ってください。

リファクタリング


Bone
未使用のskinプロパティが削除されました。(#9951
BufferGeometry
バウンディングボックス/スフィアの計算にInterleavedBufferAttributeが利用されるようになりました。合わせてBox3、Matrix3、Matrix4にも修正が入っています。(#10296#10303#10296#10355
CameraHelper
BufferGeometryを使用するように変更されました。(#10185
HemisphereLightHelper
BufferGeometryを使用するように変更されました。(#10205
SkeletonHelper
BufferGeometryを使用するように変更されました。(#10192#10204
FileLoader
XHRLoaderが改名されました。さらにsetMimeType()メソッドも追加されています。(#9959
Texture
未使用のsourceFileプロパティが削除されました。(#10024
WebGLRenderer
ちまちまいろいろと(#9948#9972#9774#10300#10331#10330#9861

Examples


今回追加されたものの中では面光源とトゥーンマテリアルのサンプルがおすすめです。

webgl_lights_arealight
webgl_lights_rectarealight
webgl_materials_variations_toon

それではまた来年。