2023年5月にリリースされたGoogle Chrome 113で、次世代WebグラフィックスのJavaScript APIであるWebGPU（ウェブジーピーユー）がデフォルトで利用できるようになりました。ICS MEDIAでは2018年にWebGPUについて紹介していましたが、当時はSafariで開発者向けのフラグを有効にした場合にのみお試しできる実験的機能でした。 デスクトップChrome限定ではありますが、WebGPUが一般ユーザーの環境でも動作できるようになったいま、オリジナルのデモを交えてあらためてWebGPUを紹介します。 この記事で紹介すること WebGPUがChrome 113で標準で利用可能になった WebGPUはモダンな3D APIに直接アクセスすることで、WebGLより高い性能が得られる WebGPUだとドローコールの最適化をしなくても十分に高速 WebGPUはコンピ
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コードを確認する 3Dを感じる理由 まず3Dをユーザーに感じさせる理由について考えてみます。紙面にしても画面にしても実態は2Dの平面世界です。画面の中で3Dを感じるのは、人間が2D的に描かれたものから奥行きを知覚する特性があるからです。たとえば、すぼまっていく2本の線があると線が平行であると認知し、奥行きを感じます。この現象を体系化したものが遠近法です。 より具体的な手法として透視図法があります。Three.jsを使った3D表現もこの透視図法によって描画されています。描画自体
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 animated GIFs...😎 Visit website for details:https://t.co/mlnmExpUVZ#REACTVFX #WebGL #React #Threejs #GLSL pic.twitter.com/uDUQ8MKNcK— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayos
Vanta.js - 3D & WebGL Background Animations For Your Website
Why? Can interact with mouse / touch Customize colors & style to match your brand No pixelation – Canvas runs at full resolution Smaller filesize than background videos and large background images – three.js is ~120kb minified and gzipped Runs fast (60fps) on most laptops/desktops What's the catch? Some WebGL effects are slow on older computers. Don't use more than one or two in a single page! Not
A WebGL fluid simulation that works in mobile browsers.
Kernel/VM探検隊はカーネルや仮想マシンなどを代表とした、低レイヤーな話題でワイワイ盛り上がるマニアックな勉強会です。KOBA789氏は、シミュレータとCADの制作について発表しました。全2回。後半は、回路CADの制作方法について。前半はこちら。 自作CADに求めること KOBA789氏（以下、KOBA789）：シミュレータができたので、次はCADを作っていきます。書いた回路図がそのまま動くCADがなかなかないので、私はCADに書いた回路図がそのまま動くことを一番求めていました。 大抵の場合、回路を書くCADとシミュレータが別々になっています。まじめな回路を組むのであればそのほうが楽なのですが、だいたいタイミングチャートのかたちで表示されるんですよね。 プローブをいろいろなところにくっつけて、そのプローブの値が時間経過でどうなったかというタイミングチャートがバーッと出るわけです。たく
WebGLと比較して学ぶWebGPU
Webブラウザ向けの低レベルAPI「WebGPU」について、WebGLと比較しながらそのメリットを紹介します。 本記事は、TechFeed Experts Night#5 〜 Web3D,WebXRを語るのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 みなさん、こんにちは。@emadurandalと申します。今回は「WebGLと比較して学ぶWebGPU」と題して発表させていただきます。 私自身の紹介についてですが、私は2015年ごろにWebGLにはじめて触れて、それ以来3Dライブラリ開発をずっとやっています。Rhodoniteというライブラリを開発して、長らくWeb3Dの情報を発信しています。現在は株式会社HIKKYで、WebGLベースのメタ
REACT-VFX is a React component library which allows you to add WebGL powered effects to you React aaplication.
2022年のライブゲームはWebGL@Unityで動いているよ - Mirrativ Tech Blog
みなさまこんにちは、よこて @n0mimonoです。段々とすごしやすい気温になってきましたがいかがお過ごしでしょうか。今日の話は ミラティブとライブゲーム ライブゲームはUnityを利用したWebGLベースで動いているよ バックエンドアーキテクチャの紹介 行ってみます！ ミラティブ × ライブゲーム ミラティブは、スマホで簡単にゲーム配信ができるサービス『Mirrativ』を展開していますが、今年（2022年）からゲームとライブ配信を融合させた『ライブゲーミング』に特に注力してます（次は4月次点のプレスリリース）。 prtimes.jp 「ライブゲーミング」とは、配信中のゲームに視聴者が介入できる、ゲームとライブ配信が融合した次世代のゲーム体験となります。 視聴者は従来のライブ配信のようにコメントやギフトアイテムを贈るだけでなく、実際に配信者といっしょにゲームをプレイする「参加型ライブゲー
TensorFlow.jsがChromeでWebWorker上でもWebGL backendで動く - すぎゃーんメモ
tensorflow.js は処理の重さ的に worker で動かしたいのだがまだ WebWorker で動かすと cpu backend に fallback してしまうので、この issue ずっとみてる https://t.co/KYGEQSFwq5— 無糖派層 (@mizchi) July 30, 2019 僕も以前にWebWorker上でTensorFlow.jsを使おうとして WebGL backendで動かないことに気付いて諦めていたのだった。 memo.sugyan.com …と思っていたのだけど、どうも先月くらいの @tensorflow/tfjs@1.2.2 あたりから ChromeではOffscreenCanvasというのを使ってWebWorker上でもWebGL backendで動くようになったようだ。 試してみたところでは 動くのはChromeのみで、Safari
マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開
マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開 マイクロソフトは、WebAssemblyとWebGLで機械学習の推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開しました。 INTRODUCING: #ONNXRuntime Web (ORT Web), a new feature in ONNX Runtime to enable JavaScript developers to run and deploy machine learning models in browsers https://t.co/Ey3tsNlkEe pic.twitter.com/9uGyK8Pra0 — onnxruntime (@onnxruntime)
はじめまして。フロントエンドエンジニアの田島と申します。 ちょうど今から約１年ほど前に鹿児島にあるアプリファクトリーはるni株式会社というゲーム開発会社様にお声がけいただき、お仕事として企業サイトを制作致しました。 以下のツイートにて、サイト内での操作イメージを短くまとめた動画を添付しています。 サイトの制作方針として、はるni様が制作を得意とする3Dボクセルを中心に据える方針で企画が固まり、技術的にチャレンジングな仕事となりました。その際、私自身多くの方々の技術記事等を参考にさせていただいたため、自分も微力ながら制作の過程で得られた知見を共有できればと思い、記事に残すことにしました。 （ただし、WebGLやThree.jsの扱いに関して未熟な点も多分にあるため、各章でより良いアイデアをお持ちの方はコメント等で温かくご提案いただけますと幸いです。） 技術検証 陰影を事前にベイクするか、リア
Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい！ - WebGL 総本山
top 2022 年 03 月 Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい！ 将来的には VR モードにも対応を予定 今回ご紹介するのは、ウェブを中心に据えたメタバースの形を模索するプロジェクト、Sougen のウェブサイトです。 こちらのプロジェクト、日本に拠点がある Utsubo Co., Ltd（@utsuboco）が手掛けているものらしく、かなり本格的で多くの構想を持ったプロジェクトみたいです。 現在公開されているホワイトペーパーを見ているだけでもそのあたりいろいろとうかがい知ることができるのですが、現状すでに WebGL を利用した三次元空間のバーチャルスペースが用意されており、アクセスしているユーザーをリアルタイムに処理しているようです。 リンク： Sougen 説明セクションと 3D コン
LittleJSは高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジンです。他ライブラリに依存せずに動作してくれます。 軽量、シンプルで、様々なゲーム開発に使えるライブラリを目指しているそうです。超高速レンダリング、物理演算、パーティクル、サウンドエフェクト、キーボード/マウス/ゲームパッドの入力処理、アップデート/レンダリングループ、デバッグツールなど、ほとんどのゲームに必要なものをすべて備えているとの事。 Steamのようなプラットフォームで配布するために、electronを使ってWindowsの実行ファイルとしてビルドすることも可能だそうです。ライセンスはMIT。 LittleJS
こんにちは。ミラティブUnityエンジニアの菅谷(tetsujp84)です。 ミラティブのライブゲームはUnityで開発し、MirrativアプリのWebGLで動いています。 ライブゲームを支える仕組みと実際のライブゲーム開発で使用した技術については過去の記事で紹介しています。 tech.mirrativ.stream tech.mirrativ.stream UnityはWebGL向けにもビルドでき、モバイルのWebGLであってもUnity製プロダクトが動くようになっています。一方で、Unityは正式にはモバイルWebGL対応をサポートしておらず、ネイティブのモバイル開発と比べると開発の難易度は高いです。その難易度の高さは具体的にどこにあったのか、実際にモバイルWebGL向けのゲームを開発した経験を元に知見を共有します。 パフォーマンス編 モバイルWebGLの開発は常にパフォーマンスの意
はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。 なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日
あてっこ！ぷにまるずを支える技術紹介 〜モバイルWebGLの開発事例〜 - Mirrativ Tech Blog
Unityエンジニアのいも(@adarapata)です。 みなさんはUnityでWebGLプラットフォーム開発していますか？ ミラティブでは先日「あてっこ！ぷにまるず」というライブゲームをリリースしました。 これはモバイルブラウザで動くWebGLです。 PCブラウザ想定のWebGLは多くありますが、モバイルブラウザを想定したゲームはあまり多くはありません。 いざ開発しようとしてもそもそも動くのか？このライブラリは対応しているのか？要求水準は満たせるのか？といったさまざまな課題が待ち受けているでしょう。 本エントリーでは、あてっこ！ぷにまるず(以下ぷにまるず)を実際にリリースするにあたって利用したライブラリの簡単な紹介や、ちょっと気をつけるポイントなどを紹介していきます。 個別の技術スタックに関する話は別途エントリを書いていくので、ここでは全体のサマリーと簡単な選定理由などに留めておきます。
制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するために検証・実装したSVGとWebGLの技術ご紹介します。SVGやWebGLを活用したビジュアル表現に興味のあるエンジニアはもちろん、ウェブ技術を使ってどのような表現ができるのか知っておきたいディレクター・デザイナーの方も是非ご覧ください。 ▼ 特設サイト『2030年のありたい姿』 「人と機械の共創」を魅力的なアニメーションで描きたい 『2030年のありたい姿』の重要なキーワードが「人と機械が共創する社会」でした。特設サイトではこのビジョンを広く一般の方向けに伝えるため、株式
bayazuma on Twitter: "許可したくなるWebプッシュ通知を考えてみた #webgl #threejs #ui #interaction https://t.co/ZUd40sk4XD"
許可したくなるWebプッシュ通知を考えてみた #webgl #threejs #ui #interaction https://t.co/ZUd40sk4XD
これはThree.js Advent Calendar 2019の14日目の記事です。 3年前に以下の記事を読んでWebGL Inspectorを使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。 WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう 「Three.jsにBaylon.jsみたいなDebug modeある？」という議論を見つけて気になったので、現状のWebGLデバッグツール状況を調べてみました。 Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer) 消失したデバッグツール WebGL Inspector 最終更新日（github）：2017/02/22 去年はまだChromeウェブストアにあった
ブラウザ上で3Dグラフィック機能を利用する時、ほとんどの場合には「WebGL」が利用されています。「WebGPU」は、年々向上していくGPUの性能をより一層引き出すために、「WebGL」の後継としてゼロから設計されているAPI仕様です。現在、WebGPUは仕様の策定と各ブラウザへの実装が同時に進められており、本格的な普及はまだまだ先という状況ですが、一足先にMozillaの技術者であるDzmitry MalyshauさんがWebGLと比較しながら「WebGPUはどのような点が進化しているのか」を解説しています。 A Taste of WebGPU in Firefox - Mozilla Hacks - the Web developer blog https://hacks.mozilla.org/2020/04/experimental-webgpu-in-firefox/ WebGP
【JavaScript】 PlayCanvasの公式サンプルを使ってモバイル・デスクトップで動く一人称視点の空間を作る【WebGL】 - Qiita
【JavaScript】 PlayCanvasの公式サンプルを使ってモバイル・デスクトップで動く一人称視点の空間を作る【WebGL】 JavaScriptWebGLゲームPlayCanvasFPS ※補足 2020/6/18/ Qiita トレンド入りありがとうございます。 2020/6/19/ 一部修正 / Google Polyを使用して3Dモデルをインポートする手順について追記いたしました。 2020/6/22 続編 マルチプレイできるゲームを作るものを書きました。【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】 JavaScript製のゲームエンジンPlayCanvasを使用して、FPS視点の空間を作る方法を解説します。 コードはサンプルのものをそのまま使用しますので、15分〜
3DのWebサービス開発で宣言的なWebGLライブラリを導入して感じた保守運用上のメリット - spacelyのブログ
1 はじめに スペースリーでエンジニアをしている長谷川です。 最近は3DのWebアプリの開発を担当していて、弊社でリリースしている「パノラマ変換3Dプレイヤー」のコンテンツ作成機能などを開発しています。 3DのWebアプリを開発する際には「React/Vue × WebGL系ライブラリ」という構成が代表的なケースの1つであり、弊社でもその構成を選択しました。 ところが、3D Webアプリはサービスの数としては多くないので保守運用まで考慮した設計ノウハウはまだまだ十分に共有されてはおらず、開発を進めるにあたって以下のような懸念点がありました。（詳細は次章） 「宣言的なReact/VueのWebアプリ」と「命令的なWebGL系ライブラリ」というスタイルの違うコードが混ざることでそれぞれの責任分担が曖昧になりやすい 「WebGL系ライブラリを用いた3Dアプリ」の保守運用を考慮した設計に関するノウ
WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。 WebGLを使えば主に次のようなコンテンツ開発に役立ちます。 3Dモデルの表示 ゲームコンテンツ データビジュアライゼーション プログラミングアート 魅力的で華やかな画面演出（広告系サイトなど） かつてはFlash PlayerやUnity Web Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。 本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTMLデモを多数掲載。どれもスマートフォンのブラウザでも利
この記事は「Happy Elements Advent Calendar 2023」および「AWS for Games Advent Calendar 2023」12月15日の記事です。 はじめに Happy Elements 株式会社でインフラグループのグループリーダーを務めております、長谷川です。 普段は全社横断で AWS, GCP, Azure といったクラウドでのサービス設計・構築・運用を担当するグループのリーダーを担当しています。 Happy Elements カカリアスタジオでは、少人数かつ限られた期間内でゲームを企画から開発まで行うチャレンジプロジェクト「SuperLite アプリ」という取り組みを始めました。 Super Lite アプリでは、新しいチャレンジを希望するメンバーでチームを結成し、およそ1ヶ月程度の作業時間を使って1つのゲームを作り上げます。 限られた作業時間
●●WebGL(PIXI.js + glsl)と物理演算(matter.js)で可愛い絵本風タピオカ作ったので解説●● - Qiita
こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます（スマホ未対応）： https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaScriptの描画エンジンの定番の一つであるPIXI.jsと、物理演算ライブラリのmatter.jsを使って、タピオカを可愛くふわふわさせる表現のアプローチとポイントを解説します。 物理エンジンと描画エンジンの連携方法 シェーダーによるオリジナルの表現 物理演算で表現したいものを作るためのチップスいくつか シェーダー(glsl)周りは結構独特なので別途もうちょっとちゃんとした解説記事を書く予定です。この記事はどちらかというと駆け足のネタ記事になっ
はじめに Unity には Microphone というクラスがあり、これを通じてマイクの情報や入力を取得できます。しかしながら Microphone は WebGL では利用することが出来ません。 docs.unity3d.com Unity では FMOD をオーディオ周りとして利用しているようで、基本的にスレッド上で動くためスレッドが（部分的にしか）利用できない WebGL とは相性がよくなく、結果的に Web Audio API をベースに自前で実装する、という選択をしたようです。その上で多くのオーディオ系 API は再実装されたものの、幾つか Web Audio API との相性が良くないものは利用不可、となっているようです。そして Microphone はごっそり「不対応」となったようですね。 私は uLipSync というリップシンクのためのライブラリを作っていまして、この中
【WebGL2】GPU Instancing x Transform Feedback で大量のインスタンスの計算と描画をGPUで行う - KAYAC engineers' blog
~ このエントリは 【カヤック】面白法人グループ Advent Calendar 2023 の22日目の記事です。~ こんにちは！ハイパーカジュアルゲームチームの深澤です。 WebGL2において GPU Instancing でメッシュを大量に表示しつつ、Transform Feedback を使ってインスタンスごとの情報計算もGPUに任せてみたいと思います。 ↓ デモはこちらになります。画像かURLから飛ぶことができます デモ: https://takumifukasawa.github.io/webgl-transform-feedback-gpu-instancing/ ↓ リポジトリのURL github.com メッシュ1つあたりの頂点数は24です。描画色は、インスタンスごとの色をふまえて平行光源の拡散光だけ計算しています。 GPU Instancing を使っていて、ドローコー
寿司打の限界を目指して ~WebGLのOCR~
この記事は闇の魔術に対する防衛術 Advent Calendar 20192 日目の記事です。 ある日、会社で寿司打というタイピングの速度や正確さを競うゲームが流行った。 みんなやってるので私も挑戦してみたところ、結果は惨敗。全エンジニアの中でもっともスコアが低かった。もともとタイピングが早くも正確でもないことを自覚していたつもりだったが、現実を突きつけられ大人しく家に返って枕を濡らそうと思った。が、あまりの悔しさにまみれ「JSer ならタイピング速度ではなく JS で勝負すればいいんだ」とダークサイドに堕ち闇の力に手を染めてしまった。 本記事はムキになって寿司打（WebGL 版）のスコアを稼ぐ自動化 JavaScript の話。 なお動作確認には Ubuntu 19.04、Google Chrome 80.0.3955.4 を使用した。 寿司打 WebGL 版 http://typing
UnityのWebGLアプリ開発における"使えないライブラリ問題"の回避策 - Gaudiy Tech Blog
ファンと共に時代を進める、Web3スタートアップのGaudiyでUnityエンジニアをしているくりやま（@xamel7）です。 Gaudiyでは"Gaudiy Fanlink"というブロックチェーンや生成AIなどの技術を活用したファンプラットフォームで、漫画、アニメ、アイドルといったIP（知的財産コンテンツ）独自のコミュニティの開発・運営をしています。 service.gaudiy.com このFanlinkの一機能として、現在、新たに開発を進めているのがIPのカジュアルゲームです。 「GANMA!コミュニティ」で先日公開されたカジュアルゲーム ▼登録不要で遊べます ganma-community.com WebサービスであるFanlinkとの連携が必要なこともあり、GaudiyのUnityチームではWebGLビルドによるアプリケーション開発を行っています。 WebGLビルドは、スタンドア
Building an interactive WebGL experience in Next.jsBring your creativity to life with the web's 3D graphic rendering API. WebGL is a JavaScript API for rendering 3D graphics within a web browser, giving developers the ability to create unique, delightful graphics, unlike anything a static image is capable of. By leveraging WebGL, we were able to take what would have been a static conference signup
MirrativにおけるUnityのWebGLを用いたライブゲームの仕組み - Mirrativ Tech Blog
はじめに 2022年のCEDECで講演した内容の詳細について解説します。特に、UnityのWebGLを用いたライブゲームの仕組みに焦点を当てて紹介します。 tech.mirrativ.stream WebGL技術を活用したライブゲーム ライブゲームには、WebGLの技術が使用されています。UnityでWebGL向けにビルドを行い、MirrativアプリのWebView上で実行されています。 ライブゲームの例 Mirrativで遊べるWebGL製ライブゲームは増え続け、ゲームのクオリティも日々向上し、魅力的なものが次々と誕生しています。 Mirrativでリリースしている「みんにゃで!ねこメダル」です。メダル落としゲームがライブゲームとして遊べます。視聴者は自分のアイコンをひもづけて様々なアイテムを贈ることができるようになっており、メダル落としゲームに視聴者協力プレイが融合したライブゲームに
この記事はKAYAC Advent Calendar 2021の22日目の記事になります。 こんにちは！ハイカジチームの深澤と申します。 今回は実際の業務とは関係なく、自由研究的にやってみたことの記事になります。 数ヶ月ほど前に iOS15, macOS Monterey が登場し、ついに iOS / macOS ともに safari で WebGL2 が標準で使えるようになりました。この出来事はWebフロント界隈からするととても嬉しいお知らせでした。 そのことを思い出し、アドベントカレンダーでは WebGL2を使った何かを題材にしようと決め、前々からやってみたかった「ブラウザでCPUベースでレイトレをし3Dモデルを表示する」ことに取り組んでみたという経緯になります。 ここでいう「CPUベース」とは、「レイトレのピクセル計算をjavarcript側で行うこと」を指します。 目次 目次 はじ
GPUを使ってウェブ上のグラフィックスを改善するWebGLの後継API「WebGPU」がChrome 113ベータ版で利用可能に
WebGPUは、コンピューターグラフィックをレンダリングするために広く用いられているWebGLの後継として開発されている新たなAPIであり、デバイスのGPUに対するより高度なアクセスを提供することで3Dグラフィックスやデータの並列処理を改善します。Googleが、2023年4月6日にリリースしたChrome 113ベータ版で、WebGPUがデフォルトで利用可能になったことを発表しました。 Chrome ships WebGPU - Chrome Developers https://developer.chrome.com/blog/webgpu-release/ WebGPU, one of the biggest additions to the Web platform is finally shipping in Chrome! ???? Many thanks to all Ch
GitHub - google/swissgl: SwissGL is a minimalistic wrapper on top of WebGL2 JS API. It's designed to reduce the amount of boilerplate code required to manage GLSL shaders, textures and framebuffers when making procedural visualizations or simulations.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【WebGL2】アニメーション付きの草を大量に生やす ~ Skinning Mesh と GPU Instancing の連携 ~ - KAYAC engineers' blog
この記事は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/PaleGL/demos/grass-skinning-gpu-instancing/ デモのgithub: https://github.com/takumifukasawa/PaleGL/tree/m
Unity WebGL なゲームをNode.JS + jsdom + headless-glで動かしたかった - Qiita
えっ このネタ続くの。。？ 前回( Unity WebGLで使われているシェーダを抜き出してARBアセンブリを眺める )はWebGLビルドのUnityゲームをトレースして、使われているシェーダ命令があんまり多くないことを確認した。 ブラウザ上の動作では同期APIの実装に制約がありちょっと手を入れづらいため、Node.jsで動かしたかった。別案としてNW.jsを使うというのもあったが、今回の手法でもWebブラウザ側のDOMを使わないといけないところは一応クリアしている。 結果と手法 結局成功したんだか失敗したんだかよくわからないところまでは来たと思う。 結果 Node.jsでもUnity WebGLは起動して描画コマンドも発行する でも描画がまっくらなので、まだ描画が正常かどうかは確認できていない JSdomでWebAssemblyを使ったサイトがそのまま動くのは地味にすごい気はする。 手法
Everything you need in one place: 91 hours of video to go from absolute beginner to advanced Three.js developer.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性 - ICS MEDIA
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA
Reactで画像やテキストにWebGLエフェクトをかけるライブラリ作った - マルシテイア
Webgl Fluid Simulation
Rust・WebAssembly・WebGLで作る回路シミュレータ CADに書いたCPUの回路図がそのまま動く
REACT-VFX - WebGL effects for React! #REACTVFX
3DボクセルをWebGLで企業サイトに組み込んだ際の考察過程
高速WebGLレンダリングシステムを備えた軽量の2DJavaScriptゲームエンジン・「LittleJS」
ターミナルを900％高速化するWebGLレンダラーを実験投入 ～「Visual Studio Code」v1.41／長いパスをコンパクトに表示する“コンパクト フォルダー”、HTMLタグのミラーカーソルも魅力
UnityでモバイルWebGLゲーム開発を頑張る話 - Mirrativ Tech Blog
生 WebGL と TypeScript で Vercel のロゴを作る
制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA
2019年のWebGLデバッグツール状況 - Qiita
ウェブのグラフィック性能を大幅に引き上げるWebGPUではWebGLのどんな部分が改善されているのか？
WebGL入門 - サンプルで理解する3D表現の迫力 - ICS MEDIA
Unity 製 WebGL ゲームを AWS でお手軽公開
Unity の WebGL ビルドでマイク入力を扱えるライブラリを作ってみた - 凹みTips
Build an interactive WebGL experience with Next.js – Vercel
WebGL2でCPUベースのレイトレーシングをやってみた - KAYAC engineers' blog
Three.js Journey — Learn WebGL with Three.js