Webのキャンバスを絵画に：WebGL/WebGPUで探る非写実表現の詩学
Webのキャンバスが、ただ現実を模倣するためだけにあるのだとしたら、それはあまりに寂しいことではないでしょうか。ピクセルの一つひとつが寸分違わぬ現実の写し鏡を目指すフォトリアリズムの追求も、確かに一つの極致です。しかし、コードとコンピュータでアートを志す私たちの心は、時として、その完璧さの先に広がる不完全で、曖昧で、より人間的な質感にこそ惹かれるものです。絵画的な筆致、手描きのインクが滲むような温かみ、そうした非写実的な表現を、私たちはどうすればWeb上で実現できるのでしょう。この記事では、WebGL や WebGPU を用いた 非写実的レンダリング（NPR）の世界を探求し、技術的な手法の先に広がる美的体験と、クリエイティブコーディングにおける新たな可能性について深く思索していきます。
リアルを越える表現：非写実的レンダリング（NPR）の詩学
コンピュータグラフィックスの世界において、非写実的レンダリング（Non-Photorealistic Rendering, NPR）とは、写真のような忠実な再現を目指すのではなく、水彩画、油絵、ペン画、アニメのセル画といった、意図的に様式化された表現を生み出す技術の総称です。それは、現実を「どう見えるか」ではなく、アーティストが「どう見せたいか」という意志を反映させるための、いわばコードで書かれた詩のようなものです。
私たちが p5.js で stroke() や fill() を使って円や四角形を描く行為も、その最もシンプルな入口と言えるかもしれません。そこには物理的に正確な光の反射や影はなく、ただ純粋な形と色が、抽象化された世界のルールに従って配置されます。NPRは、この抽象化のレベルをさらに引き上げ、より複雑で豊かな表現の語彙を私たちに与えてくれます。例えば、物体の輪郭線を抽出し、彩色をフラットにすることでアニメのような「セルルック」を実現したり、色の境界を滲ませることで水彩画のような効果を生み出したり。これらは単なるフィルター効果ではなく、3D空間における光の振る舞いや物体の形状情報を解釈し直し、新たな視覚言語へと翻訳する創造的なプロセスなのです。
コードが紡ぐ筆致：シェーダーで描く絵画的質感の探求
NPRの表現力の核心には、シェーダー の存在があります。シェーダーはGPU上で直接実行される小さなプログラムであり、画面上のピクセル一つひとつの色を最終的に決定する役割を担います。これにより、私たちは標準のレンダリングパイプラインを逸脱し、独自の描画ルールを定義できます。絵画的表現 の多くは、このシェーダー、特にフラグメントシェーダーを巧みに操ることで実現されます。
最も古典的で分かりやすい例は、トゥーンシェーディングでしょう。これは、モデル表面の法線ベクトルと光源への方向ベクトルの内積を計算し、その値に応じて色を段階的に塗り分ける手法です。滑らかな陰影のグラデーションを意図的に単純化することで、手描きアニメのようなはっきりとした明暗が生まれます。
// GLSL (Fragment Shader) の概念的なコード例
varying vec3 vNormal;
varying vec3 vLightDirection;
void main() {
float intensity = dot(normalize(vNormal), normalize(vLightDirection));
vec3 color;
if (intensity > 0.8) {
color = vec3(1.0, 0.8, 0.8); // 明るい色
} else if (intensity > 0.4) {
color = vec3(0.8, 0.5, 0.5); // 中間の色
} else {
color = vec3(0.5, 0.2, 0.2); // 暗い色
}
gl_FragColor = vec4(color, 1.0);
}さらに表現を豊かにするため、アーティストはノイズ関数（パーリンノイズなど）を利用します。これをテクスチャとして色や座標に微細な乱れを加えることで、デジタル特有の均一さを破壊し、画用紙のテクスチャや、絵筆の不規則なかすれといった有機的な質感を生み出すことができます。シェーダーは、いわば私たちクリエイターが手にするデジタルの絵筆であり、その使い方次第で無限の筆致を紡ぎ出すことができるのです。
WebGPUが拓くNPRの地平：多様なスタイルの実現とその事例
近年、Web標準のグラフィックスAPIとして定着しつつある WebGPU は、NPRの可能性をさらに押し広げています。WebGLがOpenGL ESをベースにしていたのに対し、WebGPUはより現代的なGPUアーキテクチャに寄り添った設計思想を持ち、特に「コンピュートシェーダー」の標準サポートが大きな変革をもたらしました。
コンピュートシェーダーは、従来の描画パイプラインから独立して、GPUの並列計算能力を汎用的なタスクに利用できる機能です。これにより、これまでリアルタイムWeb上では困難だった、より複雑なシミュレーションを伴うNPRが可能になります。例えば、画面全体を一つのキャンバスと見立て、インクが紙の繊維に沿って滲んでいく様子を流体シミュレーションで計算したり、無数の短い線（ハッチング）を、モデルの曲率や明暗に応じて動的に生成・配置したりといった高度な表現です。WebGLでも同様の試みはありましたが、複数のレンダリングパスやテクスチャのピングポングといった技巧的な実装が必要でした。WebGPUは、こうした計算をより直接的かつ効率的に記述する道を開いたのです。
最近のオンラインエキシビションや個人アーティストの作品サイトでは、WebGPUを用いて、鑑賞者のマウスの動きに応じて水彩絵の具がリアルタイムに混ざり合い、乾いていく過程を描くようなインタラクティブアートが**見られるようになってきています。**これは、単なる見た目のスタイルを超え、描画プロセスそのものを表現の一部とする、新しいNPRの潮流を示唆しています。
NPRが誘う鑑賞体験：なぜ私たちは「手描き」に魅せられるのか
ここで一度、技術的な側面から離れて、私たちの感性について考えてみたいと思います。なぜ私たちは、フォトリアルなCGの圧倒的な現実感に感嘆する一方で、拙さや曖昧さを残した「手描き」のような表現に、かくも強く心を動かされるのでしょうか。
その答えの一つは、NPRが「解釈の余地」を鑑賞者に与えてくれるからかもしれません。写真のように世界のすべてを詳細に写し取るのではなく、意図的に情報を削ぎ落とし、輪郭線を強調し、色彩を単純化する。このプロセスは、鑑賞者の想像力が入り込むための「余白」を生み出します。私たちはその不完全な情報から、描かれていない部分を能動的に補い、自分自身の記憶や感情を作品に投影するのです。そこには、作り手の筆致という名の「痕跡」が確かに感じられ、冷たいピクセルの集合体ではない、誰かの手の温もりや息遣いを想像させます。
印象派の画家たちが、対象そのものではなく、光がもたらす「印象」を描こうとしたように、NPRを用いたクリエイティブコーディングは、世界の物理的な正しさではなく、私たちが抱く情動的な真実を捉えようとする試みなのかもしれません。
NPRが問う創造性：技術と芸術の境界線における新たな対話
NPRの探求は、私たちに「創造性とは何か」という根源的な問いを投げかけます。既存の絵画スタイルをコードで模倣することは、確かに優れた技術的挑戦です。しかし、その本質は、単なるシミュレーションに留まりません。コンピュータというメディウムの特性を活かすことで、物理世界では不可能だった表現を生み出すことこそが、クリエイティブコーディング におけるNPRの真価ではないでしょうか。
例えば、鑑賞者の視線の動きに応じて変化し続ける筆致、音に反応して滲み方を変えるインク、決して乾くことのないデジタルの絵の具。これらは、時間とインタラクションという、Webならではの要素を取り込んだ新しい絵画の形です。アルゴリズムによって生成されるハッチングは、人間の手では描き得ないほどの密度と秩序を持ちながら、同時に有機的なゆらぎを内包することもできます。
NPRは、私たちを「現実を再現する」という重力から解放し、技術と芸術が対話し、融合する新たな地平へと導きます。それは、ロジックと感性が手を取り合って、まだ誰も見たことのない風景を描き出すための、終わりのない冒険なのです。
未来のWebアートへ：非写実的表現の可能性とクリエイターへの示唆
Webという開かれたキャンバスの上で、非写実的レンダリングが拓く表現の地平は、まだ始まったばかりです。フォトリアリズムという一つの頂きを目指す道のほかに、無数の表現スタイル、自分だけの視覚言語を探求する道が広がっています。
この記事を読んで、シェーダーやNPRの世界に少しでも心を動かされたのなら、ぜひその一歩を踏み出してみてください。The Book of Shadersのような優れた学習リソースを眺めてみるのも良いでしょう。あるいは、p5.jsやThree.jsで、まずは既存のシェーダーを読み込んで、そのパラメータを少し変えてみるだけでも、世界の見え方が変わる驚きがあるはずです。
コードで「描く」という行為は、単にピクセルを操作することではありません。それは、自分自身の内なる視点を、アルゴリズムという筆を通して世界に投影する、極めて詩的な営みなのです。あなただけの筆致が、Webのどこかで生まれる日を楽しみにしています。
