タグ WebGL が登録されている動画 ： 95 件中 65 - 95 件目
種類:
- タグ
- キーワード
対象:
ブラウザ上で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を踊らせてみる その7 (JavaScript & WebGL)
前: sm25953917 次: sm26008748
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
音楽を鳴らして、音楽と同期を取れるようにした。
動画中で使用している素材は親作品を参照。
使用ライブラリ (いずれ自前のものに差し替えたい)
- glMatrix(行列演算)
- Ammo.js(物理演算)
- Whammy.js(動画生成)
物理演算の処理がまだおかしいらしく、
そばかす魔理沙のスカートが暴れていますが気にしないでください。
デモで使える素材を探すのが大変。
東方風STGブラウザゲーム→mylist/38547755
【MMD】ブラウザで踊ってもらった（その２）【WebGL】
sm10317713の続き。
変更点は、キーボードでのモデル歩行、表情、簡単なモーションブレンディングです。
動きが変なのは、IKの計算がひどいからです。
PMD、VMDファイルをそのままJavaScriptで読み込んでいる、というのがちょっとした自慢だったり。
お借りしたモデル：初音ミク、鏡音レン（あにまさ氏）
お借りしたモーション：sm7936101
ソースとサンプル公開しました。
http://darkhorse2.0spec.jp/dh3d/
その３：sm12454120。その他：mylist/30335916
ブラウザ上で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
ネットワークトラフィックを可視化してみた
ネットワークトラフィックの可視化。棒が長いほど通信量が多い。計測地点は東京の某所。音源は次の2曲。てってて～原曲、じゅるP氏作：Gene-Revolutionary
【ニコニコ自作ゲームフェス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
【MMD】ブラウザで踊ってもらった（その７）【WebGL】
ブラウザで動く3D、WebGLのライブラリ製作記。
今回は少し頑張ってサンプルを作りました。
サンプルはこちら↓ ミンナニハナイショダヨ！
http://darkhorse2.0spec.jp/dh3d/sample/iq.php
その６：sm16924766、その他：mylist/30335916、その８：sm29243257
追記：Nac様 宣伝ありがとうございます！
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 + ARをブラウザ上で
Three.js + jsartoolkit5 (動画中ではさらに + A-Frame)
デモ: https://takahirox.github.io/mmd-ar/examples/barcode.html
(PC推奨。Androidでも動く？)
前: sm30124044 (ブラウザ上でMMDミクのライブをリアルタイム処理で)
次:
マイリスト: mylist/49125767
東方風STGブラウザゲーム→mylist/38547755
【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
【JavaScript】弾幕ゲーの3面作った【WebGL】
例の弾幕ゲー ( sm19757110 )の3面を作りました。
以前のステージがわりとヌルめだったので今回はちょっと激しめにしてみました。
渋くて熱い、すばらしいBGMはニコニ・コモンズのこちら( nc52497 )からお借りしています。
プレイはこちらから → http://9leap.net/games/2877
ヘタクソなデモプレイで申し訳ないorz
腕に覚えのあるシューターの方々はぜひハイスコアランキングへ！
【MMD】ブラウザで踊ってもらった（その１）【WebGL】
はじめまして。WebGLを使ってみました。
お借りしたモデル：初音ミク（あにまさ氏）
お借りしたモーション：sm7936101
表情、物理演算、その他いろいろ未実装。IKも微妙...
ソースはそのうち公開したいです。→公開しました！
http://darkhorse2.0spec.jp/dh3d/
その２：sm10802109。その他：mylist/30335916
ブラウザ上で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
東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その7
0から作成中。
使用ライブラリはWebGLのための行列計算ライブラリglMatrixのみ。
詳細やプレイ(only Chrome)は下記リンク先。
リプレイをサーバに登録することができるのでお試しあれ。
http://d.hatena.ne.jp/takahirox/20140504/1399222894
前: sm22137339 次: sm24664609
mylist/38547755
更新点はマイリスト参照。使用素材はその1の親作品参照。
背景レイヤにWebGLを採用し、3D表現が可能になりました。
ブラウザMMDビューア→mylist/49125767
東方風STGブラウザゲームをJavaScriptとHTML5で作成中 その8
Chrome上でプレイ可能。協力プレイの接続方法はこちら。
http://d.hatena.ne.jp/takahirox/20140920/1411190305
前: sm23482639 次:
mylist/38547755
更新点はマイリスト参照。使用素材はその1の親作品参照。
音・絵は借り物で、プログラムは0から作成(WebGL用行列計算ライブラリ除く)。
念願のオンライン協力プレイに対応。
一人で二機の操作は無理だった。今度友人に協力してもらって撮り直すかも。
あとせっかくWebGL使ってるから自機視点に(無理やり)対応してみたり。
ゲームの完成度を上げる気はなくて、ブラウザゲームの機能面・性能面での実験場になってます。
質問あったらブログにどうぞ。
ブラウザMMDビューア→mylist/49125767
【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
【ニコニコ自作ゲームフェス3】 Phantastic Tryno World Episode 2 【万ナる20】
音と光のシューティング
【タイトル】Phantastic Tryno World
【ジャンル】「ＢＧＭ志向ノリノリシューティング(笑)」
【動作環境】Google Chrome、Firefox
【ＵＲＬ 】http://www.geocities.jp/warotarock/ptw_beta/
WebGL製のブラウザゲームです。
ジャンプと左右回避で飛び回ってＢＧＭのテンポに合わせて撃ちまくります。
プレイ時間は5分50秒くらいです。（一発でクリアした場合）
この動画は「万年エターナるが3Dシューティングを作ります」その20にも当たります。
ゲームを完成させたことがない人が今度こそはと地味に頑張っております。
音楽素材：Cyber-Rainforce様 remain of old world
効果音素材： ザ・マッチメイカァズ様
[リスト]mylist/33115940
【ニコニコ自作ゲームフェス5】 Phantastic Tryno World Episode 3 【万ナる26】
音と光のシューティング
【タイトル】Phantastic Tryno World Episode 3
【ジャンル】「３Ｄノリノリ(笑)ミュージックシューティング」
【動作環境】Google Chrome（Firefoxは音がちょっと変ですが動きます）
【ＵＲＬ 】http://www.geocities.jp/warotarock/ptw_beta/
【プレイ時間】5分40秒くらい
WebGL製のブラウザゲームです。
ジャンプと緊急回避で飛び回ってＢＧＭのテンポに合わせて撃ちまくります。
音楽素材：Cyber-Rainforce様 powder snow -trance version-, raw men 2009
効果音素材： ザ・マッチメイカァズ様
【いつも見てくれているかた向け】
（地味なので）動画で説明の無い変化
・自動連射の実装
・コンテニューの実装
[リスト]mylist/33115940
そばかす式魔理沙にブラウザ上で踊ってもらった (JavaScript & WebGL)
前: sm26166836 次: sm27662763
mylist/49125767
デモ: http://takahirox.github.io/mmd-viewer-js/
特に更新はないけど、そばかす式魔理沙ver0.2が素晴らしかったのでつい。
動画中で使用している素材は親作品を参照。
Three.jsとかjThreeとかの3D CGライブラリは使ってません。
0からガリガリ書いてます。
デモサイトでは、その特性上再配布可能なデータしか置いていません。
そばかす式モデルを動かしたい人はローカル環境で試してください。
そばかす式モデルは「軽い」「表情豊か」「動かすと映える」と、
リアルタイムで動かすにはとても優秀なんですよね。
東方風STGブラウザゲーム→mylist/38547755
追記：無料広告チケットで宣伝してみました。
【JavaScript】弾幕ゲーム作ってみた【WebGL】
JavaScriptで弾幕ゲー作ってみました。
ここでプレイできます→ http://9leap.net/games/2877
3面作りました→ sm19854750
技術的な話
WebGLを使って描画しています。
その為、表示できるスプライトの数が通常のCanvasよりも非常に多くなっており、わりとストレスなく弾幕を描画できています。
ソースも公開中。興味のある人は見てみてください。
ブラウザ上で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
【ケムリクサ格闘ゲームを作ってみた】りょう 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を扱えるようにした (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
【天地創造】パーリンノイズとフラクタルで山岳の自動生成
これのアプリ gm6016
ノイズを組み合わせて山を作った。
リメイク版がある sm33303687
YouTube版
http://www.youtube.com/watch?v=CpkNkNOGVmk
【天地創造】L-systemとフラクタルで木の自動生成
これのアプリ gm6016
L-Systemで木を作った。
YouTube版
http://www.youtube.com/watch?v=vA9xtC11rRA
【天地創造】パーリンノイズとフラクタルで雲の自動生成
これのアプリ gm6016
ノイズで雲を作った。
YouTube版
http://www.youtube.com/watch?v=pwsgFSLZbzE
【あさまクエスト】鉄球で建物を壊すシミュレーション「突入せよ!あさま山荘事件」/3D
これのゲーム gm5333
あさま山荘３回目はブラウザ上の3D物理演算。
YouTube版
http://www.youtube.com/watch?v=qXC2qxMYLYo
【天地創造】チューリングパターンで生物の体表面の模様を自動生成
これのアプリ gm6016
シマウマとキリンの模様を作った。
YouTube版
http://www.youtube.com/watch?v=f3pmg5v0E7w
詳細
300*300セル
パラメータは順に、初期青の%、青化物質分布σ2、赤化物質分布σ2、青化物質対赤化物質の%、分布縦横比
シマウマ 0.5,4.5,45,60,4
キリン 0.3,1,10,24,1