[WebGL] Three.jsでジオメトリインスタンシングを使ってモデルをレンダリングする - Qiita
現状、通常のフローでモデルデータを読み込んでそれをそのままジオメトリインスタンシングでレンダリングする方法はないようです。 なので、モデルデータを読み込み、自前で処理する必要があります。 （ただ、ドキュメントも整備されておらず、もしかしたらまだ安定していないかもしれないので、利用する場合は自己責任でお願いします） ちなみに今回の解説用に作ったサンプルはGithubに上げてあります。 （動作デモはこちら） ジオメトリインスタンシングって？ さて、まずジオメトリインスタンシングとはなにか。 WebGLでの詳細についてはエマさんのこちらの記事（WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる）がとても分かりやすく書かれているので読むことをおすすめします。 ざっくり言うと、プログラムで言うところのクラス・インスタンスの関係をジオメトリ
![[WebGL] Three.jsでジオメトリインスタンシングを使ってモデルをレンダリングする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c5756cb85af8e6102892d68e94ad80d0d6d5fdb2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCV2ViR0wlNUQlMjBUaHJlZS5qcyVFMyU4MSVBNyVFMyU4MiVCOCVFMyU4MiVBQSVFMyU4MyVBMSVFMyU4MyU4OCVFMyU4MyVBQSVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MiVCOSVFMyU4MiVCRiVFMyU4MyVCMyVFMyU4MiVCNyVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MyVBMiVFMyU4MyU4NyVFMyU4MyVBQiVFMyU4MiU5MiVFMyU4MyVBQyVFMyU4MyVCMyVFMyU4MyU4MCVFMyU4MyVBQSVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MzdjYzliNTNlZGNiYzZjZDlmYzExOThiNTI5NzhkNzA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMmQ5MGMxNzhmNTEyNmZmYmVlZTEzOTliMzVmNzRhZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df45cd9874753541d85aa87dde9639c69)
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の中で
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c6b612bbe897c30bb1fb761bba9a593a8115da9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTkxJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wZDY4ZGYzNWRmMWRjMmZhYWViNTZlMTMyNWZiOWFhYQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkb3hhcyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGZmYmRmOWY2NWFmYmViZGRmNzVmNTE4MTU0YmE1MDA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3d3dfbf98e256dad2d0be8f5a23778c1)
js4k intro - GLSL editor
シェーダの文字数: 1003 HTML全体の文字数: 3858 操作 Ctr + s || Command + s ： リロード(エディタにフォーカス中) Esc ： アニメーションの停止 ダウンロード ダウンロードボタンから HTML ファイルをダウンロードできます。文法チェックはしてません。 precision mediump float; uniform vec2 m; // mouse uniform float t; // time uniform vec2 r; // resolution uniform sampler2D smp; // prev scene vec3 hsv(float h, float s, float v){ vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(vec3(h
おれメモ, Canvas系JavaScriptライブラリ一覧
Canvas用のライブラリでたまにしか使わないのとか名前すら忘れてるし、あそこのTutorialステキじゃんてのもどこだったか忘れてしまうボンクラ脳のためのメモ。 2D CreateJS 王道。 さすがに忘れること無いけど。 Paper.js 最近どかすかアップデートされてる。 むにむにした動きがCanvasらしく無くキモくて好感度高。 Processing.js パフォーマンスが出ない、つうか出すノウハウを持ち合わせていないので使いづらい。 Processing資産をそのまま使えるのは魅力。 ちょこちょこっとモック作ったりするのにいいのかな。 でもそのモックを別のライブラリで実装し直すの大変そう。 Cocos2d-html5 Cocos2d-x派生プロジェクト。 使ったこと無いけど、どうなのと気になってる。 Starling JS 未だに姿を表さない幻のJavaScriptライブラリ。
PhiloGL: A WebGL Framework for Data Visualization, Creative Coding and Game Development
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development. Idiomatic JavaScript PhiloGL is built on JavaScript good practices and idioms, providing an expressive and powerful API Focused on Performance PhiloGL tries to be as close to the gl calls as possible, providing a clear yet tight abstraction to WebGL All the Modules you need PhiloGL modules cover from Program
Shadertoy BETA
Build and Share your best shaders with the world and get Inspired Latest contributions: "Gradinhas" by Elsio 9 minutes ago, "cirlccleMaking" by jessesound 45 minutes ago, "Simple Raytraced Sphere Example" by Spheya 1 hour ago, "Better Graphing Calculator" by ThePlaneGuy45 2 hours ago, "dancing points" by nayk 2 hours ago
スマートフォンブラウザのWebGL対応状況調査(2013年7月版）
皆様、ごきげんよう。 GClueの下っ端社員の☆です。 スマートフォンでWebGLをやる前に皆さんは、WebGLをご存知ですか？ WebGLは、ブラウザ上でウェブブラウザで3Dコンピュータグラフィックスを表示させるための標準仕様のこと。OpenGL2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた3Dグラフィックスを表示可能にする。技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。 WebGLはHTMLのcanvas要素を使っている。 (Wikipediaより） つまりは、ブラウザでOpenGL ES 2.0できるよ！ってことですね。 それによって、ブラウザ上で3Dがグリグリ動くような
逆射影変換でマウス位置を3D空間に表示してみる - Qiita
いわゆるRayCast的なことを自前でやってみるテスト。 気づいたことや分かったことを徒然とまとめていきます。 実際に作ってみたjsdo.itのデモはこちら 手順 手順はまず、マウス座標をビューポートの逆変換をする（これは-1〜1の間に収まるようにするだけ。ただし、Y座標の扱いに注意） 次に、ProjectionMatrixの逆行列を生成する さらにViewMatrixの逆行列を生成する 求めた行列を使ってプロジェクションを適用する関数を通して変換する（逆射影変換も結局は射影変換ってこと？） // スクリーン上のマウス位置3D空間内の座標系に変換（ビューポート行列の逆を行う） mouseX = (mouseX/SCREEN_WIDTH) * 2 - 1; mouseY = -(mouseY/SCREEN_HEIGHT) * 2 + 1;
Intro to Pixel Shaders in Three.js — Airtight Interactive
I recently started playing with shaders in three.js and I wanted to share some of what I’ve discovered so far. Shaders are the ‘secret sauce’ of modern graphics programming and understanding them gives you a lot of extra graphical fire-power. For me the big obstacle to learning shaders was the lack of documentation or simple examples, so hopefully this post will be useful to others starting out. T
wgld.org | WebGL: シェーダの記述と基礎 |
GLSL について知る WebGL では固定機能パイプラインが利用できません。これについては以前のテキスト(レンダリングのための下準備)でも少し触れましたね。 その代わりに、いわゆるプログラマブルシェーダの一種であるシェーダ言語が実装されています。それが GLSL ( OpenGL Shading Language )です。 GLSL は OpenGL との親和性を持つシェーダ記述言語で、C 言語ライクな独自の文法によって記述します。WebGL の難点の一つがこの GLSL であり、GLSL を理解しなければそもそもレンダリング自体を行なうことができません。WebGL の基本プログラムの知識に加えて、GLSL の知識も必要になるのでちょっと大変ですね。 ただし、基本的なことをやるだけであればそれほど難しくはありません。それに、慣れてしまうとシェーダを自分で記述できることの利点のほうが大きく
ここ最近のWeb地図周辺の動向をまとめてみた
Web地図の歴史というのは Google Maps 登場以前と登場後に分けられるのですが、2015年現在、まさにGoogle Maps登場と同じぐらいの変革がWeb地図の世界に訪れているのではないか？ と勝手に思っているので自分の観測範囲内でまとめてみました。 概要 簡単に要点をまとめると、CanvasとかSVGとかWebGLとかブラウザ周りの表現力の進化がWeb地図にも影響を及ぼしていて、そこにGeoJSONのようなそれまでGISなどに疎かったフロントエンドエンジニアにも気軽に扱うことができるフォーマットが普及し始めたことと、降って湧いたようなデータビジュアライゼーションブームなどによって爆発的にエコシステムが増殖し、さらにフロントエンド回りの新技術、仮想DOMとか Web Components とかFRPだとかもろもろいろいろ絡まってよくわからないけど地味に凄いことになっています。 G
GLSLを使ってワンランク上の表現を！ Three.jsでのぷるぷるシェーダーの作り方 - ICS MEDIA
WebGLはウェブページに3D表現を組み込むための技術です。そのWebGLを扱いやすくしたJSライブラリの「Three.js」。Theee.jsとシェーダー言語GLSLを組み合わせてプリンが揺れるデモを作成しました。本記事では、Three.jsでシェーダー言語を利用する手順を解説します。 使用技術について GLSLとはOpenGL Shading Languageの略でその名の通り、OpenGL(WebGL)で使用できるシェーディング言語です。WebGLではライブラリを使用しない場合は、このシェーディング言語を使用してシェーダー（3D描画のための一連の計算セット）を自力で作成しなければなりません。WebGLのシェーダーは2種類あり、バーテックスシェーダーでは頂点の情報を画面上に反映し、フラグメントシェーダーではピクセル単位での描画を行います。今回はバーテックスシェーダーで頂点の位置をずらし
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（1/5 ページ） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 本連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し
Hack The WebGL(WebGL勉強会)
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
Learning WebGL
GDC, GTC and 3D city planning lead this week’s WebGL stories. CALL FOR SUBMISSIONS: WebGL artists, the call for submissions to the 3D Web Fest is open. Deadline to submit is April 8th (project doesn’t need to be done till late April). Don’t delay; submit today! Stockholm-based Agency9’s Johan Göransson and team just released support for iOS and Android for a streaming WebGL 3DMaps and City Planner
ENOUGH
Who could be so lucky?\n\nWho comes to a lake for water\nand sees the reflection of the moon.\n\n-Rumi\n
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
水曜日のカンパネラ OFFICIAL SITE
[JavaScript] CanvasやWebGLが使えるかチェックしたい![[JavaScript] CanvasやWebGLが使えるかチェックしたい](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c35180033ae4020a0e0c1b662cd0d153d918e3f/height=288;version=1;width=512/http%3A%2F%2Fwww.inazumatv.com%2F_fb%2Ffb_inazumatv2.png)
Ocean Wave Simulation
CesiumJS
