WebGLで抑えておきたいシェーダーの定番画像処理8選 – ICS MEDIA
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けられるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像
Examples created by Yomotsu using THREE.js
Examples created by Yomotsu using THREE.js basic cube basic cube with textures load collada model load converted MMD models ray_basic ray_basic2 collitsion_detection_with_Ray MD2 model with actions kind of a TPS game triangle which is created from Vertex geom_from_vertex geom_from_vertex2 geom_from_vertex3 geom_from_vertex4 geom_from_vertex5 geom_from_vertex6 geom_from_vertex7 texture_using_2Dcanv
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
