メインコンテンツへ移動
黯羽軽揚毎日少しずつ

7 種類の WebGL 図元_WebGL ノート 6

無料2015-12-31#JS#WebGL#webgl三角形#webgl矩形#wegl图元#webgl三角带#三角带和三角扇

WebGL は 7 種類の基本図形を直接描画できます。これらを図元と呼びます

はじめに

[前回のノート](/articles/用 buffer 绘制多个点-webgl 笔记 5/) では、buffer を利用して複数の頂点データを保存し、一度に描画しました。データ入力の問題を解決したので、次は point よりも少し複雑なもの、例えば三角形、線、矩形などを描画できます

一.図元

図元とは複雑なモデルを構成する最小ユニットで、WebGL では 7 種類の基本図形を直接描画できます。これらがいわゆる図元です：

  • 孤立点

  • 孤立線分

  • 連続線分

  • 連続コイル

  • 孤立三角形

  • 三角帯

  • 三角扇

「直接描画でき���」とは、逆に言えばこれらだけが直接描画可能で、他の少し複雑なものはこれら 7 種類の図元で自分で構築する必要があります。例えば矩形、六角形、四面体、立方体などはよく考えれば頂点を拼って計算できますが、より複雑なもの、例えば円柱、球、半球などは専門のモデリングツール（3ds max, maya, blender など）から頂点データをエクスポートする必要があります

複雑なモデルを構築する際は通常、三角帯または孤立三角形を使用します。例えば三角帯で球を構築するのは、まるで削り取った完全なリンゴの皮を復元するようなもので、孤立三角形で立方体を構築するのは、完全に拼凑です

二.図元の描画

之前に孤立点を描画した際、最終的に描画を担当するコードは 1 文だけでした：

// 绘制点
gl.drawArrays(gl.POINTS, 0, arrVtx.length / 2);
// gl.POINTS 孤立点
// gl.LINES 孤立线段
// gl.LINE_STRIP 连续线段
// gl.LINE_LOOP 连续线圈
// gl.TRIANGLES 孤立三角形
// gl.TRIANGLE_STRIP 三角带
// gl.TRIANGLE_FAN 三角扇

他の図元を描画するには gl.drawArrays の第 1 パラメータを変更するだけです。該関数の詳細な説明については [attribute 変数と頂点シェーダー_WebGL ノート 2](/articles/attribute 变量与顶点着色器-webgl 笔记 2/#articleHeader9) を参照してください。簡単に理解すると、第 1 パラメータは WebGL システムに传入された頂点データをどのように使用するかを伝えるためのものです。点を描くか、線を描くか、三角を描くか

P.S.実際には、第 1 パラメータは光栅化する前の図形装配プロセスに影響します。この時、パラメータで指定された図元に従って、処理済みの頂点データを幾何図形に装配し、その後光栅化のプロセスで幾何図形を 1 つ 1 つの片元（またはピクセル点）に分解し、さらに片元シェーダーで上色し、完了後が私たちが最終的に見る効果です。頂点データを传入してから描画完了までの具体的なプロセスは、下一篇の varying 変数に関するノートで詳しく説明します

三.矩形を描画

最も直接的な方法は 2 種類あります：

  • 6 つの頂点で 2 つの三角形を描画

  • 4 つの頂点で三角帯中の 2 つの三角片を確定

一般に頂点データを節約することを考慮し、传入する頂点数をできるだけ減らしてパフォーマンスを向上させます。そのため後者の方法を採用します。主なコードは以下の通り：

var arrVtx = new Float32Array([
    -0.5, 0.5,
    -0.5, 0.0,
    0.5, 0.5,
    0.5, 0.0
]);
// 绘制矩形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, arrVtx.length / 2);

还是比较簡単に見えますが、実際には複雑な図形を描画する最も重要な問題は頂点データのソースです。矩形の頂点は直接筆で列挙でき、少し複雑なものは草図を描いても書き出せます。さらに複雑なものは専門のモデリングツールが必要かもしれません。モデリングツールから頂点データファイルをエクスポートし、ファイルを解析して必要な頂点データを取得します。もちろん、習得が必要な知識から見れば、球を 1 つ描くことと矩形を 1 つ描くことには何の差別もありません

四.DEMO

上記のコードを含む完全な例については、以下を参照してください：

五.まとめ

図元を指定することは、WebGL に传入された頂点データをどのように使用したいかを伝えることです。那么就有这么一种情况：5 つの頂点を传入して孤立三角形を描画すると言ったら、結果を猜猜てください？もちろん 1 つの三角形しか描画されません。最後の 2 つの頂点では三角形を装配できないため、この三角形の 1 つ 1 つの片元を分解できず、最後にはそれが見えなくなります

頂点データを传入してから画像が描画されるまで、その間のプロセスは長いですが、各ステップが非常に重要です。下一篇のノートで詳しく説明します

参考資料

  • 《WebGL プログラミングガイド》

コメント

コメントはまだありません

コメントを書く