　おはこにゃばちにんこ〜！

　よーやくデスマーチから解放されました〜。

　親切本のXcode 8対応もひと段落ついたし、やりたくて仕方なかった物理シミュレーションやります。

　まずはWebGLだ！

　右のフリープラグインコーナーに出てる立方体に球体がめり込んでるやつね。

　WebGLはwebブラウザで3D描画をするための標準仕様でJava Scriptを使います。

　こいつね↑

　残念ながらscriptもiframeもアメブロ禁止タグなんで、ここに直接貼れません。

　なので使っていいフリープラグインコーナーに貼り付けますた。

　まるごと1つのHTMLページとして書いたのがこっち。

　WebGLで3Dプログラミングだ！

　当然ですが、JavaScriptとWebGLを使ってるので、表示させたい人はJavaScriptやWebGLを許可してください。例えばSafariだと環境設定のセキュリティタブにあるWebコンテンツのJavaScriptやWebGLを許可をチェックしておく必要があります。

　でもって、書かれてるJavaScriptはこんな感じです。

　HTMLとJavaScript知ってる人は、かなり少ない記述で3D表示できてるのがわかるはず。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>three.jsを使おう</title>
<script src="three.js"></script>

// 描画領域に表示する3D空間を撮影するカメラを決定
camera = new THREE.PerspectiveCamera( 45 ,

frame.clientWidth / frame.clientHeight , 1 , 10000 );
       camera.position.set(0, 50, 100);
       camera.up.set(0, 1, 0);
       camera.lookAt( {x:0, y:0, z:0 } );

// 3D空間を用意
scene = new THREE.Scene();

       //   用意した3D空間に光源を投入
   light = new THREE.PointLight(0xFFFFFF, 2, 300);
       light.position.set( 100, 60, 80 );
       scene.add(light);

       arrengeObjects();
       loop();
   }

   //   3D空間に物体を配置       立方体と球
   function arrengeObjects() {
       //   立方体
       cube = new THREE.Mesh(
           new THREE.CubeGeometry(50,50,50),
           new THREE.MeshLambertMaterial({color: 0xffffff}));
       scene.add(cube);
       cube.position.set(0,0,0);

       //   球
       sphere = new THREE.Mesh(
           new THREE.SphereGeometry(20,20,20),
           new THREE.MeshLambertMaterial({color: 0xff0000}));
       scene.add(sphere);
       sphere.position.set(0,20,0);
   }

   //   一定間隔で繰り返す作業（cubeを回転）
   var t = 0;
   function loop() {
       t++;
       cube.rotation.set(0, 0, t/100);
       renderer.clear();
       renderer.render(scene, camera);
       window.requestAnimationFrame(loop);
   }

</script>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

　ちなみに、Safariの環境設定の詳細タブにある「メニューバーに"開発"メニューを表示」にチェックをつけると、メニューバーに"開発"メニューが表示されるんで、そこから「ソースを表示」を選べばSafari上で直接中身を見ることもできます。

というか、この開発メニューがかなり便利なのよ。

ソース見るどころかJavaScript用のデバッガまである。

　で、この開発画面ソースファイルの項目にcube-600.html以外に、three.jsてのが見えると思うけど、このファイルが少ない記述で3D表示できている理由です。

　three.jsは煩雑なWebGLの制御を請け負ってくれるライブラリで、iOSで言えばScene Kit（ごく一部の人にしかわからん例えだが…）みたいなもんです。

　直接WebGL使うなら必要ないけど、世界的にメジャーで本も出てるんでオススメ。

　使う場合は

って感じで指定するだけですが、当然three.jsファイル自体が必要となり、私もサイト内に置いて（実際のcube-600.htmlでは、同じ階層にjsってフォルダ作って、そこにthree.jsを置いてるので"js/three.js"ってなってる）ます。

　このthree.jsファイル自体は下のサイトからdownloadして解凍したフォルダのbuildからコピーします。

http://threejs.org

　ここね↑

buildフォルダの中に入ってるよ。

　ま〜、JavaScriptファイルなんで、コピーしなくてもネット上で公開されてる場所に置かれてるthree.jsファイルへのURL書けばいいんだけど、リンクされた側は

大迷惑なんでやめるように。

　相手にDDoS攻撃してるようなもんだからね。やめましょう。

　で、このthree.jsファイルさえあれば、あとはHTMLファイルをテキストエディタで作れば、自宅のパソコン上で簡単に3D表示プログラミングをして遊べます。

　例えば、仮にデスクトップ上にWebGLLabという名前の作業用フォルダ（別にデスクトップをそのまま作業用フォルダとして使ってもいいけど）を置いたとして、そこにthree.jsファイルをコピー、でもって自分で適当にthree.jsを使うJavaScriptを書いたHTMLファイルを用意すれば、そのHTMLファイルをダブルクリックかSafariの画面にドラッグ＆ドロップすることで3D画面が表示される。

　もしmacOS付属のテキストエディタで編集する場合は、新規作成直後に、フォーマット>標準テキストにするメニューで、標準テキストにしておくように。保存時のエンコードはUTF8ね。

　ちなみにこいつは、振り子を物理シミュレーションしたアニメーション。

振り子

　ソースファイルはこれ。

http://www.tetera.jp/xcc/ameba/src/lab.html.zip

　以下を参考に書いてみますた。

HTML5による物理シミュレーション環境の構築～WebGLライブラリThree.js 入門

　こっちのサイトでは精度上げるためにルンゲクッタ使ってますが、私のやつは「んじゃオイラーだと、どんだけダメなんだろ」ということを試すつもりで素のオイラーで実装してます。

　JavaScript読める人は、参考のサイトを読んでルンゲクッタに差し替えてみるといいです。

　説明は次回、じゃまた。

　暗号もそのうち再開。

WebGLでいきますぜい