enchant.jsでCanvasとWebGLを同時利用する際の注意点

enchant.jsではcanvasとWebGLを使ってゲームを作れますが、
この二つを同時に使ったゲームも作る事が可能です。

その際の手順と注意点をまとめます。

##gl-matrixのバージョン
JavaScript向け行列計算ライブラリ[gl-matrix](https://github.com/toji/gl-matrix)のバージョンが**新しすぎる**場合、
gl.enchant.jsが動作しません。
1.3.7系で動作を確認しています。同系はgitHubの[wise9/enchant.js/libs](https://github.com/wise9/enchant.js/tree/master/libs)から得られます。

##pushSceneしない
内部描画の都合上、起動時のcurrentSceneを外してしまうとWebGLの描画が停止します。
これを回避するためには、SceneではなくGroupを使ったスプライト管理が推奨です。

##プラグインの読み込み順序
Coreクラスを上書きしている関係で、一部のプラグインの読み込み順序が非可換です。
9leap投稿のためのAPIが必要な場合は、nineleap.enchant.jsをgl.enchant.jsより先に読み込んでおく必要があります。

```html:example

<script type="text/javascript" src="./gl-matrix-min.js"></script>
<script type="text/javascript" src="./enchant.js"></script>
<script type="text/javascript" src="./nineleap.enchant.js"></script>
<script type="text/javascript" src="./gl.enchant.js"></script>
<script type="text/javascript" src="./main.js"></script>

```

##そのほか

WebGL内のテクスチャにCanvasを用いる場合は、[SceneTexture.gl.enchant.js](https://github.com/kamakiri01/SceneTexture.gl.enchant.js)が利用できます。（宣伝）
![68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f35363133323932372f7363726970746f6772616d2f63616e766173746578747572652e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/24374/4ecd6b1c-3e1c-bfd2-d7bd-59502eac39a9.png)

##同時利用のサンプル
[sample.html](https://dl.dropboxusercontent.com/u/56132927/webdev/qiitaGL/index.html)

```js:sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="./gl-matrix-min.js"></script>
<script type="text/javascript" src="./enchant.js"></script>
<script type="text/javascript" src="./gl.enchant.js"></script>
<script type="text/javascript" src="./primitive.gl.enchant.js"></script>
<script type="text/javascript">
enchant();
var MyClass = {};
MyClass.COLOR1 = "#1f8f76"; //初期色
MyClass.COLOR2 = "#ff3333"; //反応色
MyClass.COLOR3 = "#ffcc33"; //touchBG
MyClass.Cube = enchant.Class.create(enchant.gl.primitive.Cube,{
        initialize: function(scale, color){
            enchant.gl.primitive.Cube.call(this, scale);
            this.mesh.setBaseColor(color);
            this.mesh.texture.ambient  = [0.4, 0.4, 0.4, 1];
            this.mesh.texture.diffuse  = [0.7, 0.7, 0.7, 1];
            this.mesh.texture.specular = [0.7, 0.7, 0.7, 1];
            this.addEventListener('enterframe', function(){
                    this.loop();
            });
        },
        loop: function(){
            this.rotationApply(new Quat(0, 1, 0,  Math.PI/180));
        }
});
var set2d = function(){
    var core = enchant.Core.instance;
    //新しいSceneクラスではなくcurrentsceneを使用する
    var scene = core.currentScene;
    core.currentScene.backgroundColor = null;
    var group = new Group();
    scene.addChild(group);
    var t = new Label("");
    t.x = 200;
    t.y = 100;
    t.font = "32px sans bold";
    t.color = MyClass.COLOR2;
    t.text = "TOUCH";
    t.addEventListener('touchstart', function(e){
            this.color = MyClass.COLOR1;
            //backgroundcolorの設定でScene3dは不可視になる。
            core.currentScene.backgroundColor = MyClass.COLOR3;
    })
    t.addEventListener('touchend', function(e){
            this.color = MyClass.COLOR2;
            //nullの代入で背景は復元できる。
            core.currentScene.backgroundColor = null;
    })
    group.addChild(t);
}
var set3d = function(){
    //WebGLシーンの宣言
    var scene3d = new Scene3D(); 
    //カメラの宣言と設定
    var camera = scene3d.getCamera(); 
    camera.x = 10;
    camera.y = 0;
    camera.z = 0;
    camera.centerX = 0;
    camera.centerY = 0;
    camera.centerZ = 0;
    camera.upVectorX = 0;
    camera.upVectorY = 1;
    camera.upVectorZ = 0;
    //光源設定
    var dLight = new DirectionalLight();
    dLight.color = [1.0, 1.0, 1.0];
    var aLight = new AmbientLight();
    aLight.color = [1.0, 1.0, 1.0];
    scene3d.backgroundColor = [0.1, 0.2, 0.25, 1];
    scene3d.setDirectionalLight(dLight);
    scene3d.setAmbientLight(aLight);
    //立方体を表示
    var c =new MyClass.Cube(1, MyClass.COLOR2);
    c.x = 0;
    c.y = 0;
    c.z = 0;
    //射影座標のタッチ判定時に色を変える
    c.addEventListener('touchstart', function(e){
            this.mesh.setBaseColor(MyClass.COLOR1);
    })
    c.addEventListener('touchend', function(e){
            this.mesh.setBaseColor(MyClass.COLOR2);
    })
    scene3d.addChild(c);
}
window.onload = function(){
    var core = new Core(512, 512);
    core.onload = function(){
        set2d();
        set3d();
    };
    core.start();
}
</script>
<style type="text/css">
body{
    margin: 0; 
}
</style>
</head>

<body>
</body>
</html>
```