これは MIERUNE AdventCalendar 2023 24日目の記事です! 昨日は@northprintさんによるSvelteKitでURLクエリパラメーターの操作をするでした。 はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはコチラ 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・

TL;DR モチベーション ウェブページの背景に星空を見せたかった。それがちゃんと実際の星空の、リアルタイムの状況を反映していたら面白いよねと思った。 スタート時の状況 主に愛情のこもった手打ち HTML5 と 手打ち CSS でシンプルな Web ページを作っていた https://web.archive.org/web/20210212085818/celestian.io この前にどうやら React が世間では流行ってるらしいということで React と TypeScript を使った小さい 1 ページアプリを作った https://web.archive.org/web/20201202100627/https://celestian.io/ssr/ 今の https://celestian.io/sushi の前身 C# で WPF のデスクトップアプリとか作ってたことがあった

こんにちは。フロントエンドエンジニアになりたてのぼこです（ついに2年目になってしまいましたが気持ち的には「なりたて」です）。 今回は、前回の記事で紹介したReact Three Fiberを使って、もう少し具体的な表現をしてみようということでパーティクルアニメーションの実装をしてみました。Webサイトのクリエイティブ表現といえばまずはパーティクル、みたいなとこありますよね（？） コードの量は少なめにシンプルな演出にしたので、React Three Fiberを始めたての人にも参考になると嬉しいです。

We create beautiful expressions through programming and deliver the best possible experiences.

こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを

はじめに Three.jsガッツリやりたいなぁと思いながら業務では日々、Go言語でジオメトリをこねこねしているあんどうです。 先日立てたThree.js Advent Calendarが無事に全日埋まり、Three.jsを育ててくれたWebGLへの限りなく大きな恩、自分なりに少しでも返すためWebGL Advent Calendarにも参加しようと思い立ったんですが、よく考えてみれば生WebGLなんも分からず。仕方がないのでThree.jsからどんな感じにWebGLのドローコールまで繋がっていくかを解説・・・するふりをしてコード読みながら勉強しようと思います。 プロローグ Three.jsで立方体を描画するコードを削れるだけ削ると次のようになります。 // シーン const scene = new THREE.Scene(); const geometry = new THREE.Box

A creative coding exploration into how to recreate a high-speed lights effect in real-time using Three.js. Sometimes I tactically check Pinterest for inspiration and creative exploration. Although one could also call it chronic procrastinating, I always find captivating ideas for new WebGL projects. That’s the way I started my last water distortion effect. Today’s tutorial is inspired by this alte

この記事は非推奨です。Three.jsのコアからGeometryクラスは完全に削除されているため、この記事を読む必要はありません。 はじめに WebGLライブラリThree.jsには、GeometryとBufferGeometryの2種類の形状を表す形式がありました。現バージョンではGeometryは削除されています。 この記事では 2つの形式の関係 2つの形式の操作の違い パフォーマンス の3点について解説します。 対象とする読者 この記事はThree.jsをすでに利用しているユーザーを想定しています。 そのためThree.jsのインストールガイドなどの内容は取り扱いません。 環境 この記事はThree.js r125を前提にしています。 バージョンが変わった場合、この記事の内容は適用できない場合があります。 記事を読む前にお手元の環境の確認をお願いします。 先に結論だけ r144で**

概要 この記事では「three.js超入門」と題して、three.jsの基礎からシェーダーの利用までをやっていきます。 ターゲットは主に「canvas表現を触ったことがないフロントエンドエンジニア」を想定しているので、jsの構文などの説明は省略しています。 three.jsのバージョンは執筆時点で最新のr98を使用します。 three.js超入門 第0回 3Dコンピュータグラフィックスの基礎 three.js超入門 第1回 レンダリングまでの流れ three.js超入門 第2回 アニメーションと時間ベースでの制御 three.js超入門 第3回 マウスやスクロールでのインタラクション three.js超入門 第4回 getBoundingClientRect()を使ったDOM要素との連携 three.js超入門 第5回 シェーダー(GLSL)の基礎 three.js超入門 第6回 Shad

Colin Barre-Brisebois - GDC 2011 - Approximating Translucency for a Fast, Che...Colin Barré-Brisebois

デモページ ソースダウンロード Webブラウザ上で3DCGを扱うための仕組みであるWebGL。そのWebGLを扱うにあたって活用されているのが、無料で利用できるJavaScriptライブラリ『three.js』です。 今回はこのthree.jsとTweenMax（GSAP）を使用して、インタラクティブエフェクトを作成する方法をご紹介します。 なお、エフェクトはBestServedBoldのHolographic-Interactionsを参考にしています。 完成予定図 ひとつめのデモでは完成された実用的な例をご紹介しましたが、これから作成過程をご紹介するデモは調整およびアレンジが可能です。 また前述のとおり、今回ご紹介するエフェクトはBestServedBoldによるHolographic-Interactionsを参考にしています。 コアコンセプト エフェクトを作成するにあたってコアとな

GPGPU用のヘルパーライブラリであるGPUComputationRenderer.jsの使い方を調べてみました。 GPGPUが難しいので上手く説明できておらず、よくわからない文章になってしまっています。 あまり参考にならないかもしれません。 こちらの「Three.jsのGPGPUのサンプルが難しすぎるから解体して勉強してみる」のがとてもわかりやすので参考になります。 やること事 なんとなくのイメージこんな感じです。 GPGPUなのでテクスチャをデータ格納用に利用します。 テクスチャは、参照用と、データ格納用を作成して毎レーム入れ替えていきます。 ※複数のフレームバッファを使う場合です。1つだけの場合は「オフスクリーンレンダリング2」はいりません。 STEP 1 GPUComputationRendererのインスタンスを作成する。 引数のwidth, height, rendererはオ

オフスクリーンレンダリングに挑戦してみたいと思います。 オフスクリーンレンダリングとは、画面には表示せずにメモリ空間上に描画することです。 この一時的に描画されるメモリ空間のことを「フレームバッファ」と言います。 今回は以下の図のように、オフスクリーンレンダリングした情報をテクスチャ画像として、画面上に表示してみたいと思います。 手順１: ベースシーンを描画 まずはベースとなるシーンを描画してみる。 基本的には普通の描画方法と同じ。 window.onload = function () { var renderer; var baseCamera, baseScene; var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; // rendererの作成 var renderer = new

概要 こんにちは。普段、WebGL(Three.js)をいっぱい使っているukonpowerです。 シェーダーアドベントカレンダー、フラグメントシェーダーを使ったすごい記事がいっぱいありますね... とてもかないそうにないので今回はバーテックスシェーダーに焦点を当て、バーテックスシェーダーだけでいい感じの演出(？)を作るにはどうすればよいかご紹介できたらなと思います。 なおこの記事ではThree.jsで実装しますが、Unityなど他のツールでも役立つよう、出来るだけ考え方をメインに解説したいと思います。 Three.jsとは WebGLを超絶簡単に使えるようにしてくれるウルトラハイパーラッパーライブラリです。 (個人的見解です） Github: https://github.com/mrdoob/three.js 今回使うシーン 今回は以下のようなただの立方体が浮かんでるシーンをバーテック

はじめに GLSLを触り始めるとやっぱりやりたくなりますよね。Curl Noise。 残念なことにWebGLではまだCompute Shaderは対応されてない状況です。(WebGL2.0から対応するらしい） ですが、Three.jsにはGPUComputationRendererというものございまして、誰でも簡単に粉を飛ばせます。 今回作成するものです。gitはこちら。 また、今回はCurl Noiseの説明というよりかはThree.jsでGPUComputationRendererを使ってGPGPUをすることについて解説します。 実装の大まかな説明 Curl Noiseのようなパーティクルは少なくとも1万くらいのパーティクルを出すことが多いですが、普通にThree.jsでオブジェクトを生成、位置の更新を行うと非常に重い、というか生成すらままならないかもしれません。 そこで、GLSLの出

最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。 4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。 以前から気になっていたBRDG/VRDG方面のイベントらしい。 会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。 そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。 先週末に開催したチャネル#16 のライブ映像を公開しました。 https://t.co/YgpC3YYC0B #unity3d #tidal #maxmsp #tokyo #BRDG #livecoding #kodelife pic.twitter.com/rWaHodipUA— BRDG / VRDG (@toky

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は、KLab Engineer Advent Calendar 2018 10日目の記事です。 はじめに 今月頭の12/1から12/2にかけて、日本で唯一のデモパーティであるTokyo Demo Fest 2018が開催されました。 デモパーティをご存じではない方のために、公式サイトから引用します。 デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティション(コンポ)やセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深めら