2012-06-15

WebGL対応ブラウザ向けの3Dモデルビューア提供サービス「Sketchfab」

WebGL

「Sketchfab」はBlenderから3Dモデルをサーバにアップロードして、WebGLで動作する専用のプレーヤーで表示する事が可能なサービスです。

Sketchfab blog - publish interactive 3D online
http://blog.sketchfab.com/

埋め込みタグについてはこちらに書かれています。こちらのページで実際の動作が試せます。

Sketchfab embed - Sketchfab blog
http://blog.sketchfab.com/sketchfab-embed#more

WebGL対応のブラウザでアクセスしてみて下さい。ちょっとロード時間はかかりますが操作自体はとても快適なプレイヤーでした。

Blenderからのアップロードをしている動画。

アップロードするにはAPI Keyが要るみたいです。詳細はこちらに記載されています。Blenderからアップロードする時もAPI Keyが必要なみたいです。

2012-06-15

Opera 12がリリース、遂にWebGLに対応(デフォルトではOFF)

WebGL Opera

Opera 12、随分アルファやベータ版の期間が長かったですが最近やっと正式版がリリースされました。

アルファ版の頃から搭載されていたWebGLは正式版でも搭載されたか気になっていたのですが結果は「対応しているるけどデフォルトでは無効化されている」というちょっとだけ残念な状態です。

OperaでWebGLを有効にする方法

WebGLを有効化する方法を解説。

まずはアドレスバーに以下のコマンドを入力。

opera:config#UserPrefs|EnableWebGL

すると以下の画面が表示されますのでここの値を 1 します。

次に下の方にスクロールすると表示される「保存」ボタンを押すと再起動の指示が表示されるのでOperaを再起動するとWebGLを有効になります。

しかし、自分が最初に試した環境ではこの設定をした後にWebGLを使ったページを表示してもWebGL非対応のブラウザ扱いをされてしまいました。

「これはおかしいな」とアドレスバーに opera:gpu を入力し、GPUの情報を確認すると「Blacklist status for 3D」の項目に「Blocked device」と記載されていました。

残念ながらこのマシン(OSはMac OS X)は3Dレンダリングに問題が有る等の理由でブラックリストに入っているみたいです。その為にWebGLが有効に出来なかったみたいです。

他のマシン(OSはMac OS X)でGPUを確認するとこの様な表示になったのでこのマシンならOKかな？と思って期待して試したのですがこちらも上手く表示されませんでした。というかこのマシンだとcanvasの描画自体が正しくされていませんでした(うーん、Opera 11の時はこんな事無かったと思うんだけど…)。

その後、Windowsマシンでも試してみたところ無事、WebGLの描画が行われました。しかし、ここでもちょっとした問題が…
こちらの水族館のデモだとテクスチャが上手く描画されませんでした。

こちらのF1カーのデモはちゃんとした描画になりました。

その他に使用可能なコマンド

アドレスバーに入力可能なコマンドはその他にもCPU使用率を確認する opera:cpu というものも有るみたいです。

Chrome 19で対応したGamepad APIを試してみた

Chrome

Dev版の頃はXInput対応なゲームパッドしか対応してませんでしたが正式版ではそれ以外のゲームパッドにも対応しているみたいです。

Chromeでゲームパッド対応を有効化

なお、デフォルトでは使えないみたいです。以下の手順が必要です。

まずはアドレスバーに chrome://flags/ と入力し、表示される画面の中から「ゲームパッドを有効にする」という項目の「有効にする」のリンクをクリックします。

すると再起動する様にとのメッセージが出るのでChromeを再起動します。これでゲームパッドの情報を取得出来るようになります。

こんな感じのプログラムでゲームパッドの情報を取得出来ます。

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
window.addEventListener("load", function(e) {
  function runAnimation()
  {
    window.webkitRequestAnimationFrame(runAnimation);
    var gamepad_info = '';
    var gamepad_num = navigator.webkitGamepads.length;
    var i, b, a;
    var no_pad = true;
    for (i=0; i<gamepad_num; i++) {
    	var pad = navigator.webkitGamepads[i];
	    if(pad) {
	    	no_pad = false;
	    	gamepad_info += "【Gamepad[" + i + "]】<br>";
	    	for (b=0; b<pad.buttons.length; b++) {
		    	gamepad_info += "buttons[" + b + "]=" + pad.buttons[b] + "<br>";
	    	}
	    	for (a=0; a<pad.axes.length; a++) {
		    	gamepad_info += "axis[" + a + "]=" + pad.axes[a] + "<br>";
	    	}
	    }
    }
    if (no_pad) {
    	gamepad_info = '画面をクリックした後にゲームパッドのボタンを押して下さい';
    }
    document.getElementById('gamepad_info').innerHTML = gamepad_info;
  }
  window.webkitRequestAnimationFrame(runAnimation);
}, false);
</script>
  <title>Chromeでゲームパッドの情報を取得するサンプル</title>
</head>
<body>
<div id="gamepad_info"></div>
</body>
</html>

こちらで体験出来ます。ゲームパッドを繋いでChromeで見て下さい。

強火で進め

このブログではプログラム関連の記事を中心に書いてます。