JavaScriptでGPUを簡単に扱えるライブラリ「GPU.js」レビュー、並列処理で多次元の演算が爆速に
GPUを用いた並列演算に利用されるプログラミング言語といえば、機械学習の研究などに利用されるPythonが一般的ですが、JavaScriptによるウェブアプリでもGPUを用いたい場合があるはず。オープンソースのJavaScriptライブラリ「GPU.js」を使うと、スクリプトを実行するコンピューターのGPUを利用して並列処理を行うことで、多次元の演算などを高速に行うことができます。 GPU.js - GPU accelerated JavaScript https://gpu.rocks 今回GPU.jsを動かすシステムは以下。CPUはIntel Core i5-4570、GPUはAMD Radeon RX480、OSはUbuntu 20.04、ウィンドウシステムはWaylandを使用しています。 カーネルバージョンは5.4.0-42 ロードしているドライバーはこんな感じ。Linuxに標準
これだけ覚えればできる！Three.jsのGPU Instancing - Qiita
概要 WebGLには拡張機能でインスタンシングなるものがあります。GPUに一つだけ3Dモデルのデータをロードし、GPU側でまとめて描画させることで高速に大量のモデルを描画する手法です。 Three.jsにはそれをラップしたInstancedBufferGeometryがあるのでそちらの使用法を解説したいと思います。 作るもの Gitはこちらです。 デモはこちらです。 どうやって作るの？ 手順は以下のようになります。 ベースとなるモデルのジオメトリを生成 InstancedBufferGeometryを用意 InstancedBufferGeometryに全てのモデルに共通のAttribute（頂点座標やノーマル、インデックスなど）を設定 モデルごとで異なる値のAttributeを生成、InstancedBufferGeometryに設定 シェーダーを作成。 メッシュ（ラインなどでも）を生成
CSSアニメーションがGPUで処理されているか確認する方法
CSSアニメーションによるGPU処理 昔はWebサイトでアニメーションを行う際はJavaScriptがよく使用されたが、現在はCSSアニメーションが使用されることが多い。 理由はJavaScriptは主にCPUで処理するが、CSSはGPUを併用して処理するため処理負荷が軽く、スマートフォンなどの低スペックな端末でもスムーズにアニメーションを行うことができるからだ。 ただし、CSSを使用してアニメーションを行っていても、正しく使用しないとGPUで効率的に処理することができない。 GPU処理の確認方法 Chromeの場合はまずChrome Developer Toolを開いて3点ボタンをクリックしてRenderingを選択する。 RenderingタブでPaint flashing、Layer borders、FPS meterにチェックを入れるとアニメーション部分に枠線が付き、fpsやGPU
JavaScriptでグラボの情報を取得する - Qiita
<!doctype html> <html> <body> <canvas id="canvas" width="0" height="0"></canvas> <script type="text/JavaScript"> var canvas; canvas = document.getElementById("canvas"); var gl = canvas.getContext("experimental-webgl"); var renderInfo = gl.getExtension("WEBGL_debug_renderer_info"); if (renderInfo != null) { var vendor = gl.getParameter(renderInfo.UNMASKED_VENDOR_WEBGL); var renderer = gl.getParamet
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
必見？ Mozillaが提供しているユーザー環境週報がなにげに興味深い件について／グラフィックス、プロセッサー、OS、「Adobe Flash Player」プラグインの有無を集計【やじうまの杜】
