three.js + キューブマップでお手軽IBL - Qiita
この記事は，WebGL Advent Calendar 2016 16日目の記事です。 今年も何もしてないなぁと思いながら生きていたのですが、WebGLで色々成果を挙げている友人に感化されて飛び入り参加しました。よろしくお願いします。 今回は環境マップでよく利用されているキューブマップを使って、WebGL上で擬似的なIBLを、拡張機能を利用する方法としない方法の2つ実装しました。 この記事では実装の中で得た知見を共有できればと思います。 今回作ったもの https://github.com/kaneta1992/cubemapIBL IBL(Image Based Lighting)とは IBLと略すこともある。実在する風景の写真や高精細な画像をライティングの色情報に使用して、シーンをレンダリングする方法。広いレンジの明るさ情報を記録できるHDRIを用いることで、自然な光と陰影を表現できる
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
WebGLライブラリ向けのDeferred Renderingにおける動的ライト、シャドウマップの実装法について[jThreeガチ勢向け(?)] - Qiita
WebGLライブラリ向けのDeferred Renderingにおける動的ライト、シャドウマップの実装法について[jThreeガチ勢向け(?)]WebGLjThree これはWebGL Advent Calender(http://qiita.com/advent-calendar/2015/webgl )16日目の記事です。 僕は普段jThreeというOSSなライブラリの新バージョンを作ることをしている。この新しいjThreeのv3であるがWebGLにおける新たなライブラリのあり方を定義しようという思いを持って開発は行われている日本発のOSSなWebGLライブラリである。 このjThreeは今までのjThree v2のいいところを継承しながら、three.jsやその他のライブラリとはまったく違う側面を持ったライブラリである。その用途は比較的ゲーム向けではなく、Webサービスの一部として融
![WebGLライブラリ向けのDeferred Renderingにおける動的ライト、シャドウマップの実装法について[jThreeガチ勢向け(?)] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/bfa4ccc2c325937378e7f176a752388ba1f3b87c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9V2ViR0wlRTMlODMlQTklRTMlODIlQTQlRTMlODMlOTYlRTMlODMlQTklRTMlODMlQUElRTUlOTAlOTElRTMlODElOTElRTMlODElQUVEZWZlcnJlZCUyMFJlbmRlcmluZyVFMyU4MSVBQiVFMyU4MSU4QSVFMyU4MSU5MSVFMyU4MiU4QiVFNSU4QiU5NSVFNyU5QSU4NCVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU4OCVFMyU4MCU4MSVFMyU4MiVCNyVFMyU4MyVBMyVFMyU4MyU4OSVFMyU4MiVBNiVFMyU4MyU5RSVFMyU4MyU4MyVFMyU4MyU5NyVFMyU4MSVBRSVFNSVBRSU5RiVFOCVBMyU4NSVFNiVCMyU5NSVFMyU4MSVBQiVFMyU4MSVBNCVFMyU4MSU4NCVFMyU4MSVBNiU1QmpUaHJlZSVFMyU4MiVBQyVFMyU4MyU4MSVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NTUwYjcxOTAwMmM4MWNlN2YyMDNlOTIxYWM0NjMyMzU%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBreWFzYmFsXzE5OTQmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTc2NzdhYjJmYTRjODE3OWQxNTQ4NmVkN2IxZjdmNzc5%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3D878df4196e216dcd790257cce59f2aa3)
最近の話とこれからの話 - どくらぼ
最近の話 先日、CEDEC に初めて参加してきました。 CEDEC に初めて参加すると同時に、初登壇もさせていただきました。 正直ゲームを中心としたエンターテイメントの技術の最先端が集結する CEDEC というフィールドで、WebGL をメインにした自分の発表に、どれだけの価値があったのか……ちょっと、いやちょっとどころか、かなり不安がありました。 しかし当日は、たくさんの方がセッションに来てくださり、またセッションの後も話しかけてくれたりするなどいろいろあり、やはりセッションに応募してよかったなと感じられる初めての CEDEC となりました。セッションに来てくださったみなさん、声をかけてくれた方々、本当にありがとうございます。 またこれは余談ですが、登壇者だけが参加できる懇親会というものが CEDEC にはありまして、これが非常に素晴らしかったですね。CEDEC に登壇するレベルの、高い
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
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
“ニコニ立体”で外部プラグインの導入が不要のWebGL版プレイヤーが提供開始
Blender で作った3DCGをHTMLに出力するプラグイン「Blend4Web」 - 強火で進め