Three.jsのBuild

骨入りモデルとかやってみようかと思ったのだけど、その前に Three.js のソースを見やすい状態で作業したい。 結合前の Three.js を自前ビルドしながら運用する方法を調べてみる。 build.py, or how to generate a compressed three.js file と本家に書いてある。python 使うんか。gulp でやりてぇな。 全部 concat して uglify したらいいんじゃないか。 やってみよう。 とりあえず bower で導入した three.js 関連を削除。 threejs.src フォルダを作って three.js ソースの src ディレクトリの中身を展開した。

gulp.task('bowerjs', function () {


    var files = [
        './bower_components/jquery/dist/jquery.js',
        './bower_components/highlightjs/highlight.pack.js',
        './bower_components/stats.js/build/stats.min.js',
        './lib/**/*.js', // <-- 中にthree.jsのsrcをコピーした
    ];
    gulp.src(files)
        .pipe($.plumber({ errorHandler: $.notify.onError('<%= error.message %>') }))
        .pipe($.debug({ title: 'bowerjs files:' }))
        .pipe($.sourcemaps.init())
        //.pipe($.uglify())
        .pipe($.concat('all.min.js'))
        .pipe($.sourcemaps.write('./', {
            sourceMappingURL: function (file) {
                return file.relative + '.map';
            }
        }))
        .pipe(gulp.dest('build/js'))
        .pipe(browser.reload({ stream: true }))
    ;
});


これで作ったall.min.jsではエラーが出てだめですね。
単にsrcをconcatするだけではだめだ。本家のドキュメントを読み始める。
/three.js/utils/build/


でビルドできるよって書いてあります。python関係ないみたいだ。
> npm install
> node build.js --include common --include extras


なるほどbuild.jsを見てみよう。
includeってなんだろうと調べてみると
/three.js/utils/build/includes


にjsonファイルがあり中にjsファイルがリストされている。
なるほど。src下を全部concatするのではなくここに書いてあるものを、書いてある順でconcatすればいいんでないか。
//
gulp.task('threejs:build', function(){
    var common=JSON.parse(fs.readFileSync('three.js/includes/common.json')).map(function(v, i){ return 'three.js/'+v; });
    gulp.src(common)
        .pipe($.concat('three.js'))
        .pipe(gulp.dest('./lib'))
        ;
});


gulp.task('bowerjs', ['threejs:build'], function () {
    // 前と同じ
}

これで実行するとそれっぽい three.js が出てくるが、まだエラーが出る。 でエラー行に飛ぶと ifdef がある。なんだこれは。

#ifdef USE_ALPHAMAP


    diffuseColor.a *= texture2D( alphaMap, vUv ).g;


#endif


glslだ・・・。
確かに、build.js内で拡張子がglslのファイルだけ別処理になっている。
if( file.indexOf( '.glsl') >= 0 ) {


    contents = 'THREE.ShaderChunk[ \'' +
        path.basename( file, '.glsl' ) + '\' ] =' +
        JSON.stringify( contents ) + ';\n';


}


ちょっとgulpのフィルタを作りますか。
three.shaderchunk.js
var through = require('through2');
var gutil = require('gulp-util');
var fs = require('fs');
var path = require('path');


module.exports = function () {


    return through.obj(function (file, enc, cb) {


        if (file.isStream()) {
            cb(new gutil.PluginError('three.shadechunk', 'Streaming not supported'));
            return;
        }


        if (path.extname(file.path).toLowerCase() == '.glsl') {
            var contents = 'THREE.ShaderChunk[ \'' +
                path.basename(file.path, '.glsl') + '\' ] =' +
                JSON.stringify(file.contents.toString()) + ';\n';
            file.contents = new Buffer(contents);
            file.path = file.path + ".js";
        }


        this.push(file);


        cb();
    });
}


gulpファイルの呼び出しの方。これでthree.js/srcからthree.jsを作成できた。
あとは、sourcemapが付くようにした。
gulpfile.js
gulp.task('threejs:build', function(){
    var common=JSON.parse(fs.readFileSync('three.js/includes/common.json'))
    .map(function(v, i){ return 'three.js/'+v; });
    var extras=JSON.parse(fs.readFileSync('three.js/includes/extras.json'))
    .map(function(v, i){ return 'three.js/'+v; });
    gulp.src(common.concat(extras))
        .pipe(threeShaderchunk())
        .pipe($.concat('three.js'))
        .pipe(gulp.dest('./lib'))
        ;
});


FireFoxでブレイクポイントを仕掛けてステップ実行できた。
これで、Loaderの自作とかが捗るぞ。
👈新

Three.jsのEditor

Three.jsのJSONモデルフォーマット

threejs