3D Logo Generator
動くものはこちらです。
http://ohbarye.github.io/3D-logo-generator/
コードはGitHub参照。
https://github.com/ohbarye/3D-logo-generator
概要
ブラウザで入力された文字列を3Dロゴに変換するjsを書いてみました。
↓はギザギザしたgif画像ですが生成されるロゴはこんな感じです。
影をつけてみたり。
three.js
今回はほぼthree.jsだけで書いています。three.jsはWebGLで3Dを表現できるライブラリです。友達に教えてもらいました。
http://threejs.org/
今までWebGLの領域に触れたことは無かったのですが、思っていたよりも簡単に3D Renderingを実現でき、それに感動したのでthree.jsのシンプルな例も書いてみます。
// 描画領域サイズを定義
var width = 1000,
height = 700;
// scene
var scene = new THREE.Scene();
// mesh
var geometry = new THREE.BoxGeometry(20,20,20);
var material = new THREE.MeshLambertMaterial({color: "#558800"});
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0,30,0)
scene.add(cube);
// camera
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(300,500,300);
camera.lookAt(cube.position);
// rendering
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor("#eeeeee", 1);
// html にあらかじめ描画領域 <div id="stage"></div> を作っておく
document.getElementById('stage').appendChild(renderer.domElement);
renderer.render(scene, camera);
これでちょこんとした立方体が無限に広がる3D空間内に爆誕します。この時点で無から有を生んでいる感があり、"神"秘的な気持ちになります。
{color: "#558800"}を指定しているのにブラックボックスなのは光が無いせいです。
"光"をもたらすにはLightを追加します。
// light
var light = new THREE.DirectionalLight("#ffffff", 1);
light.position.set(0,100,30);
light.castShadow = true;
scene.add(light);
色が出るようになりました。
このように、基本は最初にsceneを作ってそこにオブジェクトをaddしていくだけです。空間にものを放り込んでいくイメージでしょうか。
ほんの少しだけUnity触ったことがあるのですが、似たような用語や表現があった気がするので経験者ならすぐ掴めるのではないかと思います。
あとはドットインストール先生の授業をなぞるだけで、y軸の周囲を回転し続ける立方体群や影を付けたりできるようになります。
この他にもアニメーションを付けたりマウスコントロールを与えたりできます。本記事では割愛しますが3D Logo Generatorでも実装しているので興味があれば見てみてください。
文字列のドット化
three.jsはちょっと記述量こそ多いもののやってることはそう難しくなく、今回最も悩んだのはここでした。
文字列のドット化したデータを表すビット配列をどうやって得るか…と考えるところから始まり、そもそもそういう技術を何と呼ぶのかわからず（ラスタライズ？）1時間ぐらい広大なネットを彷徨いようやく見つけたのが… 文字列の画像化ドットデータを得る | Aquaroad でした。
Canvasを使って画像データを得る
初めて知ったのですがHTML5のCanvas要素からはバイトデータを取得できます。
var canvas = $("<canvas>")[0];
var context = canvas.getContext('2d');
var imgdata = context.getImageData(top, left, width, height);
ここで得られるデータを利用することでpixel単位の編集や参照ができるようになるわけです。
また、フォントの設定はcontext,fontに対して行ってやります。
この辺りをいじるとロゴイメージが大きく変わるのは試していて面白かったですね。
var fontStyle = "12px 'ヒラギノ角ゴ Pro W3'"
context.font = fontStyle;
ImageDataの操作はだいぶプリミティブですが、そのぶん今後も活用できそうです。
GitHub.io便利
静的サイトの公開で今回初めてGitHub.ioを使いました。
GitHub上でブランチを切るだけでpublishできて、改めてGitHubの"インフラ力"に驚いたりしました。
今回はやりませんでしたが独自ドメインを割り当てたりもできるそうです。本格的なサイトをopenした際には試してみたいですね。
* 静的サイトをgithub.ioでホスティングし、独自ドメインでアクセスする - 結城浩のブログ -
広がる夢
three.jsプラグインとか
利用例やプラグインも色々紹介されていますし、公式サイトのサンプルを見てるだけでも楽しいですね。個人的に興味が湧いたサイトとプラグインを一つずつだけ選んでおきます。
︎本当に欲しかったもの
元ネタと言うのもおこがましいですが、実はPerfumeのすばらしいサイトにインスパイアされて作りました。こんなのも作ってみたいですね。