タグ

関連タグで絞り込む (96)

タグの絞り込みを解除

glslとwebglに関するedo_m18のブックマーク (33)

  • ビルトイン関数などの詳細な解説が満載！ GLSL に関する貴重な情報が閲覧可能 - WebGL 総本山

    GLSL の貴重な解説サイト ご存じのとおり、WebGL では GLSL と呼ばれるシェーダ記述言語を利用します。C 言語にやや似通った文法を持つ独自の言語です。 WebGL は javascript から利用できるものの、この GLSL も同時に修得しなければならないために若干学習コストが高くなってしまいます。また情報が少ないという側面も学習のしにくさに拍車をかけています。 今回ご紹介するのは、そんな GLSL の基本がギュッと詰まった貴重なサイトになります。 ビルトイン関数から型の種類まで網羅 GLSL は、OpenGL 系で利用されるシェーダ言語なので、必ずしも利用されるのは WebGL だけとは限りません。 また、GLSL にも通常の OpenGL などと同様にいくつかのバージョンが存在します。バージョンが異なると、一部の関数が利用できなかったり、あるいは記述方法にほんの少しだけ差

    ビルトイン関数などの詳細な解説が満載！ GLSL に関する貴重な情報が閲覧可能 - WebGL 総本山

  • [連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita

    まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の中です。きっとシェーダに触れた経験は無駄にはならないでしょう。 すぐに業務で活かすとか、そういう壮大な話はさておいてまずは気軽

    [連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita
    edo_m18
    edo_m18 2014/10/16
    doxasさんの連載記事！
    リンク

  • wgld.org | GLSL: オブジェクト同士を補間して結合する |

    edo_m18
    edo_m18 2014/10/06
    自然対数自体はなんとなくわかるけど、なぜそれが有用なのか、どうしてそうするのかとかはだいぶむずかしい・・。
    リンク

  • wgld.org | WebGL: バンプマッピング |

    特殊なライティングテクニック 前回はフレームバッファへのレンダリング結果に対して、ブラーフィルターを適用して全体にぼかし処理を掛ける方法を解説しました。フラグメントシェーダを使ってピクセルごとに処理することで、一度レンダリングした結果にエフェクトを掛けることが可能となり、様々な効果を演出できます。ぼかし処理はその一例でしかありませんが、シェーダの使い方などを参考にしていただけたらと思います。 さて、話は変わって今回は、バンプマッピングをやってみたいと思います。 バンプマッピング(bump mapping)は一般に、法線マップなどを用いることによってあたかも凹凸があるかのように見せることができるライティングテクニックです。バンプマッピングを活用すると、少ないポリゴン数のモデルであっても高い表現力を得ることができるようになります。 と、言葉で説明されてもいまいちわかりにくいですね。 たとえば、

    wgld.org | WebGL: バンプマッピング |

  • Shadertoy

  • wgld.org | WebGL: gaussian フィルタ |

    ガウシアンブラー 前回はエッジ検出の手法の一つ、laplacian フィルタを解説しました。前々回に紹介した sobel フィルタと比較すると、細い線による繊細なエッジ検出ができるのでしたね。 さて、今回はフィルタ系の処理をもう一つ取り上げます。今回のフィルタはかなり実用性の高いものです。今後様々なエフェクト処理を行なっていく上で欠かせないぼかし系処理の代表格、gaussian フィルタ(ガウシアンフィルタ)です。 ガウシアンぼかし、あるいはガウスぼかしなどと呼ばれるぼかし処理は、様々なペイントソフトやフォトレタッチソフトにも搭載されています。そもそも[ ぼかす ]という処理に優劣があるのかというところに疑問を抱く方ももしかしたらいるかもしれませんが、gaussian フィルタが優れているポイントはいくつかあります。 処理結果が自然で美しく仕上がる 大きくぼかしを掛けることが可能 その割に

    wgld.org | WebGL: gaussian フィルタ |

  • Shadertoy BETA

    Build and Share your best shaders with the world and get Inspired Latest contributions: "Drawing a circle again bruh" by defnixx 22 minutes ago, "RWMusic toolbox" by RoosterWho 57 minutes ago, "Iridescent Spirals" by anej 57 minutes ago, "vortex knot flow field" by Boogaloo 1 hour ago, "Gaussian-ish airglow approx." by FordPerfect 1 hour ago

  • これはなかなか痺れる！　画面遷移を GLSL で実装する GLSL.io - webgl and javascript

    GLSL.io GPU のパワーを使って画面遷移を実行しちゃおうぜ！　っていうことですね。 いろんなものが既に揃ってますが、自分でカスタムすることもできます。 エディタ内蔵したページもあり非常に素晴らしい。

    これはなかなか痺れる！　画面遷移を GLSL で実装する GLSL.io - webgl and javascript

  • Shaderific for OpenGL

    OpenGL ES Shading Language (GLSL) Data types and constants Scalar types Vector types Matrix types Custom types Texture types & functions Texture types Texture functions Built-in variables & constants Variables Constants Control flow and qualifiers Control flow Qualifiers Functions Common functions Power functions Trigonometric functions Geometric functions Matrix functions This documentation is ba

  • WebGL で高速 BlendMode | Yomotsu net

    WebGL を使えば、色の加算、減算、乗算といったブレンドモードが高速で処理できるというお話。 Canvas2D でもピクセルマニピュレーションができるので、様々なブレンドモードを自前で実装することができるのだが、ピクセル数 * 4色の処理負荷が CPU にかかるためパフォーマンスがよくない。しかし WebGL のフラグメントシェーダーを利用すれば色を高速で処理できる。 demo WebGL は簡単なことをするにも、初期化の処理が冗長なためコードは長くなってしまうが、実際は大したことはやっていない。 2つのトライアングルを用意する 2枚のテクスチャー画像を適用する フラグメントシェーダーでテクスチャー画像の色をブレンドする GLSL では、4成分 (Red, Green, Blue, Alpha) をそのまま足したり掛けたりすることができるので、ブレンドの公式に当てはめるだけで処理できる。

    WebGL で高速 BlendMode | Yomotsu net

  • 四元数(クォータニオン)でモデルを回転

    四元数（クォータニオン）でトーラスを回転 なかなかGLSLのサンプルに到達できないのですが、GLSLの前に、モデルをグリグリ動かすことはやっておいた方がいいと思い、四元数（クォータニオン）でモデルを回転するサンプルを作成しました。クォータニオンについては、ネット上にいろいろ解説がでており、私はそれよりもきちんと説明できる自信はないのですが、簡単に紹介します。 クォータニオンは、一つの実数部と三つの虚数部（みたいなもの）i, j, kから成る数で、次のように表記します。 ここで、i2 = j2 = k2 = ijk = -1 が成り立ちます。3次元の座標(x, y, z)は、クォータニオンを使用して次のように表現します。 また、任意軸 (ax, ay, az) 回りのθ回転は、次のように表すことができます。 この時、3次元座標pの任意軸回りの回転qは、次のような計算が成り立ちます。 ここで、

  • WebGLの能力を引き出すプログラマブルシェーダー

    WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ

    WebGLの能力を引き出すプログラマブルシェーダー

  • WebGL のシェーダーでグリグリできる CSS Shaders の使い方 - WebOS Goodies

    WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 こちらの記事を見て「おお、ついに CSS Shaders 実装されたんか！」と喜び勇んで試した後、すべてが終わってから Dev 版 Chrome でも使えることに気づくという情弱ぶりを発揮した今日この頃、みなさんいかがお過ごしでしょうか。いったいいつから使えてたんだろう・・・（´・ω・｀） そんなわけで、最新の話題でもないみたいですが、せっかく試したので記事にして

  • 前のページ 1 2

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2025 Hatena. All Rights Reserved.