WebGL でのライン描画は苦難の道？面白いテーマで書かれたブログ記事がとても有益

doxas : 2016-04-07 14:05:29

あんまり言及されないテーマ

今回ご紹介するのは、とあるブログ記事です。

WebGL をある程度使っていると、自然といつかぶつかる壁ではあるのですが、意外なことにあまりちゃんと言及されているのを見かけない「WebGL におけるライン描画」がテーマの投稿です。

Github のリポジトリには、実際にブログ中で言及されているテクニックを利用したソースコード、そしてライブデモが用意されています。とても勉強になると同時に、貴重な資料だなと感じましたのでご紹介しようと思います。

さて、ちょっと WebGL についてある程度の知識があることを前提とした内容ではありますが、WebGL のライン描画についてちょっとだけ言及しておきます。

WebGL では、頂点をどのようなプリミティブとしてレンダリングするか、自由に指定することができます。しかし、WebGL のそれは OpenGL などに比べると種類も少なく、最大でも三角形までのプリミティブしか選択できません。

もちろん、ラインは描画することができるのですがここにも罠があります。Windows マシンのような ANGLE で動いている環境では、WebGL のラインの太さを変化させても、ぜったいに 1px のラインしかレンダリングできないんですね。さてこれは困りました。

今回ご紹介するブログ記事は、まさにこのあたりをテーマにした記事となっており、いかにして 1px よりも太いラインを描くかについて考察されています。

まず最初に登場するのは、二次元ベースの処理であれば十分に利用できそうな、ポリゴンを使って擬似的にラインを引く方法です。

サイト内や Github から参照できるライブデモを見ると、わかりやすくポリゴンにカラーリングされたデモを見ることができます。

たしかにこれなら、適用するマテリアル次第でちゃんとラインとして不自然でない形に、レンダリングができそうですよね。

ただ三次元の場合はもう少し複雑になります。

ブログ記事内では、スクリーンスペースでラインを太くしているように見せる方法や、頂点シェーダを使ってジオメトリを拡大してラインに見せる方法などが、具体的なコード付きで掲載されています。

ブログ記事内にデモが埋め込まれているので、その場でどのようなレンダリングになるのかを確かめることができるのも、とてもいいですね。

注意深く記事を読んでいけば、どのような手法でこれらの擬似ラインが描画されているのか、英語が苦手でもある程度は理解できると思います。かく言う私も英語は苦手です……

また、Github でコードもしっかり公開されていますし、なんともありがたい有益な資料だなと感じます。

WebGL 信奉者の私がこんなことを言うのもどうかと思うのですが、ブログの記事のなかに「～～を使うといいんだけど、でも WebGL にはそんな機能はないよ！」という意味の文章がたびたび出てきて、なんとも言えない不思議な気持ちになれること請け合いです。

WebGL は現代の 3DCG のレベルから見れば、相当古い仕様をベースにしているというのが現実です。しかし、そういう限られた環境や仕様のなかでも、こういった工夫をこらしたテクニックを使って表現が可能だという事、それ自体がとても面白いなあと思います。