#glsl

Real Time 3D Surface Shader in WebGL

はじめに 身体と同化するテクノロジーをテーマにWEBGLのモックアップを作ってみました。 インスピレーション 今でこそ、プロジェクションマッピングや巨大ビジョンが商業的にも有名になっていますが、 そのルーツを探っていくと、彫刻、建築、インスタレーション、 さらには、ライトアートやルミナアートなどのジャンルに触れることができます。 さらにライトアートやルミナアートの世界を覗い

#glsl#p5js#webGL 2020.03.23
VIEW

WEBGL with p5.jsで地形メッシュを作る

はじめに 表現系でよくある、プリミティブな地形を作ってみました。 アルゴリズム自体は、シンプルで頂点ごとに、Sin関数で変化させ、 メッシュでつないでいきます。 今回は、WEBGL系の機能を含めバージョンアップした「P5js」 +「 WEBGLでビジュアル」を作ってみました。 P5.jsの実装 以下p5.jsの実装です。 p5jsのWEBGLの安定性・高速化されたということで、

#p5js#glsl#webGL 2020.03.11
VIEW

WebGL – Shader 波エフェクト

はじめに 今回は、GLSLシェーダーで波紋風のイメージエフェクトをかけていきたいと思います。 シェーダーを使いWebページに立体感とリッチな表現を持たせることが期待できます。 開発環境 p5.jsを使ってWebで動く形で波紋風表現を実装していきます。 p5jsはProcessingのJavaScript版といった感じで、WEBGLによる3D表現や映像・音声といったメディアを

#glsl#imageEffect#p5js#shader 2019.12.19
VIEW