[B! webgl] seckieのブックマーク

Creative WebGL Image Transitions | Codrops

seckie 2019/11/10

webgl

リンク

Decorative WebGL Backgrounds | Codrops

A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library. Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle interactivity. All the demos are made with the Thre

seckie 2017/12/14

リンク

North Korea Missile Test Visualization

This data visualization was produced by Akihiko Kusanagi. The data for this visualization are sourced from the CNS North Korea Missile Test Database, which is the first database to record flight tests of all missiles launched by North Korea capable of delivering a payload of at least 500 kilograms (1102.31 pounds) a distance of at least 300 kilometers (186.4 miles). The database captures advanceme

seckie 2017/09/24

リンク

WebGLベースのアプリでニコファーレでVJをした話 - Qiita

はじめに背景昨年の話になってしまうのですが、冬に社内イベントがあって、ニコファーレを使わせて頂く機会がありました。社内ではメディア・アート系のサークルで部長をやっていまして、照明まわりの演出をお願いできないか、という依頼があり、二つ返事で引き受けたのでした。今までも社内イベントで演出を担当することはありopenFrameworksをメインに使っていたのですが、当時はWebGLにガッツリはまっていまして、せっかくだから全てブラウザでやってしまおう、と。かなり本格的な（ページ開くだけでメモリ1GB消費する……）アプリを作る事になりました。去年のうちに話す機会がなかったので、一年越しですが今年のAdvent Calendarで少し紹介させて頂こうかと思います。凄いぞニコファーレまず、ニコファーレがどんな場所かご存知でしょうか？前後左右、天井、そして前方左右に小さなパネル2枚、合計7枚の

seckie 2016/09/21

webgl

リンク

Intro to Pixel Shaders in Three.js — Airtight Interactive

I recently started playing with shaders in three.js and I wanted to share some of what I’ve discovered so far. Shaders are the ‘secret sauce’ of modern graphics programming and understanding them gives you a lot of extra graphical fire-power. For me the big obstacle to learning shaders was the lack of documentation or simple examples, so hopefully this post will be useful to others starting out. T

seckie 2015/04/30

リンク

The WebGL Guide to reading OpenGL shaders, Part 1

seckie 2015/04/30

webgl

リンク

Custom shaders with Three.JS: Uniforms, textures and lighting

If you’re familiar to WebGL and GLSL programming and have started using three.js, you’ll eventually run into a situation where you want to code your own shader, but at the same time use the resources that this library provides you with. In this post, I’ll show you how to setup a custom shader with a three.js geometry, pass it your own uniforms, bind a texture to a particular uniform and receive al

seckie 2015/04/30

リンク

wgld.org | WebGL |

WebGL contents WebGL に関するコンテンツの一覧です。初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識レンダリングのための下準備行列(マトリックス)の基礎知識頂点とポリゴンコンテキストの初期化シェーダの記述と基礎頂点バッ

seckie 2015/02/24

リンク

Making MathBox — Acko.net

For most of my life, I've found math to be a visual experience. My math scores went from crap to great once I started playing with graphics code, found some demoscene tutorials, and realized I could reason about formulas by picturing the graphs they create. I could apply operators by learning how they morph, shift, turn and fold those graphs and create symmetries. I could rem ember equations and fo

seckie 2015/02/05

3d
webgl

リンク

HTML5による物理シミュレーション環境の構築～WebGLライブラリThree.js 入門（１／３）～

HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ