WebGPUでガチリアルタイムレンダリングの世界が見えてきた - Qiita
ここ数年、Qiita上ではもっぱらポエムを生業としつつあります。@emadurandalです。こんにちは。 本記事ではWebGPUのWeb3Dにもたらす意味や効果について語っていこうと思います。とってもポエミーです。よろしくお願いします。 （なお、現時点でのWebGPUでは未対応で、将来的なサポートが議論されている未来の機能を前提にした話もしています） なぜWebGPUが必要とされているのか そもそもなぜ、WebGPUなのでしょうか。別にWebGLのままではいけないのでしょうか。 OpenGLは4.x世代が引き続きアップデートを続けていますし、OpenGL ESも3.x世代がコンピュートシェーダーを獲得するなど進化を続けています。それをベースにWebGL2とかWebGL3とかで順当にアップデートしていけば良いのではないでしょうか？ そう思う方も多いでしょう。 しかし世の中を見渡すと、Web
3DボクセルをWebGLで企業サイトに組み込んだ際の考察過程
はじめまして。フロントエンドエンジニアの田島と申します。 ちょうど今から約１年ほど前に鹿児島にあるアプリファクトリーはるni株式会社というゲーム開発会社様にお声がけいただき、お仕事として企業サイトを制作致しました。 以下のツイートにて、サイト内での操作イメージを短くまとめた動画を添付しています。 サイトの制作方針として、はるni様が制作を得意とする3Dボクセルを中心に据える方針で企画が固まり、技術的にチャレンジングな仕事となりました。その際、私自身多くの方々の技術記事等を参考にさせていただいたため、自分も微力ながら制作の過程で得られた知見を共有できればと思い、記事に残すことにしました。 （ただし、WebGLやThree.jsの扱いに関して未熟な点も多分にあるため、各章でより良いアイデアをお持ちの方はコメント等で温かくご提案いただけますと幸いです。） 技術検証 陰影を事前にベイクするか、リア
簡単な Three.js のサンプルを試そう - ICS MEDIA
Three.jsはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 ライブラリのセットアップから3D画面への表示および直方体の回転までを紹介します。手順通りに進めば、20分くらいで作業が完了できると思います。 サンプルを再生する サンプルのソースコードを確認する まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。 <html> <head> <meta charset="utf-8" /> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js" } } </script> <script t
Three.js Journey — Learn WebGL with Three.js
Everything you need in one place: 91 hours of video to go from absolute beginner to advanced Three.js developer.
【Three.js入門】初心者がまず見るべきサイト・書籍まとめ | AndHA Blog
【Three.js入門】初心者がまず見るべきサイト・書籍まとめ 公開日 : 2021.09.03 最終更新日 : 2022.10.05 コーディング Three.jsを勉強しようと思っても簡単なやり方や概念を説明してくれているサイトはたくさんあるけど、実際案件で使用するためにはどうやって勉強していけばよいのか分からない人は多いと思います。 今回はThree.js初級者が中級者になるために見るべきサイトや書籍をまとめました！ これら全てを行えば、初心者を脱出出来るでしょう！ 【サイト】Three.js入門サイト WebGLやThree.jsのことを調べるまず最初に出てくる池田 泰延:twitterさんが初心者にも分かりやすくThree.jsのことを説明してくれています。 まずはこちらのサイトから勉強を進めてみるのが良いかと思います。 https://ics.media/tutorial-th
Three.jsの勉強の仕方 - Qiita
概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber（Three.jsをReact用にラッパーしたライブラリ｜以下、R3F）を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ
Splineを使って3DCGを簡単にWebに取り入れてみよう｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
こんにちは、GIGでデザイナーをしているおみどです。相変わらず3D表現を用いたデザインに惹かれてます。 グラフィック単体としても好きですが、Webサイトに取り入れた際に生み出される立体感のある奥行きなどが、サイトの世界観をよりいっそう深め、見ている人を引き込むところに魅力を感じています。3Dコンテンツは、サービスやプロダクトの良さを伝えるための、ブランディングの付加価値にもなるのではないでしょうか。 今回は、3DCG制作に興味のある方だけでなく、「実際に3D作品を作ってみたはいいけどWebで表示させるためにはどうすれば良いのか」など、3D作品の活用方法にお悩みの方にもおすすめの内容です！ はじめに私は、普段3DCGを制作するときは『Blender』を使っていて、前回の記事でもBlenderを使った3DCGを紹介しました。今回は比較も兼ねてさらに操作しやすい『Spline』を紹介します。2年
3Dモデル→高品質な線画に変換できるWebサイト公開 漫画や絵を描く人から「これはすごい！」「綺麗で驚きました」と絶賛
手元の3Dモデルデータを線画に変換できる無料Webサイトが登場しました。漫画の背景などを描くのに活用できそう！ AIエンジニアのまっくす（@minux302）さんが公開したWebサイト。3Dモデルのデータをブラウザにドラッグ＆ドロップするだけで簡単に読み込み、線画に変換してくれます。しかも、線画の状態でもカメラ位置をグリグリ動かすことも可能。これはすごいぞ……！ 3Dモデルが…… 線画に変換できる！ カメラの位置も移動可能 Twitterでは「息子用のぬり絵がすぐにできる！！！」「超便利なやーつ！！」とツールを称賛する人の声が寄せられています。 なお、アップロードできるデータの形式はgltf、glb、fbx、objです。 投稿提供：まっくす（@minux302）さん ネットの反応を見る advertisement 関連記事 初心者が「ガラガラなのに隣に座ってくる人対策」の3Dアニメを作った
WebGLの基礎 | 第1回 フロントエンドのグラフィック技術
基本的な考え方は変わりませんが、一部書式が変更されています。また古いライブラリバージョンは、現在最新のブラウザで再生できない機能が含まれています。（2016年9月現在） HTML5はグラフィックのための技術 HTML5やそれに関連する技術は、WebページやWebアプリケーションを作るための技術として注目されていますが、同時にグラフィックスのための技術でもあります。 たとえば、HTML5では動画を埋め込めるvideo要素や、audio要素があります。CSS3では、アニメーションを可能にするtransitionやanimation関連のプロパティ、また要素の変形を行うtransformなどの新しいプロパティが加わります*。 *注：CSS3アニメーション CSS3アニメーションに関しては以下のシリーズが配信されています。 根っこから学ぶCSS3アニメーション また、タイポグラフィーを豊かにする@
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js docs
three.js - examples
Spline
3D model - Sketchfab
株式会社エーリンクサービス
WebGL開発｜株式会社エーリンクサービス