WebGPUでシェーダーアートをやってみる（Vite、TypeScript）

2024/04/07 9 users TypeScript WebGPU vite 覚書 入門

はじめに 下記の素晴らしいGLSLを使ったシェーダーアートのチュートリアル動画の内容をWebGPUでやってみたのでその覚書です。WebGLは以前少しだけ齧ったことがありましたがWebGPUについては完全に知識ゼロなので入門のお題としてやってみた感じです。チュートリアル動画ではShadertoyを使っておりフラグメントシェーダー... 続きを読む

モバイルアプリ上の 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風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コ... 続きを読む

GPUを使ってウェブ上のグラフィックスを改善するWebGLの後継API「WebGPU」がChrome 113ベータ版で利用可能に

2023/04/07 7 users WebGPU グラフィックス GPU API 後継

WebGPUは、コンピューターグラフィックをレンダリングするために広く用いられているWebGLの後継として開発されている新たなAPIであり、デバイスのGPUに対するより高度なアクセスを提供することで3Dグラフィックスやデータの並列処理を改善します。Googleが、2023年4月6日にリリースしたChrome 113ベータ版で、WebGPUがデ... 続きを読む

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

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

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

【WebGL】【MSDF】 イブにお父さんがサンタに変身する話 - KAYAC engineers' blog

2022/12/24 9 users msdf KAYAC engineers イブ サンタ 普段

この記事は面白法人グループ Advent Calendar 2022の24日目の記事です。 こんにちは。 意匠部アートディレクターのおばらです。 普段は受託案件の アートディレクション テクニカルディレクション デザイン 3Dモデリング フロントエンド実装 などをしています。 また、社内フロントエンジニア向けに 生 WebGL オンライン... 続きを読む

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 続きを読む

Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい！ - WebGL 総本山

2022/03/19 7 users ウェブベース TOP メタバース 総本山 Next.js

top 2022 年 03 月 Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい！ 将来的には VR モードにも対応を予定 今回ご紹介するのは、ウェブを中心に据えたメタバースの形を模索するプロジェクト、Sougen のウェブサイトです。 こちらのプロジェクト、日本に拠点がある U... 続きを読む

山の影が刻一刻と変化する様子が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 続きを読む

JavaScriptのTypedArrayについて - console.lealog();

2021/09/10 5 users MdN console.lealog WebAudio 配列

調べたのでメモ。 TypedArray TypedArray - JavaScript | MDN いわゆる型付き配列。 通常の配列と違って型が固定できる分、内部的に最適化がしやすいとか諸々で住み分けられてる。 そういう意味で一般的なフロントエンドのJavaScriptコードで出てくることはそうそうない。 たとえばWebAudioとか、CanvasとかWebGLとか、... 続きを読む

マイクロソフト、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 を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソ... 続きを読む

JavaScript + PlayCanvasの公式サンプルを使って、モバイル・デスクトップで動く一人称視点の空間を作る - Qiita

2020/06/18 8 users Qiita PlayCanvas FPS視点 ソース ツール

JavaScript製のゲームエンジンPlayCanvasを使用して、FPS視点の空間を作る方法を解説します。 大体１５分程度でできる内容です。 完成品のプロジェクトはこちらになります。 https://playcanv.as/p/ygI1bj7M/ PlayCanvasとは? PlayCanvasは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で取り組むクリエイティブコーディング」と題して発表しました。本記事ではそのときの登壇内... 続きを読む