GPU で暖を取りたい人のための GLSLのカレンダー | Advent Calendar 2016 - Qiita
URLYou can post either your article on Qiita or your blog post. About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
シェーダーはNon-Stop! - Pentanium Blog?
これはWebGL Advent Calendar 2015、10日目の記事です。 自前でいろいろやられているネタが続いていますが人の褌で相撲を取るスタイルで気楽にいきます。 というわけで最近颯爽と現れたvertexshaderart.comを勝手に紹介。 開発者はgreggman氏。なんとバーテックスシェーダーを投稿できるWebサービスです! バーテックスシェーダーファンの皆様は心待ちにしていたことでしょう。 いままでにもGLSLを投稿できるところはGLSL SnadboxやShadertoyがありました。 どちらも超弩級のシェーダーを手軽に見られて素晴らしいのですが、これらはフラグメントシェーダーのサービスです。 いっそCodePenやjsdo.itを使うという方法もありましたが、この手のものはHTMLからCSS、Javascriptまで用意しなくてはならず面倒です。 純粋にバーテックス
DIGITAL DIVERZ | HACKist 3rd Exhibition
博報堂アイ・スタジオのクリエイティブラボラトリー「HACKist」は、第３回の展示を2016年5月21日から28日まで神宮前galaxy gingakeiで行います。今回は新たな10以上の作品展示のみならず、DE DE MOUSEとのコラボレーションライブ、様々なシーンの最前線で活躍するアーティストのトークショーを予定しています。
wgld.org | WebGL: トゥーンレンダリング |
アニメ調レンダリング 前回はフレームバッファを用いることでリアルタイムにキューブマップをレンダリングし、それをキューブマップテクスチャとして適用する動的キューブマッピングについて解説しました。 フレームバッファを使って動的にキューブマップテクスチャを生成することで、リアルな映り込みをダイレクトに実現することができました。少し長いソースコードのサンプルでしたが、要点を抑えれば理解できると思います。 さて、今回は少々趣向を変えて、トゥーンレンダリングを解説しようと思います。トゥーンレンダリングは、別名トゥーンシェーディング、あるいはセルシェーディングなどと呼ばれます。 トゥーンレンダリングを施すと、レンダリング結果はアニメ調、あるいは漫画調になります。これは陰影付けが今まで行なってきたような滑らかな濃淡の変化ではなく、段階的にくっきりと行なわれることによって実現できます。また、今回はその段階的
The Book of Shaders
by Patricio Gonzalez Vivo and Jen Lowe This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders. Contents About this book Getting started What is a shader? “Hello world!” Uniforms Running your shader Algorithmic drawing Shaping functions Colors Shapes Matrices Patterns Generative designs Random Noise Cellular noise Fractional brownian motion Fractals Image
【oFセミナーメモ2】 GLSL（Shader）テクニック - その後のその後
セッション1「C++テクニック」（boostライブラリの使い方）のメモ に続いて、セッション2 のメモです。 セッション2 : Shaderテクニック 講師 : 藤本直明、神田竜、他 GLSL(Shader)と呼ばれるOpenGLの機能を解説し、それを応用した映像表現を学びます。今回は、3Dを中心としたシェーディング手法を中心に解説していきます。 GLSLとは OpenGLと一緒につかうシェーディング言語 シェーディング: 3DCGの見た目を決める 光源の計算 陰影の計算 ピクセルの計算 C言語っぽい見た目 グラボで並列処理 CPUで処理するよりも高速 ofShader oFではofShaderを使う 適用部分をbeginとendで挟む oFからパラメータも渡せる mShader.load("test.vert", "test.frag", "test.geom"); mShader.be
openFrameworks, Three.js, Processing のGLSL バージョン対応状況調査 - 自習室
はじめに openFrameworksのセミナーでShaderに触れた この週末、合宿で行われた openFrameworks のセミナーに参加してきました。 セミナー本体の紹介は @yumu19 さんが現場の雰囲気なども伝わってくる素敵な記事を書いて下さっています。 openFrameworksセミナーに参加した #ofseminar - yumulog | 社会人博士の日記 講義内容の紹介は、 @shu223 さんのブログが充実しています 【oFセミナーメモ2】 GLSL（Shader）テクニック - Over&Out その後 このイベントについて、このほかにも計5本もの記事を書かれていますスゴイ！ このセミナーの中で、FrameBufferObjectの使い方、PostProcessのためのaddonの使い方など、Shaderに関わる話がたくさん出てきました。 Shader言語のバー
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
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種類あり、バーテックスシェーダーでは頂点の情報を画面上に反映し、フラグメントシェーダーではピクセル単位での描画を行います。今回はバーテックスシェーダーで頂点の位置をずらし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vertexshaderart
Creative, digital and branding agency
GLSL Sandbox Gallery