Siouxcitizen's Blog Part1: 3D

ラベル 3D の投稿を表示しています。すべての投稿を表示

2019年12月4日水曜日

jsdo.it投稿コードをCodePenにサルベージ完成

前回のエントリ「jsdo.it投稿コードをCodePenにサルベージ」からのものにいくつかjsdo.itからのサルベージコードを追加して完成としています。

以下のようになります。
かなり長いリストになっているかも、です。

CodePenに作成したこのまとめ的Postからのほぼコピペとなります。

Youtube API MV再生リスト

My Youtube Player List
→この動画再生リストはコード数が多いので別のPostとしてまとめているものへのリンクを張っています。

Youtube API MV再生リスト以外

英語リスニング用にIT企業創業者の大学卒業式スピーチのYoutube動画を連続再生

勉強用に東北大学での「マイケル・サンデルの白熱教室」動画リストを連続再生
勉強用に同志社大学小原克博講義「日本宗教」の動画リストを連続再生
勉強用に同志社大学小原克博講義「現代神学」の動画リストを連続再生
勉強用に同志社大学小原克博講義「一神教研究」の動画リストを連続再生
勉強用に筑波大学の「Java」講義の動画リストを連続再生

作業用に自分の田舎(兵庫県豊岡市)の動画リストを連続再生(長い動画メインVer.)
作業用に自分の田舎(兵庫県豊岡市)の動画リストを連続再生(長い動画メイン別Ver.)
作業用に自分の田舎豊岡市の竹野町の動画を連続再生
作業用に自分の田舎豊岡市のおんぷの祭典演奏動画を連続再生

秋田出身の先輩要望により「なまはげ」動画を連続再生

参考リンク

2019年3月9日土曜日

Unity使ってみましたその３

　Magica Voxelで作成したドット絵のような3Dモデルを使用して、Unityで取り込んで見ました。　3Dモデルとカメラまわりの機能以外は、基本的にはUnityの最初のチュートリアルとほぼ同じ機能です。

作成したものをunityroomへ投稿したものは以下になります。
Unity入門チュートリアル改

https://unityroom.com/games/webgl-upload-unity_tutorial_kai

以下、作業中に参考にさせて頂いたサイトへのリンクをメモとして残しておきます。

■■■■■ ① Magica Voxel作成の3DモデルをUnityに取り込み ■■■■■

主にこのサイトを参考にさせて頂きました。
・MagicaVoxel の 3Dドット絵を Unity に取り込むまで

その他参考サイト
・Magica Voxelで作ったオブジェクトをUnityで使うには
・MagicaVoxelでつくった3DモデルをUnityに取り込む
・Magica Voxelで楽しく簡単に3Dモデリングしてみよう（その1）
・Magica Voxelで楽しく簡単に3Dモデリングしてみよう（その2）

■■■■■ ② キャラクターコントロール ■■■■■

主にこのサイトを参考にCharacterControllerを使わずにキャラクターを動かすことにしました。
・CharacterControllerをつかってプレーヤーを動かす
・Character Controllerを使わずにキャラクターを動かす

その他参考サイト
・【Unity】CharacterControllerのMove()とSimpleMove()の使い分け
・CharacterControllerの説明
・人型3Dモデルを動かすまで（その4）
・キャラクターコントローラーを使う人型3Dモデルをジャンプさせる（その1：重力を加える）

■■■■■ ③ カメラ視点 ■■■■■
カメラの機能を作成するのには苦労しました。　以下のサイト等を参考にしていたと記憶しています。　後でソースコードも載せるかもしれません。

■カメラ追従
・キャラに追従するカメラ
・【Unity】オブジェクトについてくるカメラを作ったよ
・【Unity】プレイヤーにカメラを追従させよう！（3D）｜Camera入門④
・Unityでカメラの向きを基準に移動する方法と、追従して回転できるカメラの実装

■カメラ回転制限
・TPSのカメラの制限
・コインゲームを作ってるよ！[02]　視点移動を実現するカメラ回転
・【Unity】オブジェクトの移動範囲を制限するMathf.Clampの使い方
・カメラの垂直移動に角度制限をつけたい

　最近、MagicaVoxelを使い始めたころに参考にしていたサイトについて聞かれたことがあって、自分もほとんど忘れかけていて探し直すことになってしまいました。　

　なので、今後はそのようなことがないように、それら使い始めのころに参考にしていたサイトを備忘録的にメモしておきます。

①　MagicaVoxel→Blender→Unityでボクセルモデルを動かす①

②　【MagicaVoxel】お絵描き初心者でも簡単な３Dドット絵 - 使い方 -

といったサイトを最初に参考にしたように記憶しています。　かなり前のことで少し記憶があやふやですが。

①のサイトで概要をみて適当に触ってみてから、もう少し詳細な説明が必要になってから②のサイトを見ながら作業をしていたような記憶。

　サイトの記事自体は古い内容のものも含まれると思われますので、参照されるときはお気を付けください。

2019年3月7日木曜日

siouxcitizen's public fiddlesに２コード追加

タイトルのように自分のJSFiddleトップページに２コードを追加しました。

前回のブログエントリと同じように、Three.jsによるglTFファイル形式の3Dモデルのアニメーションを表示する2コードを追加しました。　以下のものになります。　3Dモデルデータの読み込みに少し時間がかかるかもです。
以下、その２コードへのリンクです。

Three.js r102 .glTF 3D Model Animation Display 02
.glbというファイル拡張子のglTF 3Dモデルのアニメーションを表示しています。

Three.js r102 .glTF 3D Model Animation Display 03
そのまんま.glTFというファイル拡張子のglTF 3Dモデルのアニメーションを表示しています。

今回の上記２コードの投稿にあわせて、前回投稿のコード１つの名称も以下のように変更しました。　以下になります。
Three.js r102 .glTF 3D Model Animation Display 01
3Dモデル用にGoogleが開発した？、DRACOという圧縮形式を使用するglTF 3Dモデルのアニメーションを表示しています。

すべてのコードを表示する自分のJSFiddleトップページは引き続き同じ以下になります。
siouxcitizen's public fiddles

2019年3月6日水曜日

siouxcitizen's public fiddles

タイトルのようにJSFiddleに自分のトップページ？のようなものを作りました。

前回ブログエントリで作成していた「Hello World」と表示するプログラムに加えて、Three.jsライブラリを使用した3Dモデルを表示するプログラム２つを、そのトップページ「siouxcitizen's public fiddles」に配置してみました。

以下になります。
siouxcitizen's public fiddles

ついでに、上記Three.jsライブラリを使用した3Dモデルを表示するプログラム２つへの直リンクも載せておきます。

Three.js r102 .glTF 3D Model Display

Three.js r102 .glTF 3D Model Animation Display

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の記事ですが、３Dダンジョンをアニメーション付きミクさんが移動するプログラムを公開されています。　
・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はトップ３のゲームエンジンのひとつのようです。3Dのゲームエンジンではトップなんかな。
　ちなみにトップ1、2のGDevelopとConstructはプログラムをせずに２Dゲーム作成ができるゲームエンジンのようです。　試してませんが、RPGツクールMV、アクションゲームツクールMV、Plicyにあった2Dアクションゲーム作成の機能、といったものに近い感じの機能を提供してくれているのでしょうか？　少し気になりました。　

2018年12月2日日曜日

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

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

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

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

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

CodePen Posts
Babylon.js v3.3.0 Practice

2018年11月28日水曜日

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

2018年9月22日土曜日

Sketchfabに登録・投稿

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

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

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

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

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

2017年12月25日月曜日

jsdo.itでThree.jsプログラムを投稿

登録: 投稿 (Atom)

Siouxcitizen's Blog Part1