ITエンジニア/デザイナ向けにオープンソースを毎日紹介

WebGLの使い方を覚えたいと思いつつ、その独特な書き方で断念してしまっています。もし覚えることができれば、これまでとはまったく異なる表現力が手に入ることでしょう。

今回紹介するwebgl-linesはそんな表現の一例です。各コンテンツはブログの中に埋め込んで表示されています。

webgl-linesの使い方

オンマウスで回転しはじめます。

マウスドラッグで線が描かれ、ポインターを追従します。

マウスクリックを続けると回転します。

こちらも回転します。動きが滑らかです。

webgl-linesは主に線を使ったコンテンツが例示されています。いずれもマウスの動きに合わせてアニメーションするインタラクティブなものです。WebGLを学んでみたい方は、このコードを読んでみるところからはじめてみてはいかがでしょう。

webgl-linesはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Drawing Lines is Hard

mattdesl/webgl-lines: some interactive content for a blog post

 

MOONGIFTの関連記事

  • DevRel
  • Com2