タグ WebGL が登録されている動画 ： 94 件中 1 - 32 件目
種類:
- タグ
- キーワード
対象:
技術検証：UnityのWebGLビルドでWebXR
UnityWebXRのサンプルプロジェクトを使った技術検証です。
WebGLビルドでXRを実現できるということで、VRMとIKを追加して
Meta Quest 3 のブラウザで一通りの操作を試してみました。
（部屋が映るため、映像はVR環境です）
VRMをハンドトラッキングで動かす体験は、想像以上に人形遊びをしている感覚があって楽しいです。
VRMViewMeisterも同じWebGLビルドなので、近い将来のバージョンで実装を決定しました。
本アプリならVRMAnimationとは違ってVRM以外のモーションデータも作成できます。
例えば・・・
XR環境で実物大のVRMとオブジェクトを触りながらモーションを作り、その場で再生して3Dアニメーションを楽しむことができるようになるかも？
MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) で動かしてみた #2
MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) 上で動かしてみました。
前回の投稿からフレームワークがバージョンアップし、ゲームがかなり快適に動くようになったので前回の動画と比較しつつご覧いただくと分かりやすいと思います。
開発や公開にあたっての説明をブログに纏めました。
その２：https://blog.sorceryforce.net/?p=2589
その１：https://blog.sorceryforce.net/?p=2556
前回の動画：sm41154441
ゲーム「リトルセイバー」について : https://sorceryforce.net/little-savior
リトルセイバー関連動画 : mylist/63069799
MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) で動かしてみた
MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) 上で動かしてみました。
移行を試してみた理由や使ったフレームワーク、移行において作り替えた点などについては後でブログに纏めます。
→ブログに纏めました：https://blog.sorceryforce.net/?p=2556
ゲーム「リトルセイバー」について : https://sorceryforce.net/little-savior
リトルセイバー関連動画 : mylist/63069799
Unityでブロック崩し作りました！
現在は5ステージしかありませんが、今後アップデートで追加しますので楽しみにしていてください。
このゲームはこちらで遊べます→gm19351
ゲームセンター「たかまはら」
JavaScriptで作ったゲームを公開しております
https://floradgennes.web.fc2.com/GameCenter/index.html
ツイッター
https://twitter.com/JohnnyFakaHioki
エアリスのテーマをアレンジ／JavaScriptで3Dスペクトラムアナライザーを自作してみた
JavaScriptでスペアナを実装しました。スペアナのパラメータはWeb Audio APIに標準含まれるAnalyserNodeを使っています。（本来であればフーリエ変換などの知識が必要になる）
で、PS版ヴァルキリープロファイルのサウンドテストのBGMプレイヤーの画面みたいな波形表示にしたかったのでWebGLを用いて奥行きを加え3D化しました。
初めての3Dプログラミングなので色々間違ってる気がしてならない。
（フレームごとに平面ポリゴンを作成してそこにその時点のCanvasで描画したスペアナ画像をテスクチャとして貼り付けて手前に追加し、古くなったポリゴンはその都度削除するという実装）
ちなみに、演奏している曲は、FF7のエアリスのテーマのアレンジです。だいたい、sm2863205 を作ったときと同時期に作ったやつ。当時公開するつもりだったけど、自分的には微妙な出来だったのでズルズルと公開が伸びて放置していました。
【ケムリクサ格闘ゲームを作ってみた】りょう vs りく
これは、MMD素材とSystem Animator 11 (WIP)を使用して構築されたシンプルな3D Web格闘ゲームのテクニカルデモです。Google ChromeとFirefoxで動作します。次にケムリクサ三姉妹RPGゲームをやりましょうか ^o^
https://sao.animetheme.com/?cmd_line=/TEMP/DEMO/kemurikusa_battle_arena01
キーパッドを使用して攻撃コンボを入力する。
おまけ：最初に任意のMMDモデルを含むZIPファイルをドロップすると、デフォルトのモデルが置き換えられます。
-----------------------
System Animatorについて
GitHub (System Animator 11):
https://github.com/ButzYung/SystemAnimatorOnline
ホームページ:
https://www.animetheme.com/sidebar/
twitter@butz_yung
【天地創造】パーリンノイズとフラクタルで山岳の自動生成(リメイク版)
計算で世界を生成する。
今回は暗いけど次回は空を作るので明るくなる。
むにむに別館のさらに別館(むにらぼ)
YouTube版 https://youtu.be/AOUzk9sRAvw
リメイク前のやつ sm20236103
【MMD格闘ゲームを作ってみた】初音ミク vs 重音テト
これは、System Animator 11 (WIP)を使用して構築されたシンプルな3D Web格闘ゲームのテクニカルデモです。Google ChromeとFirefoxで動作します。
http://www.animetheme.com/system_animator_online/SystemAnimator_online.html?cmd_line=/TEMP/DEMO/miku_battle_arena01
キーパッドを使用して攻撃コンボを入力する。
System Animatorホームページ:
http://www.animetheme.com/sidebar/
twitter@butz_yung
【FGO同人RPGを作ってみた】宮本武蔵と浮世京都
これは、System Animator 11 (WIP)を使用して構築されたシンプルな3D Web RPGです。Google ChromeとFirefoxで動作します。
http://www.animetheme.com/system_animator_online/SystemAnimator_online_FGO.html?cmd_line=/TEMP/DEMO/fgo_rpg01
このゲームの詳細については、以下のREADMEファイルをお読みください。
http://www.animetheme.com/system_animator_online/TEMP/DEMO/readme_FGO.txt
System Animatorホームページ:
http://www.animetheme.com/sidebar/
twitter@butz_yung
【ニコニコ自作ゲームフェス2018】オベン座の怪人
【ゲームタイトル】オベンザの怪人【クリア時間】１時間～２時間【動作環境】Windows、Firefox【ジャンル】3D脱出ゲーム【制作ツール】Unity2017【公開URL】https://s3-ap-northeast-1.amazonaws.com/thephantomoftheobenza/The_Phantom_Of_Obenza/index.html【スタンドアロン版】Webが上手くできない方はこちらもお試しください。https://www.freem.ne.jp/dl/win/16497【HP】https://dspse.amebaownd.com/ちょっと難易度高めの3Dアドベンチャーゲームです。2018/01/16 操作を改善しました。詳しくはこちらをご覧ください。https://dspse.amebaownd.com/posts/3388971?categoryIds=963384こちら答え合わせサイトも用意しましたので、良かったら見ながら遊んでください。https://dspse.amebaownd.com/pages/1494871/blog
【自作ゲーム】INVISIBLE
スマホアプリで一儲けしようと思い開発・リリースしましたが、
重いの操作性悪いので遊んでもらえないので
WebGLに出力しなおしました。
http://invisible.xof.jp/
130Mあります。大丈夫なんだろうか。
FireFoxかCrome推奨です。
【MMD】ブラウザで踊ってもらった（その11）【WebGL】
前回に引き続き、JSceneKitの紹介です。
JSceneKitを使って、MMDのモデル・モーションを表示するデモも作ってみました。
サンプルページはこちら↓ Chrome/Firefox/Operaで見てみてください。
https://magicien.github.io/JSceneKitExample/
https://magicien.github.io/JMMDSceneKitExample/public/ex1/
その10：sm31286633 その他：mylist/30335916
【MMD】ブラウザで踊ってもらった（その10）【WebGL】
完成を待っているとかなり間が空きそうなので、途中経過報告。
JSceneKit（SceneKitのJavaScript移植）の動作確認も兼ねて、Swiftで書かれたサンプルアプリをJavaScriptに移植しました。
今回はMMD要素が皆無ですが、今後MMDを表示するための準備ということで。
サンプルページはこちら↓ Chrome/Firefox/Operaで見てみてください。
https://magicien.github.io/JSceneKitExample/
その９：sm30962282 その他：mylist/30335916 その11：sm31737686
=====
更新：
・サンプル２でキャラクタが空に飛んでいく問題を修正しました。
・シェーダを色々修正しました。
MMD + ARをブラウザ上で
Three.js + jsartoolkit5 (動画中ではさらに + A-Frame)
デモ: https://takahirox.github.io/mmd-ar/examples/barcode.html
(PC推奨。Androidでも動く？)
前: sm30124044 (ブラウザ上でMMDミクのライブをリアルタイム処理で)
次:
マイリスト: mylist/49125767
東方風STGブラウザゲーム→mylist/38547755
【MMD】ブラウザで踊ってもらった（その９）【WebGL】
今まで作っていたライブラリ（DH3DLibrary）とは別ですが、MMDが表示できるWebGLライブラリ（JSceneKit）を作りました。
ライブラリ：https://github.com/magicien/JSceneKit
サンプルアプリ：https://github.com/magicien/ElectronMMDSample
その８：sm29243257 その他：mylist/30335916 その10：sm31286633
【自作ゲーム】遠心力！！地球大回転
■ストーリー
特に理由もなく地球が高速回転！
とてつもない遠心力が発生！！！！
そしてキミは何故かスーパーマンとなり、
ぶっ飛んでくるモノをキャッチして救出しよう！
目指せカンスト99999999円！！
■操作方法
マウスのみを使用します
・左右移動
マウスを左右に動かす
・パワーアップ（アイテムを所持している状態で）
左クリック
■ゲームURL
http://plicy.net/GamePlay/33756
■マイリスト
mylist/40385694
■ホームページ
http://tesshingames.com/
ブラウザ上でMMDミクのライブをリアルタイム処理で
前: sm30067053 (ブラウザ上でMMD編集とVRできるようにした)
次: sm31239935 (MMD + ARをブラウザ上で)
マイリスト: mylist/49125767
それなりに凝ったことができるようになってきました。
オンラインデモ
物理 http://takahirox.github.io/MMDLoader-app/index.html#app_physics
モザイク http://takahirox.github.io/MMDLoader-app/index.html#app_postprocessing_lowresolution
ライブ http://takahirox.github.io/MMDLoader-app/index.html#app_music_live
東方風STGブラウザゲーム→mylist/38547755
ブラウザ上でMMD編集とVRできるようにした (JavaScript&WebGL)
前(MMDxWebアプリ): sm279561563
次(ブラウザ上でMMDミクのライブをリアルタイム処理で) :sm30124044
マイリスト: mylist/49125767
やっぱりアニメーション編集もできたほうがいいですかね。
オンラインデモ
Editor http://takahirox.github.io/three.js.mmdeditor/editor/index.html
A-FramexMMD https://github.com/takahirox/a-mmd
Three.js MMD example https://threejs.org/examples/#webgl_loader_mmd
東方風STGブラウザゲーム→mylist/38547755
【MMD】ブラウザで踊ってもらった（その８）【WebGL】
ブラウザで動く3D、WebGLのライブラリ製作記。
4年前に作ったゲームをスマホでも操作できるようにしました。
ゲーム：http://darkhorse2.0spec.jp/iq/
ソース：https://github.com/magicien/IQRevenge
その７：sm19019276、その他：mylist/30335916、その９：sm30962282
X3DOMで墨絵調のレンダリングを実装してみた
卒業研究として，X3DOMで墨絵調のレンダリングを実装してみました．
HTMLで3D-CGが描けるWebGLがありますが，ちょっとハードル高いので簡単なX3DOMを使いました．
ブラウザ上で墨絵っぽい3DCGを表現することができます．
なんとなく墨絵っぽくできたのですがまだまだですね．
その他の卒業研究はこちら mylist/42793749
MMD x Webアプリ (JavaScript&WebGL)
前: sm27662763 次: sm30067053
mylist/49125767
デモ: http://takahirox.github.io/MMDLoader-app/index.html
Three.js r74に入るTHREE.MMDLoaderを使って、
サンプルアプリをいくつか作ってみました。
こんな感じに、リアルタイムに色々処理が可能になります。
エディタの方はまだまだまだ時間がかかりそうな感じ。
動画撮った後に、デモにアンチエイリアス処理追加したけど重くなったかも。
東方風STGブラウザゲーム→mylist/38547755
ブラウザ上でMMDを扱えるようにした (JavaScript & WebGL)
現状は「MMDデータを扱えるようにした」がより正確かも。
前: sm26268613 次: sm27956156
mylist/49125767
デモ: http://threejs.org/examples/#webgl_loader_mmd_audio
JavaScriptでMMDデータを扱えるMMDLoaderを作りました。
Three.js r74に入りました。
ブラウザ上でリアルタイムにMMDを踊らせたり、その他色々できます。
後半はまだまだ開発途中のブラウザMMDエディタの紹介。
Three.js EditorにMMDをサポートさせようとしているところ。
エディタデモ: http://takahirox.github.io/three.js.mmdeditor/editor/
Menu bar->Add->Miku
ブラウザMMDビューアアプリ作成で得たノウハウを
もっと多くの人が活用できるようにThree.jsに取り込んでもらおうと思ったのが始まりです。
東方風STGブラウザゲーム→mylist/38547755
そばかす式魔理沙にブラウザ上で踊ってもらった (JavaScript & WebGL)
前: sm26166836 次: sm27662763
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
特に更新はないけど、そばかす式魔理沙ver0.2が素晴らしかったのでつい。
動画中で使用している素材は親作品を参照。
Three.jsとかjThreeとかの3D CGライブラリは使ってません。
0からガリガリ書いてます。
デモサイトでは、その特性上再配布可能なデータしか置いていません。
そばかす式モデルを動かしたい人はローカル環境で試してください。
そばかす式モデルは「軽い」「表情豊か」「動かすと映える」と、
リアルタイムで動かすにはとても優秀なんですよね。
東方風STGブラウザゲーム→mylist/38547755
追記：無料広告チケットで宣伝してみました。
ブラウザ上でMMDを踊らせてみる その10 (JavaScript & WebGL)
前: sm26069436 次: sm26268613
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
複数モデル対応。影対応。ポストエフェクト追加。
複数モデルはさすがに重いので、動画中の物理演算が若干残念なことになってます。
実装したい機能は大体入れた感じ。
顔モザイクのアイデア元 https://twitter.com/i_saint/status/590815779802648577
動画中で使用している素材は親作品を参照。
Three.jsとかjThreeとかの3D CGライブラリは使ってません。
0からガリガリ書いてます。
東方風STGブラウザゲーム→mylist/38547755
ブラウザ上でMMDを踊らせてみる その9 (JavaScript & WebGL)
前: sm26008748 次: sm26166836
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
ステージ対応。ポストエフェクト対応。物理演算調整。
配布されているステージとポストエフェクトは思いの他重かったので、
GLSLを駆使してとりあえずそれっぽいものをいくつかこしらえてみました。
動画中で使用している素材は親作品を参照。
Three.jsとかjThreeとかは使ってません。0からガリガリ書いてます。
(物理演算と行列演算ライブラリは使っているけど)
動画の最後に前回の撮り直しが入ってます。
前回の物理演算は納得いってなかったんで。
足のピクピクはIK solverのバグです。
東方風STGブラウザゲーム→mylist/38547755
ブラウザ上でMMDを踊らせてみる その8 (JavaScript & WebGL)
前: sm25974661 次: sm26069436
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
エッジ対応。マウスによるカメラ制御対応。
動画中で使用している素材は親作品を参照。
使用ライブラリ (いずれ自前のものに差し替えたい)
- glMatrix(行列演算)
- Ammo.js(物理演算)
- Whammy.js(動画生成)
物理演算やIKのおかしさには目を瞑ってください。
60fps出る環境なら物理演算はだいぶましに見えます。
東方風STGブラウザゲーム→mylist/38547755
ブラウザ上でMMDを踊らせてみる その7 (JavaScript & WebGL)
前: sm25953917 次: sm26008748
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
音楽を鳴らして、音楽と同期を取れるようにした。
動画中で使用している素材は親作品を参照。
使用ライブラリ (いずれ自前のものに差し替えたい)
- glMatrix(行列演算)
- Ammo.js(物理演算)
- Whammy.js(動画生成)
物理演算の処理がまだおかしいらしく、
そばかす魔理沙のスカートが暴れていますが気にしないでください。
デモで使える素材を探すのが大変。
東方風STGブラウザゲーム→mylist/38547755
ブラウザ上でMMDを踊らせてみる その6 (JavaScript & WebGL)
前: sm25936936 次: sm25974661
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
Whammy.jsを使用し、直接動画ファイルを生成できるようにした。
音声は動画編集中に後から足しています。
動画中で使用している素材は親作品を参照。
使用ライブラリ (いずれ自前のものに差し替えたい)
- glMatrix(行列演算)
- Ammo.js(物理演算)
- Whammy.js(動画生成)
もっと再配布可能な音声、モデル、モーション、カメラモーションが増えると、
デモで使えて嬉しいんだけどな。
東方風STGブラウザゲーム→mylist/38547755
ブラウザ上でMMDを踊らせてみる その5 (JavaScript & WebGL)
前: sm25900381 次:sm25953917
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
使用ライブラリはglMatrix(行列演算)とAmmo.js(物理演算)のみ。
ようやく形になってきた感じ。
性能を今から倍くらいに上げたい。
動画はミクで実時間基準動作(50fpsしか出ないので、間に合わないフレームをスキップ)、
次にそばかす魔理沙で60fps動作、
最後に30fpsしか出なかったアリスを2倍速で。
7年前くらいに買ったノートPC上で動いています。
もっと軽いモデルが増えてくれると色々遊べて嬉しいんだけどな。
東方風STGブラウザゲーム→mylist/38547755