モバイルアプリ上の WebAssembly 製ライブゲームで発生した例外を捕捉して計測する - Mirrativ Tech Blog

2024/03/18 34 users WebAssembly naru_jpn ミラティブ 例外

こんにちは、エンジニアのちぎら(@_naru_jpn)です。ミラティブでは、配信中のゲームに視聴者が介入できるゲームとライブ配信が融合した次世代のゲーム体験を提供しており、この体験を ライブゲーミング と呼んでいます。 ライブゲーミングは、Unity から WebGL 向けにビルドされた WebAssembly 製のゲームを、アプリに配... 続きを読む

Unity の WebGL ビルドでマイク入力を扱えるライブラリを作ってみた - 凹みTips

2024/01/27 16 users Unity 凹みTips ライブラリ マイク入力 マイク

はじめに Unity には Microphone というクラスがあり、これを通じてマイクの情報や入力を取得できます。しかしながら Microphone は WebGL では利用することが出来ません。 docs.unity3d.com Unity では FMOD をオーディオ周りとして利用しており、基本的にスレッド上で動くように設計されており、スレッドが（部分的に... 続きを読む

UnityでモバイルWebGLゲーム開発を頑張る話 - Mirrativ Tech Blog

2023/08/14 23 users Unity mirrativ.stream 菅谷 ミラティブ

こんにちは。ミラティブUnityエンジニアの菅谷(tetsujp84)です。 ミラティブのライブゲームはUnityで開発し、MirrativアプリのWebGLで動いています。 ライブゲームを支える仕組みと実際のライブゲーム開発で使用した技術については過去の記事で紹介しています。 tech.mirrativ.stream tech.mirrativ.stream UnityはWebGL... 続きを読む

あてっこ！ぷにまるずを支える技術紹介 〜モバイルWebGLの開発事例〜 - Mirrativ Tech Blog

2023/07/26 27 users モバイルブラウザ Unity ミラティブ イモ 開発事例

Unityエンジニアのいも(@adarapata)です。 みなさんはUnityでWebGLプラットフォーム開発していますか？ ミラティブでは先日「あてっこ！ぷにまるず」というライブゲームをリリースしました。 これはモバイルブラウザで動くWebGLです。 PCブラウザ想定のWebGLは多くありますが、モバイルブラウザを想定したゲームはあまり... 続きを読む

3DボクセルをWebGLで企業サイトに組み込んだ際の考察過程

2023/07/05 29 users 田島 フロントエンドエンジニア 鹿児島 以下 操作イメージ

はじめまして。フロントエンドエンジニアの田島と申します。 ちょうど今から約１年ほど前に鹿児島にあるアプリファクトリーはるni株式会社というゲーム開発会社様にお声がけいただき、お仕事として企業サイトを制作致しました。 以下のツイートにて、サイト内での操作イメージを短くまとめた動画を添付しています。 サイ... 続きを読む

頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

2023/05/19 102 users ウェブデザイン ICS MEDIA 別ウィンドウ 実装 予算

ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コ... 続きを読む

制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA

2023/01/19 13 users Lottie ICS SVG メインビジュアル アニメーション

制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するため... 続きを読む

WebGLと比較して学ぶWebGPU

2022/11/07 25 users WebGPU セッション セッション書き起こし記事 メリット

Webブラウザ向けの低レベルAPI「WebGPU」について、WebGLと比較しながらそのメリットを紹介します。 本記事は、TechFeed Experts Night#5 〜 Web3D,WebXRを語るのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみて... 続きを読む

bayazuma on Twitter: "許可したくなるWebプッシュ通知を考えてみた #webgl #threejs #ui #interaction https://t.co/ZUd40sk4XD"

2022/05/03 25 users Webプッシュ通知 t.co

許可したくなるWebプッシュ通知を考えてみた #webgl #threejs #ui #interaction https://t.co/ZUd40sk4XD 続きを読む

山の影が刻一刻と変化する様子が3Dではっきり認識できる「Shade Map」

2022/01/07 14 users 様子 作者 経過 Googleマップ ３Dマップ

山の影が時間の経過とともにどのように伸びていき、夜の闇に消えていくのかを3Dマップでチェックできる「Shade Map」を、tppiotrowski氏が作成しました。作者によると、「Shade Map」はWebGLを使って作成されています。 View Shade on a Map - Shade Map https://shademap.app/ 「Shade Map」はGoogleマップを利用したツ... 続きを読む

マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現

2021/12/10 24 users マイクロインタラクション Tween24.js CSS 実装

ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書け... 続きを読む

Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介

2021/12/05 130 users ライブラリ three.js 成果 クラス カメラ

こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な... 続きを読む

Next2D | Rendering Engine, NoCode Tool, Underlying Framework.

2021/11/27 110 users Engine Read More

Next2D libraries and tool.Rendering Engine, NoCode Tool, Underlying Framework. PlayerIt is a library that fully supports WebGL, allowing you to create rich, interactive graphics, cross-platform applications, and games without having to deal with browser or device compatibility. read more 続きを読む

マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開 － Publickey

2021/09/05 11 users Publickey WebAssembly マイクロソフト

マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開 マイクロソフトは、WebAssemblyとWebGLで機械学習の推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開しました。 INTRODUCING: #ONNXRuntime Web (ORT Web), a new feat... 続きを読む

音の出るCPUを作っている途中 - Speaker Deck

2021/03/20 27 users Speaker Deck CPU 途中 DBMS rust

Transcript KOBA789 Իͷग़ΔCPU Λ࡞͍ͬͯΔ్த ·ͣ༧๷ઢΛுΒͤͯ͘Εʂ ͜Ε͸ٳܜλΠϜͩʂʂʂʂʂ KOBA789 • ύιίϯΦλΫ • ࠷ऴֶྺߴଔ • ݱࡏແ৬ʢਓੜͷय़ٳΈʣ • ࣗ࡞ DBMS ੎ Ͱɺ୭ʁ https://diary.hatenablog.jp/entry/2020/11/16/222203 ࣗ࡞DBMSͷ࿩͸͠·ͤΜ CPUͷ࿩΋͠·ͤΜ ࠓ೔ͷ಺༰ • ʢͳΜΒ͔ͷʣγϛϡϨʔλͷ࿩ • WebAssemblyʢΛ࢖͏ଆʣͷ࿩ • WebGL ͷ࿩ • Rust ͷ࿩ ͥΜͿଞͷొஃऀ͕ৄ͘͠
 ஻ͬͯ͘ΕΔΜ͡Όͳ͍͔ʁ ۙ೥ࣗ࡞ CPU ͕Ξπ͍ CPUΛࣗ࡞ͨ͜͠ͱ͕͋Γ·͔͢ 50% 50% ͸͍ ͜Ε͔Β࡞Δ ※... 続きを読む

生 WebGL と TypeScript で Vercel のロゴを作る

2021/02/08 16 users TypeScript Vercel three.js ロゴ

はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソ... 続きを読む

Reactで画像やテキストにWebGLエフェクトをかけるライブラリ作った - マルシテイア

2020/01/23 16 users React released amagi マルシテイア 画像

amagiです。先日React用コンポーネントライブラリのREACT-VFXをリリースしました。 REACT-VFXを使うと、画像や動画、テキストにWebGLでエフェクトをかけることが出来ます。 ⚡?????-??? released！⚡ I created React components to add WebGL effects to images, videos and plain texts in your app. It also supports a... 続きを読む

●●WebGL(PIXI.js + glsl)と物理演算(matter.js)で可愛い絵本風タピオカ作ったので解説●● - Qiita

2019/09/02 23 users JavaSc Qiita GLSL タピオカ フル

こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます（スマホ未対応）： https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaSc... 続きを読む

JavaScriptで取り組むクリエイティブコーディング - パーリンノイズを使いこなせ - ICS MEDIA

2019/06/03 16 users クリエイティブコーディング ICS MEDIA イベント

HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 先月7月25日に開催されたイベント「Frontend de KANPAI! #4」では、プログラミングアートの楽しさを紹介すべく「JavaScriptとWebGLで取り組むクリエイティブコーディング」と題して発表しました。本記事ではそのときの登壇内... 続きを読む

Pixi.jsで雪を降らせてWebGLの速さを感じる | NIJIBOX BLOG

2019/01/16 20 users Pixi.js 速さ

こんにちは。HTMLやCSSに触るよりも前にちょっとFlashで遊んでいたフロントエンドエンジニアの上祖師谷です。 さっそくですが、そう、Flash、Flashなんですよ……。 Flash Player の提供が2020年に終了してしまうそうですね。ああ、なんてこと……。 参考: Adobe、「Flash Player」の更新と提供を2020年末で終了 – 窓の杜 Fl... 続きを読む

最新WebGL通信 〜いまキャッチアップしたいWebGL2・WebGPU・WebXRとは〜 - ICS MEDIA

2019/01/10 53 users ICS MEDIA ブラウザベンダー キャッチ 正式リリース

2011年に仕様が正式リリースされて以来、WebGLは多くのブラウザベンダー、コンテンツ開発コミュニティの手によって普及してきました。本記事では、2019年1月現在のWebGLの現状と周辺技術、そして未来について紹介します。 環境が完全に普及したWebGL 1.0WebGLの最初のバージョンであるWebGL 1.0は、現在ではデスクトップ... 続きを読む

WebGLを使ったマンガビューワを作っている - daiiz

2018/08/19 183 users daiiz マンガビューワ

自炊用マイ・マンガビューワーの話 京都なんか ＃4 御池ビルの前の木々 こんにちは daiizです Nota Inc.でスクボ.iconScrapbox というwikiを作っています 趣味開発では、画像に関するネタで何か作るのが好き tweetを撮る SVG Screenshot QR Screenshot YubiCameraの説明 今日は、3つくらい工夫を施して簡単なマンガビュ... 続きを読む

深層学習用ライブラリを自作して二足歩行を学習させてみた – EL-EMENT blog

2018/06/30 94 users CUDA 二足歩行 ライブラリ ツッコミ 経緯

WebGLとCUDAで動く深層学習用のライブラリを作って深層強化学習 (Deep Deterministic Policy Gradient, DDPG) で二足歩行を学習させました。学習環境の作成にはOimoPhysicsを使いました。 開発の経緯や以下実装方法、学習結果などです。例によって怪しい個所へのツッコミは歓迎です。 >> Open Repository on GitHub これ... 続きを読む

ブラウザだけでバーチャルYouTuberやAnimojiを再現。WebGLと深層学習を駆使したJavaScriptライブラリ「jeeliz」がすごい | Ledge.ai（レッジエーアイ）

2018/06/25 33 users レッジエーアイ Animoji バーチャルYouTuber

ブラウザだけでバーチャルYouTuberやAnimojiを再現。WebGLと深層学習を駆使したJavaScriptライブラリ「jeeliz」がすごい すでに3,000人を突破し、大きな盛り上がりをみせている「バーチャルYouTuber」や、iPhone X話題の機能「Animoji（アニ文字）」はご存知ですよね。 自分の動きに合わせてキャラクターを動かせるバー... 続きを読む

次世代のWebGPUの可能性 – コンピュートシェーダーで高速並列計算 - ICS MEDIA

2018/06/21 33 users WebGPU ICS MEDIA 並列計算 ウェブ 一体な

ウェブの3Dグラフィックスを扱う新しい仕様として提案されているWebGPU。仕様はまだ提案の段階ですが、すでに広く普及しているWebGLと比べて一体なにができるのでしょうか？ 本記事ではWebGPUで使用できる筆者イチオシの機能、コンピュートシェーダーについて紹介します。 WebGPUについて詳しくは前回の記事「次世代仕様... 続きを読む