Safari 12でサポートされたWebGL Shader Debuggingについて - Qiita
はじめに Safari 12からWebGL Shader Debugging という機能が追加されたようです 公式ページを下に進むと.... このように書いてありました とりあえず使ってみる Developper Toolsを開くと，Canvasタブというのがあります これをクリックすれば使えるようです Shadertoy見てみた こんな感じになってます(右) この画像でのCanvas 2がメインのCanvasで，他はテクスチャ表示するCanvasですね これです とりあえずcanvas 2をクリックします するとこんな感じになります 左がWebGLContextにリンクされたプログラムですね 右では使用メモリとか属性のonoff,使用している拡張機能が見れるようです 左のプログラムクリックしてみます glslのコード見れるっぽいです 実際ShaderToyって最終的にこういう形で実行して
HTML5による仮想物理実験室（物理シミュレーション）
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ 本コンテンツについて 「HTML5による仮想物理実験室（物理シミュレーション）」は、HTML5の強みを活かして物理現象を可視化することを目的として作成しています。 本コンテンツは、中・高・大学の授業等で利用してもらうことを意図して、MIT licenseの元、自由に改変、再配布等を認めています。 興味のある方は下記からダウンロード後、ご利用ください。 なぜHTML5？ 物理シミュレーション環境の構築に必要な要素として、【入力】【演算】【描画】の３つが挙げられます。これまで【入力】は各実行環境に応じたGUI、【演算】はC言
Grimoire.js - WebGL framework for Web development -
Grimoire.js provides effective structure to make use of WebGL representational power in Web development.
Poursuit of sound
En 2017, Biborg et toute l'équipe sont heureux de vous accompagner à la poursuite de nouvelles campagnes innovantes et créatives. Évite les obstacles, attrape les orbes et crée tes propres tracks dans une course musicale futuriste. Prêt à envoyer du son ? Utilise les flèches de ton clavier pour te déplacer. ou Enfile ton Cardboard et joue sur smartphone. pos.biborg.com
GLSLについてのメモ - Qiita
min(max(x, a), b)を返す。なお、HLSLなどで実装されている saturate 関数は、clamp(a, 0.0, 1.0) によって実現できる
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
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
独学で 1 ヶ月間 OpenGL を学んで得た基礎知識のまとめ ~ 2D 編 ~ · けんごのお屋敷
OpenGL。その単語の響きだけで素晴らしく魅力的に思える 3D コンピューターグラフィックスライブラリは、これまで何人もの駆け出しゲームプログラマーに幾度と無く挫折を味わわせてきた。「ゲーム作るならやっぱり高速に描画できる OpenGL でしょ。でも自分が作るゲームに 3D はいらないし、しかも難しそうだし、別に 2D 描画だけできればいいや」 と、軽い気持ちで手を出したのが運の尽き、世の中そんなに甘くはなかった。OpenGL というその難攻不落城は私達の進む道を阻むように高々とそびえ立っている。 OpenGL がコレほどまでに取っ付きにくいのは 気軽に Hello World できない からなんじゃないかと思う。OpenGL の場合だとそれは何かしら 1 つの図形を表示することにあたるのかな。でもたったそれだけなのに、覚えることが山ほどありすぎて全然本題にたどり着くことができないし、O
Airtight Interactive
Felix Turner is a Creative Technologist based in Los Angeles. I do front-end web development and prototyping with JavaScript, WebGL and GLSL shaders. I love building experiences that are innovative & fun. Clients include Apple, Google, Nike and Yeezy. Featured Work I've been lucky to work with some great brands and agencies. Here is a selection of recent work.
wgld.org | WebGL: GPGPU でパーティクルを大量に描く |
GPU の力を引き出すのだ！ 前回は VBO を逐次更新しながら処理することで、CPU 側で頂点の座標を計算してパーティクルを動かす、というテクニックを解説しました。 このやり方の場合、頂点の計算が CPU の性能に依存する形になるので、WebGL 特有の GPU パワーを引き出すことができるというメリットはそれほど活かされない一方、javascript 側ですべて計算しているのでそれほど WebGL や GLSL の記述に精通していなくても、処理を記述しやすいというメリットがあったのでしたね。 そんな中で今回は、これを GPU 側に持っていきます。いわゆる GPGPU と呼ばれる類の技術です。 前回は、あくまでも頂点の座標計算について javascript で行いましたが、今回はこれを GPU 側、つまりシェーダにやってもらいます。つまり、頂点の座標計算から描画までの一連の処理が、基本的
GPUでボロノイ図を描画する : WebGLを用いてスムーズに描画できる高速アルゴリズム | POSTD
GPUに適したJump Floodingおよびボロノイ図と距離変換への応用 注：このページのデモはWebGL機能を使っているためモバイル機器では機能しないことがあります。きちんと表示させるためにはデスクトップコンピュータ上で記事を読むことをお勧めします。 ボロノイ図とはなんでしょうか。下記のデモを見ていただければお分かりになると思います。左のキャンバスをクリックすると、色付きの「母点」が植え付けられます。右のキャンバスでは、各ピクセルが一番近い点の色に着色されます。ドラッグすればより多くの点を配置できます。 デモ#2：左のキャンバスには動いている点が複数あります。右のキャンバスには対応するボロノイ図が表示されています。どちらのキャンバスでも構いませんから、マウスオーバして黄色い点を動かしてみてください。水の中を泳いでいる黄色い魚をイメージしました。 もう1つ面白いデモを用意しました。左のキ
GLSL Noise Algorithms
GLSL-Noise.md Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative Generic 1,2,3 Noise float rand(float n){return fract(sin(n) * 43758.5453123);} float noise(float
wgld.org | WebGL: 行列演算とライブラリ |
重要なのは使い方 行列の計算方法は、基本的なところについては正直なところそれほど複雑怪奇というものではありません。キチンと数学を勉強すればスクラッチでも行列の基本的な演算については記述できるようになるでしょう。しかし、単なる行列の足し算や掛け算ならいざ知らず、複雑な行列演算ともなると非常に難解になってきます。 DirectX にしても OpenGL にしても、行列を使いこなすことができなければプログラミング自体が難しいのは事実です。しかし、だからと言って必ずしも、行列の演算方法の隅々までを漏れなく理解していなければいけないのかと言うと、けしてそんなことはありません。 重要なのは、行列の使い方であって、詳細な行列の計算方法ではありません。特に、3D プログラミングに不慣れなうちは行列を使うと何ができるのかであったり、どのような計算をすれば目的の結果を得られるのかであったり、要するに行列の扱い
WebGL と GLSL で気軽にレイトレーシングに挑戦してみよう！ - Qiita
はじめに 全国 8,120 万人のレイトレファン の皆様こんにちは！ WebGL でレイトレがどうしてもやりたいんだというお便りがついに 1,021 万通を超えたので、そろそろ WebGL で簡単なレイトレーシングの実装について解説する頃合いかなと思い立ち筆を執った次第です。 今回はあくまでも 基本に忠実 に、簡単なレイトレーシングの実装を GLSL だけで行ってみましょう。全国のレイトレファンの皆さんの声援に応えてがんばって解説記事を書いていこうと思います。 前置き 私は幸運なことに WebGL について解説する機会がそれなりにあります。 そういった席ではよく、数学的な知識はとりあえず後回しにしてまずはやってみることからスタートしましょうという話をします。たとえば行列やクォータニオンについて、その数学的な詳細にまで勉強するのは大変です。ですから、まずは使い方から覚えようという促し方をする
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Graphtoy
https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf
WebGLRenderingContext - Web APIs | MDN
wgld.org | WebGL: 立体モデル(トーラス)の描画 |
WebGL Bits
reveal.js - The HTML Presentation Framework