From WebGL to WebGPU | Blog | Chrome for Developers
As a WebGL developer, you may be both intimidated and excited to start using WebGPU, the successor to WebGL that brings the advancements of modern graphics APIs to the web. It’s reassuring to know that WebGL and WebGPU share many core concepts. Both APIs allow you to run small programs called shaders on the GPU. WebGL supports vertex and fragment shaders, while WebGPU also supports compute shaders
The magical world of Particles with React Three Fiber and Shaders - Maxime Heckel's Blog
The magical world of Particles with React Three Fiber and Shaders Since writing The Study of Shaders with React Three Fiber, I've continued building new scenes to perfect my shader skills and learn new techniques to achieve even more ambitious creations. While shaders on their own unlocked a new realm of what's possible to do on the web, there's one type of 3D object that I've overlooked until rec
生 WebGL と TypeScript で Vercel のロゴを作る
はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。 なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日
Using WebXR With Babylon.js — Smashing Magazine
In this overview of WebXR technologies and the Babylon.js framework, we’ll embark on a journey through the past, present, and future of mixed reality both on the web and on immersive headsets. We’ll inspect the underpinnings of WebXR and the most important aspects of the WebXR Device API before turning our attention to Babylon.js, a framework for building immersive applications in JavaScript for w
Barebones WebGL in 75 lines of code
Jul 8, 2020 • Avik Das Modern OpenGL, and by extension WebGL, is very different from the legacy OpenGL I learned in the past. I understand how rasterization works, so I’m comfortable with the concepts. However, every tutorial I’ve read introduced abstractions and helper functions that make it harder for me to understand which parts are truly core to the OpenGL APIs. To be clear, abstractions like
Raw WebGPU
Raw WebGPUAlain Galvan ·12/26/2019 @ 7:30 PM · Updated 2 days ago An overview on how to write a WebGPU application. Learn what key data structures and types are needed to draw in WebGPU. WebGPU is a new graphics API for the web that follows the architecture of modern computer graphics APIs such as Microsoft DirectX 12, Vulkan, and Apple Metal. This shift in paradigm for web graphics APIs allows us
2019年のWebGLデバッグツール状況 - Qiita
これはThree.js Advent Calendar 2019の14日目の記事です。 3年前に以下の記事を読んでWebGL Inspectorを使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。 WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう 「Three.jsにBaylon.jsみたいなDebug modeある？」という議論を見つけて気になったので、現状のWebGLデバッグツール状況を調べてみました。 Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer) 消失したデバッグツール WebGL Inspector 最終更新日（github）：2017/02/22 去年はまだChromeウェブストアにあった
JavaScriptのWebGL 2.0でGPGPU - Qiita
はじめに WebGLはブラウザでGPUを使って3D表示をするためのAPIです。 WebGL 2.0は1.0に比べてGPUによる汎用計算(GPGPU)の機能が強化されています。 WebGLは複雑な手順に従ってAPIを呼ぶ必要があり使いづらいので、簡単にGPGPUのプログラムを作れるライブラリを作ってみました。 以下ではこのライブラリの使い方を説明します。 ライブラリの詳しい説明は以下にあります。 http://lkzf.info/gpgpu.js/doc/ ソースはGitHubに上げています。 https://github.com/teatime77/gpgpu.js/blob/master/js/gpgpu.js ライブラリの本体はgpgpu.jsという1個のファイルです。 このファイルをGitHubからコピーしてきて、HTMLファイルのhead部分に以下の1行を入れてください。 WebG
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - lesnitsky/webgl-month: 🎓 Daily WebGL tutorials