three.js + キューブマップでお手軽IBL - Qiita
この記事は，WebGL Advent Calendar 2016 16日目の記事です。 今年も何もしてないなぁと思いながら生きていたのですが、WebGLで色々成果を挙げている友人に感化されて飛び入り参加しました。よろしくお願いします。 今回は環境マップでよく利用されているキューブマップを使って、WebGL上で擬似的なIBLを、拡張機能を利用する方法としない方法の2つ実装しました。 この記事では実装の中で得た知見を共有できればと思います。 今回作ったもの https://github.com/kaneta1992/cubemapIBL IBL(Image Based Lighting)とは IBLと略すこともある。実在する風景の写真や高精細な画像をライティングの色情報に使用して、シーンをレンダリングする方法。広いレンジの明るさ情報を記録できるHDRIを用いることで、自然な光と陰影を表現できる
開発のための言語や環境と資料：超速Unityシェーダ入門(2)
基本的にどのような開発環境であってもシェーダはシェーダ専用の言語を用いて開発します。 特に Unity のシェーダを開発するときは、ShaderLab と呼ばれる Unity 独自の言語仕様と、 それ以外の言語とを組み合わせることになります。 ShaderLab Cg / HLSL / GLSL 学習のためには既存のコードを読み書きする 書籍 その他の資料 開発環境 シェーダのソースコードハイライタ シェーダのデバッグ ShaderLab Unity でデフォルトのシェーダを新規に追加したとき、必ずこの形式で記述された shader ファイルが生成されます。 Shader Lab のソースコードは実際には次のようなものです。 Shader "MyShader" { Properties { _MyTexture ("My Texture", 2D) = "white" { } … } Su
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
Pragmatic physically based rendering : Setup & Gamma
Pragmatic physically based rendering : Setup & Gamma This blog post is a part of series about implementing PBR in WebGL from scratch: IntroSetup & GammaUpdates2015/09/03 Removed gamma correction for input param colors and assuming they are in the linear space already 2015/09/22 Reversed back to gamma input colors based on the discussion here https://github.com/mrdoob/three.js/issues/5838 Before we
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
Inigo Quilez
Intro Here you will find the distance functions for basic primitives, plus the formulas for combining them together for building more complex shapes, as well as some distortion functions that you can use to shape your objects. Hopefully this will be useful for those rendering scenes with raymarching. You can see some of the results you can get by using these techniques in the raymarching distance
全能感UP! GLSLで進めレイマーチング « demoscene.jp
こんにちは。tomohiroです。 概要 最近の4k/64k introでよく使われているレイマーチング(Ray marching)法について説明する。 レイマチーングとはレイトレーシング法の一種である。 レイマーチングではレイの始点から少しづつ進みながらシーン内のオブジェクトとの交点を求める。 シーン内のオブジェクトはDistance functionという関数で記述される。 なぜレイマーチング, Distance functionを使うのか Distance functionは数行程度のコードによって実装できるので, 小さなデータで3D形状を表現する事ができる。 複雑な形状も関数をいくつか組み合わせる事によって作る事ができる。 しかし三角形ポリゴンほど汎用的に形状を表現するのは難しい。 レイマーチングを使うと Distance functionで表現された形状を少しのコードでレンダリン
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
GLSL Sandbox Gallery
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAgAElEQVR4Xry9B5idV3Wvv496l6b3mTMzmlGZkWY00siS1UbVtiRbrpJs2bIs29iWjbFDMUbGFsWATTMlgKimmZjQEgLEJAFDKAmEUBISckkxCfcmhJQbSG/n/757n2/OOVOkGfJ/7n6erTOjOd/+vm+XtX7rt9ZeOxdCKFBHSy4XQueyENqXhtC6JISWJdWhbUldyC9rCD3VzaG3oTWEjs4QBrtCWPNPXHd18JqsnBgM4fjA3rCz74IQ1vaFsLExhKq/4c+PUb9MvYX6zuI1z+fnNdTjobsqhD/5+1fz82rq26m/VP5Y5/158dwQzox0
GLSLシェーダによるカートゥーンレンダリング
今日は、GLSLによるカートゥーンを紹介しようと思います。割と簡単にでき、それなりに見栄えがするからです。その応用として、輪郭線も描画します。 カートゥーンの原理 カートゥーンはセルアニメ調のレンダリングです。左下の図に示すように、頂点vにおいて、法線と光源ベクトル（頂点から光源へのベクトル）との内積（照度）を、右下の図のようなテクスチャのs座標に当てはめることで簡単に実現できます。 更に、次の図の左のように、視線ベクトルと法線の内積を考えると、輪郭となる部分はほぼ0になります。そのため、その内積をt座標に割り当てることで、輪郭線を実現できます。 s座標もt座標も単位ベクトル同士の内積で計算できますが、その範囲は-1～1になるため、テクスチャマッピング（glTexParameterによる指定）をクランプに設定する必要があります。 バーテックスシェーダ（頂点シェーダ） 今回は、頂点シェーダで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
