この記事はTech KAYAC Advent Calendar 2019の10日目の記事です。 こんにちは！ jsdo.itでCreativeCodingの世界を知り、jsdo.itに惚れて入社を決め、jsdo.itの譲渡とともに入社し、jsdo.itの終了とともに退職した有給消化期間中の浅利（@kasari39）です！ 今回はシェーダーの世界へ一歩踏み出してみませんか？という内容です。 *1 シェーダーコーディングの世界 作品例として手前味噌ですが、このような映像をシェーダーのみで生成できます。 http://glslsandbox.com/e#59292.1 http://glslsandbox.com/e#59293.0 これらは100行にも満たないシェーダーから生成されています。 こんな短いのにこんな豪華な見た目が出るなんて面白いですよね。 それでは一歩踏み出してみましょう！ 開発
floatの値が0から1の範囲内ならA、範囲外ならBを返す処理が欲しかった。 通常であればこのようにif文で作ることができます。 if (x >= 0.0 && x <= 1.0) { return A; } else { return B; }しかし、シェーダにおいてはif文を使ってしまうとGPUの並列処理を阻害することになり、パフォーマンスが大きく落ちます。 そこでif文を使わない方法を考えることにしました。 結論だけ見たい方はこちら 方針最初に思いついたのはこれです。 int isInRange = 1 - (int)(abs(x - 0.5) + 0.5);abs(x – 0.5)のところで絶対値が0.5に満たない場合は、+0.5しても1にならないので、int型にキャストすることで0か1に分けることができます。 最後に書きますが0か1に分けることでlerpを使用して目的の値を取得で
レイマーチング（Ray Marching）という描画手法があります。ポリゴンを空間に配置するのではなく、個々の物体を「距離関数（Signed Distance Function）」として定義し、その関数を介して物体がどのように空間に配置されているかを計算し、描画します。 レイマーチング自体は汎用的な描画手法ですが、Unity界隈でレイマーチングと言ったら、「シェーダー芸」を実現するエフェクト表現を指すと考えて良いと思います。ここでは「シェーダー芸で用いるレイマーチング手法」くらいの意味で、レイマーチングという言葉を使います。 土屋はシェーダー芸をやらないので、レイマーチング手法を知らず、解説記事やコードを読んでもどういう挙動によって描画が実現されているのかさっぱり理解できずにいまして、今回記事にまとめてみようと思い、改めて勉強してみました。いつも通りですが、とても１回では終わらない分量にな
レイマーチングで使える複雑めな距離関数を収集していきます。 球や直方体など単純な図形に関しては以下にまとまっているので、ここでは触れません。 Inigo Quilez :: fractals, computer graphics, mathematics, shaders, demoscene and more Recursive Tetrahedron http://glslsandbox.com/e#55834.0 四面体のIFSによる繰り返しです。最終的に四面体の頂点に対して距離を計算しています。 # define ITERATIONS 8 float deRecursiveTetrahedron(vec3 p, vec3 offset, float scale) { vec4 z = vec4(p, 1.0); for (int i = 0; i < ITERATIONS; i++
第二次チョコレイマーチング大戦 先週、とんでもなく下らないネタを五日間に渡って投稿させていただきました doxas と申します。 詳細は以下です。 [連載 GLSL 物語] チカラが欲しいか……（第一話） まあなんていうか、最後まで読んでくださった方は既にお気づきかと思いますが、オチを先に思いついて、それに向かってひたすらアホなことをやり続けた結果があの有様でありまして、反省も後悔もしてはおらんのですが、さすがにこのまま放置というのはいかんだろうと思い筆を執った次第です。 全てを漏れ無くというわけにはいきませんが、レイマーチングの基本の部分や、今回の一連の投稿において使われたテクニックなど、一部抜粋してご紹介します。 ただ今回紹介するテクニック等は基本的に単なるレイマーチングの話なので、より厳密にしっかりと数学的側面なども理解したいという場合は、あまり今回のテキストは向いていないかもしれま
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? とりあえずこの映像を見てください。 昨日の勉強会の懇親会中に20分間のライブコーディングでシェーダーを作りました！ 初めて人前でコーディングをしたんですが、めちゃくちゃ楽しかったです！！ （当日動かなかったpmod修正済です...） 差分 - q.x = abs(p.x ) - 10.; + q.x = abs(q.x ) - 10.;https://t.co/LH3TT4YzSU#klab_meetup pic.twitter.com/k61c3O2ZA1 — かねた (@kanetaaaaa) 2019年6月19日 20分間のライブ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は、KLab Engineer Advent Calendar 2018 10日目の記事です。 はじめに 今月頭の12/1から12/2にかけて、日本で唯一のデモパーティであるTokyo Demo Fest 2018が開催されました。 デモパーティをご存じではない方のために、公式サイトから引用します。 デモパーティは、コンピュータを用いたプログラミングとアートに 興味のある人々が日本中、世界中から一堂に会し、 デモ作品のコンペティション(コンポ)やセミナーなどを行います。 また、イベント開催中は集まった様々な人たちとの交流が深めら
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事は「GLSL Advent Calendar 2016」の 17日目 の記事になります。 前日までdoxasさんの独壇場でとても高度な内容だったのに、その後にこの記事をアップするのはとても気が引けましたが勇気を出してアップしますｗ 概要 そろそろレイトレーシングに挑戦する時期かなということで、レイトレの一種である「レイマーチング」について再入門してみたいと思います。（前に少しだけやって放置してた） ※ ちょっと長くなりそうなので、今回の記事はvol.1としました。 レイトレとは レイトレ（レイトレーシング）とは、Wikipedi
![[GLSL] レイマーチング入門 vol.1 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fb5d17dbcbbae02e5965a48c344c9b2b61d2a723/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTYxNiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTYwMDMwMzY2Mz9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz00YWVlZmJkNWZiMmZkYWUyOWM0Yzk5ZDJmOTJiMjZlYQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D38f4cea90a7c4f8c3a9cf861089d9d8d%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCR0xTTCU1RCUyMCVFMyU4MyVBQyVFMyU4MiVBNCVFMyU4MyU5RSVFMyU4MyVCQyVFMyU4MyU4MSVFMyU4MyVCMyVFMyU4MiVCMCVFNSU4NSVBNSVFOSU5NiU4MCUyMHZvbC4xJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YTMwMGIyNzA0NGVlZDZmMjBkOWU5Zjk4ZDY3Y2ExN2U%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZmU3NzVmMTQ4NzA3ZWM1ZTgzNGU2MmRjOWY1OGYyMjU%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dac262eddcd6b476fd2cc85c8b99be3e7)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
