7章テクスチャ
先ほどの章では色と複数の光源の使用、深度テストとアルファテストを使用したさまざまなブレンディングテクニック関する重要な概念などを紹介しました。これまではジオメトリ、頂点色、ライティングなどを利用してシーンの細部を表現してきましたが、それだけでは求める品質を達成できないこともよくあります。ジオメトリを新しく追加せずに、シーン上の細部をさらに「描く」ことができればすばらしいと思いませんか？ テクスチャマッピングと呼ばれるテクニックを使用するとそれが可能です！ 本章ではテクスチャを利用してシーンをより詳細に表現する方法を紹介します。
本章では、以下のことを学びます。
- テクスチャの作成
- テクスチャを利用した描画
- フィルタとラッピングモード、それらのテクスチャへの影響
- 複数テクスチャの利用
- キューブマッピング
7.1 テクスチャマッピングとは何か？
テクスチャマッピングとは、物体表面に画像を描画して、ジオメトリのより細かな部分を表現する手法です。図7-1を見てください。
これまでに学んだテクニックだけでは、この比較的単純なシーンも簡単には実現できません。WebGLロゴだけでも大量のトライアングルプリミティブを慎重に組み立てる必要があります。そういった方法も不可能ではありませんが、シーンが非常に複雑になると、そのようなジオメトリの構築には耐えられないほどの手間がかかるでしょう。
幸い、テクスチャマッピングを使用すると、このようなシーンを非常に簡単に実現できます。必要なのは、適切なファイルフォーマットの画像、メッシュ上の追加の頂点アトリビュート、シェーダーコードのわずかな修正だけです。
図7-1 テクスチャマッピング
7.1.1 テクスチャの作成とアップロード
Get 初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3Dアプリケーション now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
