WebGL

はじめに こんにちは！ＮＴＴドコモクロステック開発部の藤枝です！ この記事は、NTTドコモ R&D Advent Calendar 2023 23日目の記事です。 クリスマスの記事ということで、まずは皆様今年もお疲れ様でした！ 今年も残すところ残り僅かというところで、あと少し乗り越えて年末年始を楽しみましょう！！ 私のアドベントカレンダーは2回目ということでよろしければ、過去記事を載せておきますのでご覧ください！ nttdocomo-developers.jp 私の普段の業務は、XR機器における分散処理技術の技術領域を担当しており、上記記事は全くそちらに関係が無いように思われと思いますが、 新…

ファンと共に時代を進める、Web3スタートアップのGaudiyでUnityエンジニアをしているくりやま（@xamel7）です。 Gaudiyでは"Gaudiy Fanlink"というブロックチェーンや生成AIなどの技術を活用したファンプラットフォームで、漫画、アニメ、アイドルといったIP（知的財産コンテンツ）独自のコミュニティの開発・運営をしています。 service.gaudiy.com このFanlinkの一機能として、現在、新たに開発を進めているのがIPのカジュアルゲームです。 「GANMA!コミュニティ」で先日公開されたカジュアルゲーム ▼登録不要で遊べます ganma-communi…

気になるホームページがありました こんにちは。 最近見かけた「CHILL OUT」という飲み物のホームページで、飲み物の缶がふわふわ動いていたので、どうやっているのだろうと気になって基本的な部分だけ実践してみました。 https://butfirstchillout.com/ WebGL (Web Graphics Library) このような技術は「WebGL」と呼ばれます。 Webブラウザで2D/3Dグラフィックスを表示することができるJavaScript APIです。 Three.js WebGLを実現するためのJavaScript ライブラリに「Three.js」というものがあります。…

こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 2023年4月21日にBabylon.jsのバージョン6がリリースされ、界隈では話題になっておりますが、メタバース業界にいるフロントエンドエンジニアとしては、キャッチアップしておきたいと思い、Babylon.jsを触ってみました。 また、Babylon.jsをReactアプリケーション上で使えるreact-babylonjsも合わせて紹介します。 www.youtube.com はじめに 今回のアジェンダは以下の3つとなります。 Babylon.jsとは Babylon.js Playgroundでチュッパチャップス型…

この記事はTech KAYAC Advent Calendar 2022 22日目の記事です。 こんにちは！ ハイパーカジュアルゲームチームのフロントエンドエンジニアの深澤です。 WebGL2で、スキニング処理をしているGLTFのモデルを GPU Instancing で大量に表示するデモを作ってみました。影を落とす処理も合わせて、会社の Mac Chrome では30,000個ほど、私物 iPhoneX Safari では2,000-3,000個ほどは60FPSで表示できていそうです。 URLはこちらです。 デモサイト: https://takumifukasawa.github.io/Pa…

この記事はQiita Unity Advent Calendar 2022 カレンダー2 の9日目の記事です。 qiita.com ◆前日は chroske さんの 【Unity】ワープポータル転送演出の作り方【AdventCalendar2022】 - かつて代官山らへんで働いてたengineerのUnityブログ でした。 ◆次の日は nkjzm - Qiita さんの「なんかかく」です。 ちょくちょくハマる Input System ですが、またも今年のデジゲー博の準備中にWebGLビルド時に操作できなくなる症状にぶつかりました。その原因と解決策です。 目次 目次 問題が発生した状況 原…

こちらはTech KAYAC Advent Calendar 2022 12/4 の記事です。 ご覧いただきましてありがとうございます、カヤックでWEBフロントエンジニアをしています新卒3年目のbobと言います。 www.kayac.com 昨日は同期のフロントエンドエンジニアのmiyabinの記事でした。Svelteという新しいフレームワークを仕事に投入したという内容になっていますので、もしよろしければぜひこちらもご一読を！ techblog.kayac.com 今回の記事では、タイトルの通り半年間朝の時間を使って勉強会を開いてきて得られた知見や感想を書いていきます。 何か新しい知識を得たい…

勉強会のレポート(メモ)です。参加したのはこちら「unity1week online共有会 #15 」 u1w-sharing.connpass.com ハッシュタグ : #u1w共有会 アーカイブはこちら youtu.be unity1week共有会って何？ LT1 AI_ygで した実装 個人的教訓を添えて 後悔した実装 正解だった実装 LT2 等身大のゲームづくり LT3 自己流で！サウンドの自作やら工夫とか LT4 u1wでツールを作るということ どこから始めればいい？ 専用のツールを作ろう LT5 備忘録のススメ 備忘録を書く理由 備忘録の書き方 LT6 無理の無い共同開発 事前にで…

最近、WSLでサーバー建てて、ブラウザ（WebGLアプリケーション）でタブいくつか開いてエディタ起動していると平気で使用率90%を超えるようになった ※去年にPCを買い替えた記事 ozw-sei.hatenadiary.jp メモリが現状32GBなんだけど、この際128GBくらいにアップグレードしようとしたが在庫がなし また、必要になったら64から128に上げれば良いかと考えてすぐに交換した DDR5は相性問題のトラブルをよく聞くので、少しでもリスクを抑えるために以前と同じCorsairの Vengeance で AMD Expo 対応に揃えた なお、それでも不安だったのでTsukumoの相性…

OBS Studioの「ブラウザソース (BrowserSource)」に関しての記事 記事投稿日 2018年3月29日、最終投稿更新日 2024年04月13日 09時05分頃 2022年1月25日に記事タイトルを「【対処法】OBS Studioで BrowserSource がない場合【導入方法も紹介】」から変更しました。 記事はWindows版バージョン 30.1.2 を使い書いています。 ※mac版 / Linux版では違う部分があると思うので予めご了承ください。

今回は古くなったタブレット端末を活用する為にWeb上に時計を作成する事にしました。 下記画像はプロジェクトとなります。 基本的にはUIのテキストを毎秒で更新して表示させるだけとなります。 背景はChatGPTさんに作成してもらい、ドット絵風をリクエストしてみました。 次にコードの紹介です。 TimeManagerというスクリプトを作成して適当なオブジェクトにアタッチし、 テキスト部分を格納する感じにしています。 画面がタブレットやスマホで見た時に画面が適正化されておらず、余白ができてしまったが、 1時間掛からずに作成できたので今回は良しとする事にしました。 完成した作品はこちら Unity W…

はじめに Unity 1週間ゲームジャムとは？ お題「かわる」に参加しての自分語り 参加までの経緯 作成したゲーム 発想の経緯 今回の狙い 策施策に溺れる 雰囲気づくりの工夫 開発者としての感想 やっておいた方がよかったこと サムネイルをGif画像にする 難易度調整（特にノベルゲーム） シナリオ用のアセットはUnity Editor上で編集しない アセット管理にはResourcesを使う 参加してみての感想 プレイをして面白かったゲーム 身代わりスイカ割り いろかわフラワーズ ガラクタ錬金術師 Avoid! 四季登々！！（しきのりのり） 今年は協力？干支パズル！ 3人の勇者 調色のガーネット …

unity1weekゲーム『ホムの店番』 見下ろし型店舗経営シミュレーション×クリッカーアクション ソラリスという女の子と、ホムという人形が、忙しい店番に挑みます※タイトルがいつも味気ないので、AIで装飾してみました。中国風ですね。 ゲーム概要 unity1week という一週間でゲームを作るイベントに出展しました。ホム（ホムンクルス）という人形が、忙しいお店の番に挑みます 美麗グラフィック／BGMと共に、忙しい一日をお楽しみください！ゲーム画面 www.youtube.com ゲームのページ（WebGL） 以下のURLからゲーム公開サイトに飛べます unityroom.com 操作方法 マウ…

prtimes.jpグルメアプリ「SARAH」において、お店への”応援を可視化”する新機能「NOREN」がリリースされました。 弊社は、SARAHでの投稿によって付与される「UME」を使用する事で取得できる「NOREN」のデザインを担当しました。「NOREN」のデザインは100万通りあり、すべてプログラミング(WebGL)を用いて作られたジェネラティブアート作品となっております。 ぜひ「NOREN」を取得してみてください。

ゲーム開発におけるスクリプト言語 ゲーム開発において、UIやゲームプレイなどを実装する際、スクリプト言語を使うことがよくあります。太古の事例でいうと、World of Warcraftのプラグイン開発ではLuaを使います。最近の日本の開発事例でいうと、ヘブンバーンズレッドとFFVII EVER CRISISはUnityで開発されていますが、ADVパートの開発はC#ではなく、Luaを採用しています。 techcon.gree.jp speakerdeck.com Unityの場合、C#しかオフィシャルにサポートされてないため、Luaをサポートする場合は独自に実装する必要あります。UnrealEn…

はじめに uLipSync 周りの不具合修正を行いましたので報告となります。1 つ目の issue では WebGL ビルド時に次の 2 点が問題として報告されていました。 WebGL ビルドでリップシンクが遅れる WebGL ビルドで AudioClip 再生後に口が開いたままになる github.com また、別の issue では BlendShape の値についての報告がされていました。 現在 0 ~ 100 の値で BlendShape が計算されるが、0 ~ 1 の値で設計されたアバターにも適用したい github.com 上記 3 点について解説します。 ダウンロード 最新版は以…

はじめに 本記事にはWebGL2に関する備忘録です。 WebGL2の習得に有用なサイトについても記載します。 私が後から参照できればよいので、わかりにくいかもしれません。 有用なサイト ・「床井研究室」でググってください。床井先生はCGの神様です。 ・wgld.org はい、これブックマークしてください。 ・webgl fundamental ・コンピュータグラフィックス特論Ⅱ （大学院講義） 九州工業大学の授業のようです。私は影の箇所を参考にしました。 ・ゲームグラフィックス特論 A / B 床井先生の授業です。 ・ICS MEDIA - WebGLに関するハイレベルな記事があります。まだほ…

こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験を ライブゲーミング と呼んでいます。 ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配置したウェブブラウザ上で動作させることによって実現しています。*1 今回は UnityでモバイルWebGLゲーム開発を頑張る話 の「メモリリークによって発生するクラッシュ」にも書かれているような、捕捉は難しいがユーザー影響があるような例外の発生を捕捉して、計測を…

glTFとは glTF (GL Transmission Format) はJSONによって3Dモデルやシーンを表現するフォーマットであります。 「3DにおけるJPEG」と表現されることもあります。 glTF2.0のみを扱う glTF 2.0は2017年6月5日のWeb3D 2017 Conferenceで正式発表されました。 Blenderでも入出力はglTF2.0のみしか扱っていないようなので、本記事もglTF 2.0を扱うことにします。 glTFの3つの種別 Blenderを使って解説します。 Blenderで[ファイル]>[エクスポート]>[glTF 2.0] を選択します。 下図はそ…