Learn Shader Programming with Rick and Morty
This animation of Rick was made with 240 lines of code. No libraries, no images. I’m going to show you how to use GPU shaders and signed distance fields to make animations like it for videos, video games, or just for fun! I even built a live coding editor into the page so you can see the examples running and tinker with them. vec2 rotateAt(vec2 p, float angle, vec2 origin) { float s = sin(angle),
3DのWebサービス開発で宣言的なWebGLライブラリを導入して感じた保守運用上のメリット - Spacely Tech Blog
1 はじめに スペースリーでエンジニアをしている長谷川です。 最近は3DのWebアプリの開発を担当していて、弊社でリリースしている「パノラマ変換3Dプレイヤー」のコンテンツ作成機能などを開発しています。 3DのWebアプリを開発する際には「React/Vue × WebGL系ライブラリ」という構成が代表的なケースの1つであり、弊社でもその構成を選択しました。 ところが、3D Webアプリはサービスの数としては多くないので保守運用まで考慮した設計ノウハウはまだまだ十分に共有されてはおらず、開発を進めるにあたって以下のような懸念点がありました。（詳細は次章） 「宣言的なReact/VueのWebアプリ」と「命令的なWebGL系ライブラリ」というスタイルの違うコードが混ざることでそれぞれの責任分担が曖昧になりやすい 「WebGL系ライブラリを用いた3Dアプリ」の保守運用を考慮した設計に関するノウ
WebGLとCanvas2Dを併用してみる - Qiita
WebGLとCanvas2Dを併用できないかな〜とぼんやり考えてたら、以下のAPIを見つけました。 ・Canvasリファレンス なんと第1引数のimageにimg要素、canvas要素、video要素が指定できるとっ！ これで描画して更新すれば、canvas2DにWebGL描画できそうなのでやってみました。 WebGL描画をCanvas2Dに描画 ソースはこんな感じです。 ここには書いてないですが、別途WebGLのcanvasをgetElementByIdし、変数canvasを渡しておきdrawImageの第1引数に指定します // WebGLのcanvasとは別に、2D用のcanvasタグをHTML側に作って参照する var can_2d = document.getElementById("2dcanvas"); var ctx_2d = can_2d.getContext("2d")
【PR】このクオリティで無料？ ユニティちゃんが懇切丁寧に教えるUnity使いへの道：Udemy講座編
【PR】このクオリティで無料？ ユニティちゃんが懇切丁寧に教えるUnity使いへの道：Udemy講座編 編集部：aueki 「ゲームを作る」――ゲーマーならば，誰しも一度は夢見たことがあるのではないだろうか？ そして昨今では，「Unity」にしても「Unreal Engine」にしても，プロのゲームクリエイターが使っているのと同じゲームエンジンが無料で公開されているという，夢のような状況が実現されている。にもかかわらず，それらを使いこなすのはなかなか難しい。 ダウンロードやインストールまでは非常に簡単なのだが，たいていの人はそこで止まってしまう。デモを動かすことはできても，それを使ってゲームを作れそうというイメージは湧いてこない……そんなところではないだろうか。 これらのゲームエンジンはなんのかんのと言っても「プロ用のツール」であり，それほど取っ付きやすいわけではない。それぞれに，作法とい
)
Procedural GL JS - WebGLで地図を立体的に表示
WebGLを使うと通常のDOMでは表現しづらいことも実現できます。GPUを使うことでグラフィックスの性能も向上しますが、JavaScriptの実装と大きく異なるので習得の時間が必要です。 今回紹介するProcedural GL JSはWebGLを使った実装例になります。こうした表現もできるのだという学びになるでしょう。 Procedural GL JSの使い方 普通の地図表示としても使えます。 山脈を表示しています。立体になっています。 拡大しています。 平面的な表示です。 Procedural GL JSはTHREE.jsを使って高度に合わせて実際の山脈に合わせて表示します。サンプルとしてニュージーランドの地図もあります。回転したりズームイン、ズームアウトもでき、地図をよりリアルに体験できます。 Procedural GL JSはJavaScript製のオープンソース・ソフトウェア（Mo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://x.com/sho4771k
https://x.com/danetag/status/2001335712982147307?s=46&t=WLoQjPOJLfZ0ZJFtTOS7aw
GitHub - playcanvas/engine: Powerful web graphics runtime built on WebGL, WebGPU, WebXR and glTF
GitHub - playcanvas/editor: Browser-based visual editor for building WebGL, WebGPU, WebXR apps
GitHub - fand/vfx-js: WebGL effects made easy.
GitHub - thkruz/keeptrack.space: 🌎📡 TypeScript Astrodynamics Software for Non-Engineers. 3D Visualization of satellite data and the sensors that track them.
GitHub - antvis/L7: 🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.
Amazon.co.jp: 初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3Dアプリケーション: Farhad Ghayour (著), Diego Cantor (著), あんどうやすし (翻訳): 本