Building an interactive 3D event badge with React Three Fiber – Vercel
In this post, we’ll look at how we made the dropping lanyard for the Vercel Ship 2024 site, diving into the inspiration, tech stack, and code behind the finished product. InspirationWe’ve shared digital tickets for event attendance in the past, but this time, we wanted to take it one step further by creating a tangible experience. When Studio Basement made a video in Blender that depicted a virtua
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行われた。 マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 7.0」正式版をリリースしました。 We are proud to announce that Babylon.js 7.0 has officially been released! The ne
「ONNX Runtime Web」でWebGPUによるブラウザ内機械学習の高速化が可能に
Microsoftは2024年2月29日（米国時間）、オープンソースでクロスプラットフォームの機械学習（ML）モデルアクセラレータ「ONNX Runtime」の「ONNX Runtime Web」機能において、WebGPUを用いてWebブラウザ内でのMLを高速化できるようになったと発表した。 ONNX Runtimeは、さまざまなハードウェア、ドライバ、OSと互換性があり、グラフの最適化や変換に加え、ハードウェアアクセラレータを適宜活用したパフォーマンスを提供する。PyTorch、TensorFlow/Keras、TensorFlow Lite、scikit-learnなどのフレームワークのモデルで使用できる。 ONNX Runtime Webは、JavaScript APIとライブラリを使用して、WebアプリケーションでMLモデルを実行、デプロイ（展開）できる。 関連記事 「Chrome
2023-12-15のJS: Safari 17.2、Deno 1.39(WebGPU)、SvelteKit 2
Migrating to SvelteKit v2 • Docs • SvelteKit JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン ECMAScript proposal updates @ 2023-11 | ECMAScript Daily ecmascript-daily.github.io/ecmascript/2023/12/10/ecmascript-proposal-update ECMAScript proposal news
Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも
マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 6.0」正式版をリリースしました。 We are thrilled to officially announce the release of Babylon.js 6.0! The web just got a WHOLE lot more exciting!https://t.co/q0JVsQaTSd#babylonJS6 #gamedev #indiedev #webdev #Metaverse #3D #webgl #gamedevelopment #IndieGameDev #webdeveloper pic.twitter.com/owV6YLp1zc — Babylon.js (@bab
チャットAIをブラウザのWebGPUだけで実行でき日本語も使用できる「Web LLM」、実際に試してみる方法はこんな感じ
ChatGPTやBardなど、大規模言語モデルをベースに人間と会話できる対話型AIが登場していますが、これらの対話型AIを動作させるには膨大な演算リソースが求められ、通常はAIが動作するサーバーにアクセスする形で対話を可能にしています。Metaが開発した大規模言語モデルのLLaMAをファインチューニングしたVicuna-7Bをベースにした対話型AI「Web LLM」は、ブラウザ上でのGPU演算を可能にするWebGPUを使うことで、サーバーにアクセスすることなくブラウザ上で対話型AIにアクセスできるのが特徴。日本語にも対応しているとのことなので、実際にWeb LLMと日本語で対話してみました。 GitHub - mlc-ai/web-llm: Bringing large-language models and chat to web browsers. Everything runs in
「Chrome 113」β版で「WebGPU」が利用可能に JavaScriptの負荷軽減、機械学習モデル推論を3倍以上改善
GoogleのChromeチームは2023年4月6日（米国時間）、同日にリリースしたWebブラウザ「Chrome 113」のβ版で、新しいWebグラフィックスAPI「WebGPU」が利用可能になったと発表した。 Chrome 113は、4月26日に安定版のリリースが予定されている。 「WebGL」および「WebGL 2」の後継となるWebGPUは、同じグラフィックスでもJavaScriptの作業負荷を大幅に軽減したり、機械学習（ML）モデルの推論を3倍以上改善したりするといった大きなメリットをもたらす。これは柔軟なGPUプログラミングと、WebGLが提供しない高度な機能へのアクセスにより可能となる。 WebGPUとは？ 関連記事 Microsoft、WebGPUをフルサポートする3Dレンダリングエンジン「Babylon.js 5.0」を公開 Microsoftは、WebGPUのフルサポート
必要なのはJavaScriptの基本的な知識だけ 3Dアニメーション制作をお手軽にする「Three.js」の魅力
エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥
徹底解説！iPhone 3Dスキャンの撮り方全て教えます｜iwama
本記事は初めてiPhoneで3Dスキャンを行う方や、実際に試して見たが上手く行かなかったとお困りの方に向けたiPhone3Dスキャンの撮影方法等を解説したものです。 その為3Dスキャンとは何か？等の全般的な内容はこちらの記事をご参照ください。 なお本記事は2023年の1月時点での情報をまとめており、最新の情報ではない可能性があります。 また筆者独自の調査や見解も入っており、事実とは異なる部分が存在する場合があります。 自分の記事を読んで為になったという方にお願いです。可能な限りで良いので令和6年能登半島地震の被災地支援のため募金活動をよろしくお願いします。 iPhone3DスキャンのタイプiPhone3Dスキャンにはいくつかのスキャンタイプが存在しています。 それぞれに特徴があるため用途に応じて使い分けると良いでしょう。 なお本記事はiPhoneのリアカメラ/LiDARの解説記事なので、フ
【Babylon.js】Reactを使って3Dモデルを表示する - Qiita
こんな感じでサッカーボールを表示してみました。 はじめに ARIの土井です。前回【Babylon.js】Playgroundで遊んでみようという記事を書きました。今回はReactを使って実際にWebページに3Dモデルを表示してみたいと思います。 ※ Reactの実行環境は、Web上で利用できる統合開発環境のCodeSandboxを使用しました。 準備 まず、https://codesandbox.io/s/ にアクセスしてSatrt from a templateからReactをクリックします。 以下のようにReactのテンプレートから生成されたサンプルページが表示されます。 Dependenciesから@babylonjs/coreパッケージをインストールしておきます。 手順 ここからReactのテンプレートで生成されたディレクトリを以下のような構成にしていきます。 public/ └
three.jsやpixi.js等のライブラリを一切使わずにwebGL実行環境をJavaScriptスクラッチする(したい)
青い長方形が表示されているだけですが、テクスチャ画像に表示を切り替えたり頂点の数を変えたり(四角を三角にしたり)する場所にコメントを入れてコネコネできるようにしています(リサイズ対応済み...のはず) 埋め込みcodepenの下に連ねている引用元の素晴らしい入門サイトから、バラバラとコードを繋ぎ合わせているため、コードの整合性や効率に言及できていません。「動いた〜〜やった〜〜」程度の実験場です。「ちょっとこのfragmentShaderの挙動試したいな〜」という時にすぐ動かせる場所がほしくて書いています。 webGL入門サイト webglfundamentals wgld.org ICSメディア オススメwebGL学習教材(動画) codemafiaさん shin-codeさん
WebGLと比較して学ぶWebGPU
Webブラウザ向けの低レベルAPI「WebGPU」について、WebGLと比較しながらそのメリットを紹介します。 本記事は、TechFeed Experts Night#5 〜 Web3D,WebXRを語るのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 みなさん、こんにちは。@emadurandalと申します。今回は「WebGLと比較して学ぶWebGPU」と題して発表させていただきます。 私自身の紹介についてですが、私は2015年ごろにWebGLにはじめて触れて、それ以来3Dライブラリ開発をずっとやっています。Rhodoniteというライブラリを開発して、長らくWeb3Dの情報を発信しています。現在は株式会社HIKKYで、WebGLベースのメタ
Build an interactive WebGL experience with Next.js – Vercel
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
【初心者向け】iPhone 3Dスキャンパーフェクトガイド｜iwama
こんにちはiPhone3Dスキャンを日本中に普及させる男ことiwamaです。 2020年の10月にiPnone12Proシリーズに初めてLiDARセンサーが搭載され、現在では様々な業界でiPhoneの3Dスキャンが活躍し始めています。 そこで今回はiPhone3Dスキャンって何？でどういうアプリがあるの？などの初心者向けの解説を行っていこうと思います。 ※この記事は2023年2月3日に、より初心者向けの記事になるよう大規模な改修作業を行いました。 自分の記事を読んで為になったという方にお願いです。可能な限りで良いので令和6年能登半島地震の被災地支援のため募金活動をよろしくお願いします。 3Dスキャンについて学ぼうそもそも3Dスキャンって何？現実にある物体や空間をデジタル3Dデータ化する技術の事を(このnote内では)3Dスキャンといいます。 3Dスキャン技術には様々なモノが存在していますが
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も
マイクロソフト、Webブラウザで3Dゲームがびゅんびゅん動く「Babylon.js 5.0」正式リリース、WebGPUにフル対応、iOS/Androidなどクロスプラットフォーム展開も マイクロソフトは、JavaScriptで2Dや3Dモデルを高速に扱えるライブラリ「Babylon.js」の最新版「Babylon.js 5.0」正式版をリリースしました。 We'd like to formally introduce the next version of the Babylon Platform - #BabylonJS5 Blog: https://t.co/aMgjIIeIin Video: https://t.co/OMssjZZPPz#gamedev #gamedevelopment #indiedev #indiedeveloper #webdev #3D @WebGPU #w
WebGPUとRustでネコチャンを点描した話
はじめに 昨年１２月にこんなツイートを見かけました。 かわいいですね。幸いにして論文と実装が公開されていたので、自分でもやってみようと思って、その結果を書いたのが前回の記事です。 読んでいただければわかるとおり、前回の記事の中ではGPUを使わずにアルゴリズムやデータ構造を工夫して近似的に計算しています。結果の画像についてはそんなに悪くないと思っていますが、限界もありました。パーティクルの数も少ないし、一部の画像ではうまく行きませんでした。 やっぱり、もっとちゃんとネコチャンを点描してみたいですよね。 なので、今回の記事ではGPUを使ってアルゴリズムを再現し、よりヴィヴィッドなネコチャンの点描を作成しようと思います。GPUを使って計算するために、WebGPUのRust実装であるwgpuを使用します。ネコチャンの画像を点描にしたい人と、WebGPUに入門してcompute shaderで何か計
驚くほど簡単に3Dシーンを構築！React Three Fiberを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアになりたてのぼこです。 みなさん、Three.jsは好きですか？（唐突） 僕はWebサイトの中でも特に演出やグラフィック、インタラクションに凝ったものが好きなので、表現の幅を増やすためThree.jsと仲良くなれるよう奮闘しております。 話は少し変わりますが、最近はWebサイト制作でも、Next.js（React）やNuxt.js（Vue）を採用することが増えてきている印象です。 NextやNuxtでサイトを作る場合、従来の制作とは手法も考え方も大きく変わると思いますが、そこにThree.jsを導入する場合もやはり注意するポイントが増えます。 そこで、今回は React Three Fiber というライブラリについてお話ししたいと思います。この後詳しく書いていきますが、ReactコンポーネントのようにThree.jsが書けるライブラリで、驚くほど簡単に
Rust・WebAssembly・WebGLで作る回路シミュレータ CADに書いたCPUの回路図がそのまま動く
Kernel/VM探検隊はカーネルや仮想マシンなどを代表とした、低レイヤーな話題でワイワイ盛り上がるマニアックな勉強会です。KOBA789氏は、シミュレータとCADの制作について発表しました。全2回。後半は、回路CADの制作方法について。前半はこちら。 自作CADに求めること KOBA789氏（以下、KOBA789）：シミュレータができたので、次はCADを作っていきます。書いた回路図がそのまま動くCADがなかなかないので、私はCADに書いた回路図がそのまま動くことを一番求めていました。 大抵の場合、回路を書くCADとシミュレータが別々になっています。まじめな回路を組むのであればそのほうが楽なのですが、だいたいタイミングチャートのかたちで表示されるんですよね。 プローブをいろいろなところにくっつけて、そのプローブの値が時間経過でどうなったかというタイミングチャートがバーッと出るわけです。たく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Babylon.js Tips集
Babylon.js 5.0: Key Engine Advancements – Part 3