頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA
ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コードを確認する 3Dを感じる理由 まず3Dをユーザーに感じさせる理由について考えてみます。紙面にしても画面にしても実態は2Dの平面世界です。画面の中で3Dを感じるのは、人間が2D的に描かれたものから奥行きを知覚する特性があるからです。たとえば、すぼまっていく2本の線があると線が平行であると認知し、奥行きを感じます。この現象を体系化したものが遠近法です。 より具体的な手法として透視図法があります。Three.jsを使った3D表現もこの透視図法によって描画されています。描画自体
WebGPUでブラウザからGPTなど言語モデルを体験できる「WebGPT」
GPUプログラミングをブラウザ上で行うことができるAPI「WebGPU」に、Google Chromeのバージョン113から正式に対応するようになりました。このWebGPUを使って、GPTなどの言語モデルをブラウザ上で体験できる「WebGPT」が公開されています。 GitHub - 0hq/WebGPT: Run GPT model on the browser with WebGPU. An implementation of GPT inference in less than ~1500 lines of vanilla Javascript. https://github.com/0hq/WebGPT WebGPTはデモページが公開されており、以下からアクセスできます。 WebGPU GPT Model Demo https://www.kmeans.org/ WebGPTはWeb
ブラウザ上で3Dキャラクターと会話できる「ChatVRM」をオープンソースで公開しました - pixiv inside
こんにちは、VRoid部のkeshigomuです。 普段は主にVRoid Hubのフロントエンドエンジニアとして、3Dキャラクターを表示するビューワーの開発に携わっています。また@pixiv/three-vrmという、Web上で3Dモデルを使ったコンテンツを開発するためのOSSライブラリの運用も行っています。 今回、ブラウザで簡単に3Dキャラクターと会話できる技術デモ「ChatVRM」とそのコードをオープンソースで公開しました。 「ChatVRM」は、テキスト・口頭で話しかけた言葉にキャラクターがフルボイスで回答してくれる「キャラクターと会話できる」デモです。WEBブラウザ上で動作でき、3Dキャラクターのインポート・切り替え、キャラクターに併せて声を調整することもできます。 (2023/07/10追記) 読み上げ音声の生成に使用していたKoeiro APIの提供終了に伴い、以前のデモとコー
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のフルサポート
Webブラウザ上でGPUプログラミングを可能にする「WebGPU」、Chrome 113で正式版に。3Dレンダリングや機械学習など高速処理
Webブラウザ上でGPUプログラミングを可能にする「WebGPU」、Chrome 113で正式版に。3Dレンダリングや機械学習など高速処理 GoogleのChrome開発チームは、WebブラウザでGPUプログラミングを可能にするWeb標準「WebGPU」が、4月26日にリリース予定のChrome 113で正式な機能として提供されることを明らかにしました。 WebGPU, one of the biggest additions to the Web platform is finally shipping in Chrome! Many thanks to all Chromium contributors in making this possible.https://t.co/26vmxtQWi1 https://t.co/FKGC3M3FVD — Chrome Developers
Stable Diffusion開発元が3Dアニメーション生成AI「Stability For Blender」を発表、アニメーション生成や3Dモデルのテクスチャ生成などが可能
画像生成AI「Stable Diffusion」の開発元であるStability AIが、3DCGソフトウェア「Blender」上で動作するAI搭載拡張機能「Stability For Blender」を公開しました。Stability For Blenderでは「Blenderで作成したラフ画像を元に好みの画像を生成」「テクスチャのラフ画像からリアルなテクスチャ生成」「アニメーションを生成」といったAI機能を無料で使えます。 Stability for Blender https://platform.stability.ai/docs/integrations/blender Stability AI Announces Stability For Blender; Text To Image Creation in 3D — Stability AI https://ja.stabi
iPhoneアプリ「Metascan」で撮影した3DモデルをAWS IoT TwinMakerで使ってみた | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 前回のエントリでiPhoneのLiDARを利用してMatterportアプリによる3Dスキャンをしてみましたが、他のLiDAR対応アプリも試してみたくなりました。 一般ユーザーが簡単に使える3Dスキャンアプリはメジャーなものでも5種類くらいが出回っているのですが、今回使ってみたのはMetascanです。 Metascan - 3D LiDAR Scanner Metascanを選んだ理由としては、既製品のアプリだけでなく開発用のSDKも提供されている点が面白そうだったからです。（このAbound SDKについては次回以降触れてみたいと思います） というわけで今回は、iPhoneアプリ「Metascan」で撮影した3DモデルをAWS IoT TwinMakerにインポートするところまでやってみます。 端末 使用した端末はiPhone 12
three.jsやpixi.js等のライブラリを一切使わずにwebGL実行環境をJavaScriptスクラッチする(したい)
青い長方形が表示されているだけですが、テクスチャ画像に表示を切り替えたり頂点の数を変えたり(四角を三角にしたり)する場所にコメントを入れてコネコネできるようにしています(リサイズ対応済み...のはず) 埋め込みcodepenの下に連ねている引用元の素晴らしい入門サイトから、バラバラとコードを繋ぎ合わせているため、コードの整合性や効率に言及できていません。「動いた〜〜やった〜〜」程度の実験場です。「ちょっとこのfragmentShaderの挙動試したいな〜」という時にすぐ動かせる場所がほしくて書いています。 webGL入門サイト webglfundamentals wgld.org ICSメディア オススメwebGL学習教材(動画) codemafiaさん shin-codeさん
three.jsで流体シミュレーション(stable fluids) | mofu
We create beautiful expressions through programming and deliver the best possible experiences.
初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blenderで画像生成AI「Stable Diffusion」が使える無料アドオン
画像生成AI「Stable Diffusion」を「Blender」のテクスチャに作成に利用できる「Dream Textures」を導入してみた【Blender ウォッチング】
Unity Version Control (Previously Plastic SCM) - Fast VCS | Unity