SQLの窓

2014年02月14日


別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション

実行ページ
( IE は IE11 以上でないと動作しません )


画像を THREE.ImageUtils.loadTexture で読み込んで、3D オブジェクトにテクスチャとして使用します。公式の説明は発見していませんが、Google+ と Picasa(実質 Google+と同じ) の画像データは、access-control-allow-origin: * を返すので、このような処理に適しています。

ここでは、一つの画像を繰り返し貼り付ける事を想定しています。単純に一枚の画像を面にフィットさせる場合は縦・横のサイズは自由ですが、繰り返して貼りつける場合には、64、128、256、512といったサイズである必要があります( 縦と横が同じサイズの正方形である必要はありませんが、正方形以外のサイズはあまり意味がありません )

サイズが自由である事の確認は、リンク先のページで任意の画像( Google+ のどなたの画像でも OK )のURL をセットして、x、y方向の繰り返しを 1 と 1 にして送信ボタンをクリックすると処理されますのでご確認下さい。また、そのサイズで複数繰り返しを行うとうまく処理されないのも確認できます。 







access-control-allow-origin ヘッダ が返されていますが、Three.js の機能として、THREE.ImageUtils.crossOrigin = "*"; を実行する必要があります。

この処理は、ここ最近のバージョンでやっときちんと実装されたものだと思います。いつ変更されたかは確認していませんが、少なくとも r57 のバージョンで実行すると、設定しなくても動作してしまいます。しかし、r65 では設定が必要になっていますので、実装する場合はバージョンに注意する必要があります。( Three.js は仕様変更が頻繁なので、現実的にはバージョンアップで常に確認する必要があります )
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min65.js"></script>
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/user_play1.js"></script>

<div id="three_area" style='width:600px;height:600px;'></div>

<script type="text/javascript"> 
 
var camera, scene, renderer; 
var user_play; 
 
// 処理開始 
build_3d_world(); 
 
function build_3d_world() { 
 
	// カメラ 
	camera = new THREE.PerspectiveCamera( 70, 1, 1, 10000 ); 
 
	// シーン 
	scene = new THREE.Scene(); 

	// MeshBasicMaterial( 影を使わない ) を使用しているのでライトは必要ありませんが、実行してもかまいません
//	scene.add( new THREE.AmbientLight( 0xffffff ) );

	// 別ドメインの場合必要です( access-control-allow-origin: * の例 )
	THREE.ImageUtils.crossOrigin = "*";

	// 画像は、repeat.set で繰り返しで貼り付ける事ができますが、
	// その為には、64、128、256、512といったサイズである必要があります 
	// 別ドメインの場合は、access-control-allow-origin: ヘッダを返す必要がありますが、
	// Google+ や Picasa の画像は全てかえすようです
	var map = THREE.ImageUtils.loadTexture( "https://lh5.googleusercontent.com/-Xgh7ru0xoXs/UvujW9la76I/AAAAAAAASd4/IFWELp7fpA8/s512/st.png" );
	map.wrapS = map.wrapT = THREE.RepeatWrapping = 1000;
	map.repeat.set( 2, 2 );

	object = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), new THREE.MeshBasicMaterial( { map: map } ) );

	object.position.set( 0, 0, 0 );
	scene.add( object );
 
	// レンダラー 
	renderer = new THREE.WebGLRenderer();
	// 以前は、div の背景色で設定していましたが、クリアカラーを指定するようになっています
	renderer.setClearColor( 0x444444 );
	renderer.setSize( 600, 600 ); 
 
	// 実装 
	document.getElementById("three_area").appendChild( renderer.domElement ); 
 
	// アニメーション 
	// 150 は回転効果の半径です
	user_play = new THREE.UserPlay1( scene, camera, renderer, animate, 150 ); 
	user_play.start(); 
 
} 
// ループ処理 
function animate() { 
 
	// アニメーションを行う為の次のフレームの呼び出し処理です
	requestAnimationFrame( animate ); 
	// この中で回転効果を処理しています
	user_play.render(); 
 
} 
 
</script>
THREE.ImageUtils.loadTexture で返されるのは THREE.Texture オブジェクトです。ここで最も重要な THREE.Texture の機能は、wrapSwrapT プロパティです。これは、平面における繰り返し方向に対するオプションをセットするプロパティで、それぞれ x 方向と y方向と考えて下さい。( S: 水平, T: 深さ, H: 高さ / 内部で、Vector2 に対応しているので、x と y )

オプションの値は 3つ 用意されていて、以下のようになっています
THREE.RepeatWrapping = 1000;
THREE.ClampToEdgeWrapping = 1001;
THREE.MirroredRepeatWrapping = 1002;
デフォルトは THREE.ClampToEdgeWrapping で、テクスチャを面に対して伸縮してセットする事を意味します。THREE.RepeatWrappingTHREE.MirroredRepeatWrapping は、それぞれテクスチャを繰り返してマッピングするもので、前者は境界毎に同じものが繰り返され、後者は境界毎に反転されたものが使用されます。 ただ、繰り返し処理を使っていても、繰り返す回数を 1 回だけにすると THREE.ClampToEdgeWrapping と同じ結果になります。 ※ map.repeat.set( 1, 1 ); 以下の処理は、Three.js の構築部分のみを明確にするためにアニメーション部分を外に出しています。 user_play1.js
THREE.UserPlay1 = function ( scene, camera, renderer, animate, radius ) {

	this.scene = scene;
	this.camera = camera;
	this.renderer = renderer;
	this.radius = ( radius !== undefined ) ? radius : 600;

	this.theta = 0
	this.animate = animate;


};
THREE.UserPlay1.prototype = {
	constructor: THREE.UserPlay1,
	start: function() {
		this.animate();
	},
	render: function() {
		this.theta += 0.1;

		this.camera.position.x = this.radius * Math.sin( THREE.Math.degToRad( this.theta ) );
		this.camera.position.y = this.radius * Math.sin( THREE.Math.degToRad( this.theta ) );
		this.camera.position.z = this.radius * Math.cos( THREE.Math.degToRad( this.theta ) );

		this.camera.lookAt( this.scene.position );
		this.renderer.render( this.scene, this.camera );
	}

};
これらのコードは、THREE.CanvasRenderer でも動作します。但しその場合はセグメントの境界が表示されてしまうので、THREE.MeshBasicMaterial のオプションとして overdraw: true を追加します。また、キューブのセグメント数( 4, 4, 4 ) は、THREE.CanvasRenderer での処理時に効力を発揮します( セグメント単位の画像のゆがみ表現となるので、セグメント数が少ないと全体としての歪みが大きくなります )

3D の原理の専門的な部分はよく解らないのですが、WebGL では平面のセグメント数が少なくても良いように感じています。『 object = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshBasicMaterial( { map: map } ) );』

関連する資料

ポリゴンメッシュ



posted by lightbox at 2014-02-14 17:43 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2014年02月11日


jQuery の .val() と .val('値') と一括変更用の .val(関数)

.val() はとても解りやすい便利なメソッドです。ちなにみに alert( $('#a1').val ) とすると .val メソッドのソースの内容が表示されます。

.val('値') もその逆ですから普通に使えてしまいますが、.val( 関数 ) はちょっと解りづらいです。関数が返した値で、オブジェクトの値を書き換えるのですが、その関数内では対象となったオブジェクトのインデックスと値が順次渡される仕様となっています。jQuery のドキュメントでは、無名関数で書かれていますが、以下のサンプルでは checkVal 関数として独立して定義して使用しています。関数内ではその時対象となるオブジェクトも参照できるので、使い方としては対象となるオブジェクトの値をキー(id)に対して明細を全て表示するような処理で使えます。( 明細は、XMLHttpRequest 等で取得 )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<input class="action1" type="text" id="a1" value="lightbox" />
<input class="action1" type="text" id="a2" value="lightbox" />
<script type="text/javascript">

// val の引数として与える関数のサンプル
// もちろん無名関数でも良い
function checkVal( index, value ) {
	console.log(this.id);
	alert( index + "|" + value + " : これは入力フィールドのインデックスと現在の値です" );
	return( '変更' );
}

function action1() {

	// 現在の値の取得
	var x = $('#a1').val();

	// 表示
	alert("この値は、id=a1 の入力フィールドの現在の値です => "+x);

	// 現在の値を変更
	$('#a1').val('123');

	// 内容を変更する関数を呼び出す
	// input を両方変更するように、
	// index が変化しながら全て呼び出される
	$('input.action1').val(checkVal);

}

</script>
<input type="button" value="実行" onclick='action1();'>


もう少し具体的なサンプル

jQuery の .val(関数) を使用した、社員コードに対する明細データの表示サンプル


posted by lightbox at 2014-02-11 05:30 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2014年02月05日


Win8.1 ストアアプリ(JS) : Visual Studio 2013 で Three.js(v65) の WebGLRenderer の動作を確認しました

Visual Studio 2013 Professional の 90 日間の無償評価版をダウンロードしてインストールし、動作確認しました。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS 参照 -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- App1 参照 -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/three.min65.js"></script>
    <script src="/js/OrbitControls.js"></script>
    <script src="/js/user_three.js"></script>

    <style>
        #three_area {
            margin: 20px 0px 0px 190px;
            width: 850px;
            height: 400px;
            border: solid #ffffff 1px;
        }

        #title_area {
            margin: 150px 0px 0px 190px;
            width: 820px;
            height: 60px;
            border: solid #ffffff 1px;
            font-size: 25px;
            padding: 15px;
        }

    </style>
</head>
<body>

    <div id="title_area">Windows 8.1 + Visual Studio 2013 + WebGL + Three.js v65</div>

    <div id="three_area"></div>

    <script>

        var cameraCube, sceneCube;

        var w = 850;
        var h = 400;

        // カメラ作成
        USER.camera = new THREE.PerspectiveCamera(70, w / h, 1, 10000);
        USER.camera.position.set(0, 0, 1);

        USER.camera2 = new THREE.PerspectiveCamera(50, w / h, 1, 500);
        USER.camera2.position.z = 0;

        // シーン作成
        USER.scene = new THREE.Scene();
        USER.scene2 = new THREE.Scene();

        // テクスチャの準備
        var path = "/images/";
        var format = '.jpg';
        var urls = [
                path + 'px' + format, path + 'nx' + format,
                path + 'py' + format, path + 'ny' + format,
                path + 'pz' + format, path + 'nz' + format
        ];

        // テクスチャの実装
        mesh = USER.meshPanorama(urls);
        USER.scene2.add(mesh);

        // レンダラー作成
        USER.renderer = new THREE.WebGLRenderer();
        USER.renderer.setSize(w, h);

        // 表示エリア設定
        document.getElementById("three_area").appendChild(USER.renderer.domElement);

        // コントロール作成
        USER.orbit();
        USER.controls.autoRotate = true;
        USER.controls.autoRotateSpeed = 0.5; //default 2.0

        // アニメーション開始
        USER.animate();

        // オーバーライド
        USER.animate = function () {

            requestAnimationFrame(USER.animate);

            USER.camera2.rotation.copy(USER.camera.rotation);
            USER.camera2.position.copy(USER.camera.position);
            USER.controls.update();
            USER.renderer.render(USER.scene2, USER.camera2);

        }


    </script>

</body>
</html>

▼ このコードは、実際 WEB 上で動作しているものです。

Three.js : WebGL限定の Cube テクスチャによる『パノラマ背景』

この時の Three.js は v57 で、Windows8.1 で動作確認するにあたり、最新版は v65 でした。しかし、v65 のほうでは OrbitControls.js の内部処理がかなり変更された結果、Windows8.1 上では画面がちらつくので元のコードに近い状態に変更して動作させました。( 373 行目の scope.update(); をコメントにしました )

以下は、メインコードを簡潔にする為のユーザコードです( user_three.js )
USER = {};
USER.camera = null;
USER.scene = null;
USER.camera2 = null;
USER.scene2 = null;
USER.renderer = null;
USER.controls = null;

USER.animate = function () {
	requestAnimationFrame( USER.animate );
	USER.controls.update();
}

USER.render = function() {
	USER.renderer.render( USER.scene, USER.camera );
}

USER.orbit = function() {

	USER.controls = new THREE.OrbitControls( USER.camera );
	USER.controls.addEventListener( 'change', USER.render );

}

USER.meshPanorama = function(urls) {

	var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
	reflectionCube.format = THREE.RGBFormat;

	// Skybox
	var shader = THREE.ShaderLib[ "cube" ];
	shader.uniforms[ "tCube" ].value = reflectionCube;

	var material = new THREE.ShaderMaterial( {

		fragmentShader: shader.fragmentShader,
		vertexShader: shader.vertexShader,
		uniforms: shader.uniforms,
		depthWrite: false,
		side: THREE.BackSide

	} );

	return new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), material );

}




posted by lightbox at 2014-02-05 17:38 | Win8 ストアアプリ | このブログの読者になる | 更新情報をチェックする

2014年02月02日


Google Chrome と Firefox : JavaScript : Pointer Lock API


詳細は、developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock( 但し、これは Firefox 用のドキュメントで、フルスクリーン API と同時に使用しています )

単に実行したいだけなら、以下のようなコードだけです。
<script type="text/javascript">
function pointerLock() {
document.body.requestPointerLock
	= document.body.requestPointerLock
	|| document.body.mozRequestPointerLock
	|| document.body.webkitRequestPointerLock;
	document.body.requestPointerLock();
}
</script>
<input type="button" value="実行" onclick='pointerLock()'>
関連する記事

IE11 : 画像のフルスクリーン API



posted by lightbox at 2014-02-02 18:48 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2014年02月01日


JavaScript の function を外部に置いて、jQuery の ajax で読み出して SCRIPT 要素の innerHTML で動的に関数定義する

通常の div 等の innerHTML に script 要素ごと文字列設定はできませんが、script 要素に対して innerHTML に関数文字列をセットすると、関数が作成されます。但し、上書きはできないので同名の関数は追加で script 要素が必要になります。

しかし、この script 要素を削除しても、関数そのものはメモリに残るようなので、ここでは script 要素は削除しています。( デベロッパーツールで見てみると script 要素がなくなっていました )

外部のテキストは、Google の仮想ディレクトリを使って設置しています( access-control-allow-origin:* を返してくれます )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script type="text/javascript">
function set_script1() {
	$.get( "https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/functionByAjax.txt", function(data) {
		var obj = document.createElement("script");
		document.body.appendChild(obj);
		obj.innerHTML = data;
		document.body.removeChild(obj);
	});
}
function set_script2() {
	var obj = document.createElement("script");
	document.body.appendChild(obj);
	obj.innerHTML = "function message2(p) { alert(\"2:\"+p) }";
	document.body.removeChild(obj);
}

</script>
<input type="button" value="定義1実行" onclick='set_script1()'>
<input type="button" value="定義2実行" onclick='set_script2()'>
<input type="button" value="実行1" onclick='functionByAjax("こんにちは")'>
<input type="button" value="実行2" onclick='message2("こんにちは")'>
定義1 は、外部からの取り出しです。内容は以下のようになっています。

https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/ajax/functionByAjax.txt
function functionByAjax(a) {
    alert( "\u30e1\u30c3\u30bb\u30fc\u30b8 : (" + a + ") " );
}



posted by lightbox at 2014-02-01 20:29 | Ajax:jQuery | このブログの読者になる | 更新情報をチェックする

JavaScript オブジェクト作成の4態

1) 通常 JSON 記法
2) 無名 function 記法
3) 有名 function による インスタンス作成
<script type="text/javascript">

var obj1 =  {
	myobj: {
		func: function(){ return this.value },
		value: "OK"
	}
}

var obj2 = new function() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

function obj() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

var obj3 = new obj();

console.dir(obj1.myobj.func());
console.dir(obj2.myobj.func());
console.dir(obj3.myobj.func());
console.dir(obj1);
console.dir(obj2);
console.dir(obj3);
</script>


この結果では当然ですが、有名ファンクションでは『型』は function 名となっています。

さらに、もう一つの形として、Object 型の最初から myobj を設定しておくと以下のようになります。
<script type="text/javascript">
Object.prototype.myobj = {
	func: function(){ return this.value },
	value: "OK"
}

var obj1 =  {
}

var obj2 = new function() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

console.dir(obj1.myobj.func());
console.dir(obj2.myobj.func());
console.dir(obj1);
console.dir(obj2);
</script>


空のオブジェクトでも、myobj が使用可能になりますが、全てのオブジェクトに対して定義されてしまいます。しかし、同名のプロパティを上書きするとそちらが有効になります。





posted by lightbox at 2014-02-01 18:37 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり