2019年1月1日火曜日

トップページのつもりのリンク集

Bloggerによるブログ:
Siouxcitizen's Blog Part1 ココです
Siouxcitizen's Blog Part2
Siouxcitizen's Blog Part3

旧ブログ:  Siouxcitizen's Blog

Twitter: siouxcitizen on Twitter
Flickr: siouxcitizen Photostream

Qiita: siouxcitizen Qiita items
旧jsdo.it: siouxcitizen - jsdo.it - Share JavaScript, HTML5 and CSS
新jsdo.it: siouxcitizen2 - jsdo.it - Share JavaScript, HTML5 and CSS
Naver: jsdo.it HTML5 プログラムリスト インデックス
 Naverに自分のこれまでのjsdo.it投稿のHTML5プログラムリストをいくつかまとめてみました

自分のアカウントのあるサイトへのリンク集をこのブログのトップに置きたかったけれど、やり方がよくわからなかったのでブログエントリの投稿日時をムリヤリ進めてここに表示されるようにしてみました。。。

2018年12月6日木曜日

Babylon.jsリンクいろいろ 日本語版

長くなってきたので、英語版と日本語版をわけました。
Babylon.jsリンクいろいろ 英語版

■■■英語版ヘッダーより Start■■■■■■■■■■■■■■■■■■■■■■■■■
 前回前々回のブログエントリのBabylon.jsプログラム作成・投稿時の自分への動機付け、参考等にした、Babylon.js関連のリンクを備忘録的に記録しておきます。
■■■英語版ヘッダーより End■■■■■■■■■■■■■■■■■■■■■■■■■

日本語でのBabylon.jsリンクいろいろ

■■■2018年■■■
ICSさんのサイト
Babylon.jsを使用した本格的なゲーム作成とその技術的なことについての説明をされています。 今回はこのサイトを見て触発されて、久しぶりにBabaylon.jsによるプログラム作成・投稿となりました。
CEDEC2018発表資料 「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 Babylon.jsとBISHAMON WebGL版の合成
WebGLフレームワーク「Babylon.js 3.3.0」リリース!VR向けGUI対応、パーティクルエフェクト強化、動画キャプチャー機能など
スライド


CrossRoadさんのサイト
Babylon.jsと他のソフトウェア・技術との連携について説明されています。 次にUnityを使うときには何か自分でも試してみたいと思うようになりました。
Babylon.js向けデータをUnityから出力する
Babylon Tool KitによるUnityプロジェクトの変換検証
UnityからエクスポートしたBabylon.jsデータの制御方法

Babylon.jsでナイトプールを作って、Unityとの作りやすさを整理しました
Blenderでロボットにボーンとモーションをつけて、Babylon.jsで再生させる方法


■■■2015年12月~2016年1月頃■■■
マイクロソフトのMSDNにある、Babylon.jsによるボーリングゲーム作成記事の日本語訳です。
December 2015
ゲーム開発 - Babylon.js: 基本的な Web ゲームのビルド
January 2016
ゲーム開発 - Babylon.js: 初めての Web ゲームを強化する高度な機能


■■■2015年■■■
3年ほど前のQiitaの記事ですが、3Dダンジョンをアニメーション付きミクさんが移動するプログラムを公開されています。 
Babylon.js で WebGL プログラミングしたら、 Unity, MMD モデルの変換で苦労した話


■■■他 不定期期間■■■
WebGL総合取扱い - WebGL 総本山 -(webgl.souhonzan.org) さんより
Babylon.js のタグがついた記事一覧

またそこからリンクのあるSRETKSさん関連のサイト
SRETKS
では、
左上にある選択肢 → LAB → LABにあるプログラム一覧から選択 → LAUNCH
でいろいろなプログラムを選択して実行・表示できるようです。

noteにはSRETKSさんによるBabylon.jsについての記事もあるようです。
PBRでブラウザでもリアルな表現をしよう!


■■■おまけ■■■
cx20さんのサイト
Babylon.js で地球を回してみるテスト
 具体的にこのサイトが、というわけではないですが、jsdo.itで見かけたcx20さんのBabylon.jsのコードの数々が、自分に最初にBabylon.jsってなんだ? Babylon.jsをちょっと触ってみようかな、と思わせてくれるきっかけになりました。
 今回のBabylon.jsのプログラム作成・投稿時にもglTFについてのアドバイスを頂きました。

2018年12月4日火曜日

Babylon.jsリンクいろいろ 英語版

長くなってきたので、英語版と日本語版をわけました。
Babylon.jsリンクいろいろ 日本語版

 前回前々回のブログエントリのBabylon.jsプログラム作成・投稿時の自分への動機付け、参考等にした、Babylon.js関連のリンクを備忘録的に記録しておきます。

英語でのBabylon.jsリンクいろいろ

Babylon.js 本家サイト(英語)
Babylon.js 本家サイトです。 デモ、ドキュメント、等充実しています。
下記のBabylon.jsのPlaygroundともよく連携していて、今回Babylon.jsのプログラム作成・投稿作業で新しいことを試そうとする場合、かなりの部分がこのPlaygroundのコピペからプログラム作成をスタートする、といった流れになりました。
Babylon.js Playground


Babylon.jsの状況の参考 その①
JavaScript Game Engines(英語)
GithubにおけるJavascriptゲームエンジンのスター獲得数が表示されています。
Babylon.jsは3Dゲームエンジンの中ではGithubのスター獲得数が最も多いよう。
2Dゲームエンジンの 
・pixijs / pixi.js (スター獲得数 20960)
・photonstorm / phaser (スター獲得数 23331)
を含めての全体でも
・Babylon.js(スター獲得数 7918)
は3番目にスターを獲得しているようです。※スター獲得数は20181204時点のものです
 ちなみにThree.jsはこの選択肢にはいっていないようですが、世間一般ではThree.jsはあまりゲームエンジンとは見られていないものなんでしょうか???


Babylon.jsの状況の参考 その②
HTML5 GAME DEVS(英語)
 Babylon.jsによるプログラムの作成・投稿作業中、Babylon.jsの疑問点についての検索からよくたどり着いてお世話になったサイトです。
 このHTML5によるゲーム作成についてのサイトでは、フォーラムでのFrameworksについての投稿数はBabylon.jsが最も多いようです(使いづらい、わかりづらい、といったことが多いのが理由かもしれませんが。。。)。


Babylon.jsの状況の参考 その③
HTML5 Game Engines(英語) Which HTML5 Game Engine is right for you?
 ここでのBabylon.jsはトップ3のゲームエンジンのひとつのようです。3Dのゲームエンジンではトップなんかな。
 ちなみにトップ1、2のGDevelopとConstructはプログラムをせずに2Dゲーム作成ができるゲームエンジンのようです。 試してませんが、RPGツクールMV、アクションゲームツクールMV、Plicyにあった2Dアクションゲーム作成の機能、といったものに近い感じの機能を提供してくれているのでしょうか? 少し気になりました。 


2018年12月2日日曜日

CodePenにBabylon.jsによるプログラムを投稿

 前回エントリ「jsdo.itにBabylon.jsのよる3Dプログラムを投稿」のプログラムを基本コピペでバックアップ的にCodePenにも投稿してみました。

 投稿したプログラムの一覧を今回もNaverまとめで作成しました。 3Dファイルの読み込みが重いせいか、サムネイルの画像が自動に生成されない場合が多く、サムネイル画像ほとんどないですが。。。
以下です。

Naverまとめ
CodePen投稿コードまとめ Babylon.jsで3D表示

 CodePenのPostsという機能でもプログラムの一覧をまとめてみましたが、テキストのタイトル名にリンクを貼っただけのもので、画像のひとつもないのでそっけない感じの一覧となりました。 Postsは本来的にはブログ的な使い方をするもの?
そんなテキストだけの一覧は以下になります。

CodePen Posts
Babylon.js v3.3.0 Practice

2018年11月28日水曜日

jsdo.itにBabylon.jsのよる3Dプログラムを投稿

 タイトルにあるようにjsdo.itに、Babylon.jsという3Dライブラリを使用したプログラムをいつくか作成してアップロードしてみました。

 前にも、自分のNaverまとめ「 jsdo.it投稿コードまとめ Babylon.jsで3D表示その1
 」にまとめているようにBabylon.jsによる3Dプログラムを作成していましたが、今回以下のサイトでBabylon.jsを使いこなしてのゲーム開発について説明されているのを見て、久しぶりにBabylon.jsによるプログラムがしてみたくなりタイトルにあるようなプログラム投稿となりました。

CEDEC2018発表資料 「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 Babylon.jsとBISHAMON WebGL版の合成
WebGLフレームワーク「Babylon.js 3.3.0」リリース!VR向けGUI対応、パーティクルエフェクト強化、動画キャプチャー機能など


作成して投稿したプログラムの、画像サムネイル付きのNaverまとめでの一覧は以下になります。

jsdo.it投稿コードまとめ Babylon.jsで3D表示その2
jsdo.itに投稿したBabylon.jsバージョン3.2による3Dプログラム
約15個のプログラムの一覧を表示しています

jsdo.it投稿コードまとめ Babylon.jsで3D表示その3
jsdo.itに投稿したBabylon.jsバージョン3.3による3Dプログラム
約70個のプログラムの一覧を表示しています

 今回久しぶりに使用したBabylon.jsでは、glTFという3Dモデルのファイルフォーマットがアニメーション付きのものも含めて非常によく表示できたと感じました。
 物理演算もOimo.jsやCannon.jsといった物理演算ライブラリをラップして使えるようです。 
 あとは、個人的にですが、Three.jsと比べてGUIの機能がかなりBabylon.jsライブラリ自体の機能として取り込まれていて、ゲームなどのインターフェースが作りやすそうだと感じられました。


 以下、投稿順とは一致してませんが、おおまかな区分と説明で分類してみたjsdo.it投稿プログラムの一覧です。 Babylon.jsのバージョンは3.3.0でのものです。

区分は以下のようになっています
①基本機能
②GUI機能とSound機能
③Tween的アニメーション機能
④glTFファイル形式の3Dモデル表示
⑤glTFファイル形式のアニメーション付き3Dモデル表示
⑥glTFファイル形式の3DモデルアニメーションをGUIボタンで切り替え
⑦babylon形式の3Dモデルを表示


①基本機能
基本的な機能、単純な3Dオブジェクトを表示したり、ただテクスチャをそれらに貼り付けて表示する機能を試したプログラムの一覧です。
Babylon.js v3.3.0 でBoxを表示

Babylon.js v3.3.0 でSphereを表示

Babylon.js v3.3.0 でPlaneを表示

Babylon.js v3.3.0 でCylinderを表示

Babylon.js v3.3.0 でTorusを表示

Babylon.js v3.3.0 でTorusKnotを表示

Babylon.js v3.3.0 でLinesを表示

Babylon.js v3.3.0 でテクスチャを貼り付けたPlaneを表示

Babylon.js v3.3.0 テクスチャを貼り付けたBoxを表示

Babylon.js v3.3.0 でテクスチャを貼り付けたSphereを表示


②GUI機能とSound機能
Babylon.jsによるラベルやボタン表示の機能、サウンド再生機能、3Dオブジェクトをクリックしたときの機能、Cannon.jsでの衝突判定、等を試しています。
Babylon.js v3.3.0 で3D GUI機能テスト

Babylon.js v3.3.0 でGUI機能テスト

Babylon.js v3.3.0 で3D GUI(MeshButton3D)機能テスト

Babylon.js v3.3.0 でSound再生機能テスト

Babylon.js v3.3.0 でSound on Mesh再生機能テスト

Babylon.js v3.3.0 でGUIのボタン・ラベルの機能いろいろテスト

Babylon.js v3.3.0 でGUIボタンでBox操作してみるテスト

Babylon.js v3.3.0 で衝突判定つき3Dオブジェクトを操作してみるテスト

Babylon.js v3.3.0 でカメラの位置操作を対象オブジェクト周りでできるようにしてみるテスト

Babylon.js v3.3.0 で回転・前進操作を対象3Dオブジェクトに設定してみるテスト

Babylon.js v3.3.0 でArcRotateCameraの位置操作を対象オブジェクト周りでできるようにしてみるテスト

Babylon.js v3.3.0 のTrigger機能で3Dオブジェクトへのクリック・タッチ判定テスト

Babylon.js v3.3.0 でClick/Touch処理の3Dオブジェクトへの追加テスト


③Tween的アニメーション機能
Tweenという名前で呼ばれている、プログラム上で操作対象の動きを指定する機能を使用してみました。 Babylon.jsではAnimationという名前でそのTween的機能が提供されているようでした。
Babylon.js v3.3.0 でAnimation

Babylon.js v3.3.0 でAnimationその2

Babylon.js v3.3.0 でAnimationその3


④glTFファイル形式の3Dモデル表示
glTFというファイル形式の3Dモデルを表示しています。 最初にBabylon.jsをさわりはじめたころは、あまりうまく表示できず一度挫折しましたが、今回のBabylon.jsのテストではほぼ問題なく表示できました。 今回作成したBabylon.jsによるプログラムの大部分はglTFによる3Dモデルの表示になっています。
Babylon.js v3.3.0 でMagicaVoxelで作成した3DモデルをglTFファイルに変換して表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その2

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その3

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その4

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その5

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その6

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その7

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その8

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その9

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その10

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その11

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その12

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その13

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その14

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その15

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その17

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その20

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その21

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その22

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その24

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その27

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その28

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その29

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その32

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その34

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その36


⑤glTFファイル形式のアニメーション付き3Dモデル表示
glTF形式のアニメーション付き3Dモデルを表示しています。 今回は、アニメーション付きのものまでサクッと簡単に表示できてしまいました。 3Dモデルの読み込み時、アニメーション時に処理重い場合はありますが。
Babylon.js v3.3.0 でglTFファイル形式アニメーション付き3Dモデルを表示

Babylon.js v3.3.0 でglTFファイル形式アニメーション付き3Dモデル(重め)を表示

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その16

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その18

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その19

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その23

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その25

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その26

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その30

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その31

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その33

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その35

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その37


⑥glTFファイル形式の3DモデルアニメーションをGUIボタンで切り替え
Babylon.jsの機能で表示できるGUIボタンで、3Dモデルのアニメーションを切り替えられるようにしてみました。 ゲームなんかで3Dモデルのアニメーションを切り替えるのに利用できるかもしれません。
Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その38

Babylon.js v3.3.0 でglTFファイル形式3Dモデルを表示その39


⑦babylon形式の3Dモデルを表示
Babylon.jsのbabylon形式3Dファイルを表示しています。 表示だけ、アニメーション付き、アニメーション切り替え機能付き、とあります。
Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示
3Dモデルのアニメーションとその切り替え機能付き

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その2
3Dモデル表示のみ

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その3
3Dモデルのアニメーション

Babylon.js v3.3.0 でbabylonファイル形式3Dモデルを表示その4
3Dモデルのアニメーション



あとはこのプログラム
ES6(ES2015)ではじめてのBabylon.js Ver.3.2.0 元ネタ
のように、ECMAScriptによるBabylon.jsのプログラムもできるようなので、そのうち気が向いたらECMAScriptによる書き直しなんかもやってみるかもです。

2018年9月22日土曜日

Sketchfabに登録・投稿

 Sketchfabという3Dモデルを投稿(販売も?)できるサイトに登録して、MagicaVoxelというドット絵のような3Dモデルを作成できるソフトで作ったモデルを投稿してみました。

その3Dモデル投稿しているサイトはこちらです。

https://sketchfab.com/siouxcitizen

  
 投稿するときに少しだけ悩んだので、それについてもメモしておきます。 しばらくすると内容忘れて、また同じことに悩みそうな自分に向けて。

 MagicaVoxelで作成した3Dモデルをobj形式のファイルとして出力した場合、Sketchfabへのアップロード時には、OBJファイル、MTLファイル、TGAファイルの3つのファイルをアップロードする必要がある。 以上がメモです。

 3Dモデルの本体となるOBJファイル、テクスチャになるTGA画像ファイル、そのOBJファイルとTGAファイルを関連付けるMTLファイル、後でゆっくり考えてみれば当然な3ファイルでしたが。。。

BloggerとGoogleサイトにGoogle Analyticsを設定しました

 Bloggerで作成しているこのブログとGoogleサイトで作成しているWebサイトにGoogle Analyticsを設定してみました。

 以下のサイトを参考させていただきました。

 ・BloggerおよびGoogleサイトにAnalyticsを導入する
 
 ・新しいGoogle Sitesを使い倒してみた

 上記2サイトのおかげか昔一回設定したときの記憶に比べて、はるかに簡単に設定できました。

 設定に必要なことがちゃんと登録されていれば、Google Analyticsの設定は24~48時間後?に反映されるようです。 うまく設定できてるいいな~。 ちょい自信ないが。