流れるように滑らかな transform アニメーションと GLSL シェーダエフェクトが組み合わさった個性的なポートフォリオ
全てが超高次元でまとまった奇跡のようなサイト 今回ご紹介するのは、WebGL 界隈ではその名を目にすることも多い、Du Haihang さんのポートフォリオサイトです。 インタラクション、アニメーション、そしてシェーダによるインタラクティブなエフェクト表現と、あらゆる面で高いレベルを見せつけるとても...
深度をテクスチャに焼き込み 2D を疑似 3D 化！ Pixi.js を利用した驚きの表現が大迫力のティザーサイト
技あり演出に驚愕！ 今回ご紹介するのは、トランスフォーマーの新作映画のティザーサイトです。 非常に面白い演出方法を用いているのが特徴で、とても迫力のある、素晴らしいウェブサイトになっています。全体的な仕上がりも素晴らしいのですが、やはりイントロ部分からトップページ部分の Pixi.js を使った演出...
レイマーチングを GLSL で記述し多層パーセプトロンの出力を可視化した興味深いプロダクト
専門用語が多くて素人にはちょっとむずかしい 今回ご紹介するのは、深層学習、いわゆるディープラーニングに関連した WebGL のデモです。 私は正直ディープラーニングについてまったくと言っていいほど予備知識がないので、うまく解説する自信がないのですが…… 一般に「多層パーセプトロン」と呼ばれているアー...
背景全面をシェーダによってインタラクティブに演出！ とある幽霊をテーマにした映画のティザーサイト
映画のタイトルにピッタリな印象深いサイト作り 今回ご紹介するのは、とある映画のティザーサイトです。 日本での題名がなんなのかまで調べていませんが、英語のタイトルは「A Ghost Store」となっていて、Ghost の単語からもわかるように物語の中心にゴーストを据えている興味深い映画です。 事細か...
インターネットリテラシをゲームでおさらい！ Google 公式 WebGL コンテンツはさすがの超品質！
ボリューム感満点の力作！ 今回ご紹介するのは Google が公式に提供しているウェブコンテンツで、その高いクオリティはさすがとしか言いようのない、素晴らしい一作です。 簡単に言うと、いわゆる「インターネットに関するリテラシー」をテーマにしたミニゲームがメインコンテンツで、ビジュアルだけでなく内容に...
