ちょっとした演出にこそこだわりたい！ Codrops に投稿された three.js ベースの WebGL 背景作例集
紹介記事の紹介記事になってしまうのだが……
今回ご紹介するのは、以前にも紹介したことがある「Codrops」という技術系ブログの記事になります。
ブログ記事を引用するというのもなんだか変な気持ちになるのですが、今回紹介する記事では、Louis Hoebregts さんの作った three.js ベースの WebGL 作品を見ることができ、これがとても良くできていたので作品のひとつとして紹介してもいいのではと思いました。
ブログ記事自体には、あまり技術的な解説が細かくされているわけではないのですが、しっかりとソースコードが開示されており、誰でもその中身を見ることができるようになっています。
シンプルだが目を引く実装を参考にしよう
今回の記事では、公開されているデモのスクリーンショットと、そこに添えられたいくつかの簡単な解説を見ることができます。
また、記事のなかにはソースコードを直接ダウンロードできるリンクの他、Github のリポジトリへのリンクも置かれています。
全体的に、かなりシンプルな外見をしているものが多く、フォトリアルな質感というよりも、かなりアブストラクトな印象のデモが多いですね。
かなりシンプルなデモだけに、自分の作品にもそれらの特徴を流用しやすいのではないかと思います。
それぞれのデモには、デモを象徴するかのような短い英単語がひとつひとつに添えられています。
パーティクルやライン、あるいはノイズを使ってうごめくオブジェクトなど、どれも目新しい感じではないのですが……それでも、小さくキレイにまとまっていて、どれも印象的な仕上がりです。
背景は基本的に一色で塗りつぶされている感じなのに、味気ない感じがあまりしないのはどうしてなんでしょうね……
動きや、配置など、どこかにセンスを感じさせる部分があるからでしょうか。
冒頭にも書いた通り、あまり具体的に実装の解説がされている記事ではないのですが、こういったテクニックを使っているよ！ という簡単な紹介文がスクリーンショットと一緒に書かれています。
WebGL を始めたばかりだったり、そもそも 3D やシェーダに不慣れなうちは、こういったシンプルな質感表現を中心にした作品からトライしてみるのがいいと思います。
そういう意味で、かなり初学者にも参考にできる、優れたデモばかりそろっている感じですね。
作者さんのウェブサイトも、非常にシンプルな WebGL の演出がされているのですが、やっぱりどこかに共通するものを感じますよね。
ソースコードが開示されていることもあり、特にこれから WebGL や three.js に挑戦してみたいと考えているひとにはおすすめできる、そんな記事になっています。
WebGL は勉強し始めたばかりのころに「何から挑戦したらいいのかな？」という状態になりやすいところがあると思います。今回の記事を参考にしつつ、まずはシンプルな質感のオブジェクトだけでどういった表現ができるのか考えてみる、というのがいいかもしれません。
ある程度 WebGL の実装経験がある方にとっても、今回の記事で紹介されているデモは、どれもなにかインスピレーションの元になるような内容ではないかなと思います。
ぜひチェックしてみてください。
