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って最終的にこういう形で実行して
The Book of Shaders
Patricio Gonzalez Vivo、Jen Lowe著 この本はフラグメントシェーダーについてのガイドブックです。難解で複雑なフラグメントシェーダーの世界を、一歩一歩わかりやすくご案内します。 翻訳について この文書はPatricio Gonzalez VivoのThe Book of Shaderの日本語訳です。 技術的な内容はできる限り正確に伝えるように心がけていますが、その他の部分では言葉を補ったり簡略化したり、表現を変えている部分もあります。英語が得意な方はぜひ原文もお読みください。 フィードバックにはgithubのレポジトリをご利用ください。 目次 イントロダクション 初めの一歩 シェーダーとは？ ハロー・ワールド！ ユニフォーム変数 シェーダーを使う アルゴリズムで絵を描く シェイピング関数 色について 形について 二次元行列 パターン Generative desi
HSV 表色系を使ってみよう (C++ / GLSL 実装付き) « demoscene.jp
Tweetメガデモアドベントカレンダー 2012、本日は RGB とはちょっと違う方法で色を扱う表色系、「HSV」を紹介します。 ―――駆け出しデモシーナーの @Reputeless は、かっこいいデモを作るために、プログラムで虹色のグラデーションを描こうとしました――― ええっと、赤が RGB(1.0f, 0.0f, 0.0f)、赤とオレンジの中間が RGB(1.0f, 0.25f, 0.0f) オレンジは RGB(1.0f, 0.5f, 0.0f)、黄色は RGB(1.0f, 1.0f, 0.0f) 黄緑色は RGB(0.0f, 1.0f, 0.0f); ・・・うっ うわああ、めんどくさい！ レインボーなグラデーションって RGB でどうやって表現するの！？ 気を取り直して、今度はカラフルな円をたくさん描くことにしました。 RGB の値を乱数で決めているようです。 RGB( Rando
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
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
A Gentle Introduction to Shaders with Pixi.js
Most of the stunning visual effects you see everyday on the web or in movies and games would not be possible without GPUs. These Graphical Processing Units with their thousands of cores running in parallel are incredibly fast, but can be tricky to program at first. In this post we're going to look at how to set up Pixi.js, one of the most widely used Javascript rendering libraries, to run shaders
GLSLについてのメモ - Qiita
min(max(x, a), b)を返す。なお、HLSLなどで実装されている saturate 関数は、clamp(a, 0.0, 1.0) によって実現できる
oFでshader勉強中「3.サンプルを読む(GLSL編)」 - すこしふしぎ．
今回はofのサンプルで使われているシェーダプログラムを読み解いていくよ．ちょこっと長くなってしまったけど、実際にサンプルを読むとglslの理解につながりそう. ではまずprogram listから． vertex shader #version 120 uniform float timeValX = 1.0; uniform float timeValY = 1.0; uniform vec2 mouse; //generate a random value from four points vec4 rand(vec2 A,vec2 B,vec2 C,vec2 D){ vec2 s=vec2(12.9898,78.233); vec4 tmp=vec4(dot(A,s),dot(B,s),dot(C,s),dot(D,s)); return fract(sin(tmp) * 43758
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
WebGL と GLSL で気軽にレイトレーシングに挑戦してみよう！ - Qiita
はじめに 全国 8,120 万人のレイトレファン の皆様こんにちは！ WebGL でレイトレがどうしてもやりたいんだというお便りがついに 1,021 万通を超えたので、そろそろ WebGL で簡単なレイトレーシングの実装について解説する頃合いかなと思い立ち筆を執った次第です。 今回はあくまでも 基本に忠実 に、簡単なレイトレーシングの実装を GLSL だけで行ってみましょう。全国のレイトレファンの皆さんの声援に応えてがんばって解説記事を書いていこうと思います。 前置き 私は幸運なことに WebGL について解説する機会がそれなりにあります。 そういった席ではよく、数学的な知識はとりあえず後回しにしてまずはやってみることからスタートしましょうという話をします。たとえば行列やクォータニオンについて、その数学的な詳細にまで勉強するのは大変です。ですから、まずは使い方から覚えようという促し方をする
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Graphtoy