@@ -27,7 +27,7 @@ TOC: 点、線、三角形
2727 頂点シェーダによって出力された2つのクリップ空間の頂点に対して、その2点を繋いだ線を描画する。
2828 もしA,B,C,D,E,F という点があれば、3本の線が引けるだろう。
2929
30- <div class =" webgl_center " ><img src =" ../ resources/gl-lines.svg" style =" width : 400px ;" ></div >
30+ <div class =" webgl_center " ><img src =" resources/gl-lines.svg " style =" width : 400px ;" ></div >
3131
3232 仕様では` gl.lineWidth ` を実行して幅をピクセルで指定すれば、線の太さを変えることができる。
3333 だが実際には最大幅は実装に依存し、大抵の場合1である。
@@ -42,33 +42,33 @@ TOC: 点、線、三角形
4242
4343 つまり、A,B,C,D,E,Fという点があれば5本の線が引けるだろう。
4444
45- <div class =" webgl_center " ><img src =" ../ resources/gl-line-strip.svg" style =" width : 400px ;" ></div >
45+ <div class =" webgl_center " ><img src =" resources/gl-line-strip.svg " style =" width : 400px ;" ></div >
4646
4747* ` LINE_LOOP `
4848
4949 ` LINE_STRIP ` の例と同じで、最後の点から最初の点へ向かってさらにもう1本線を引く。
5050
51- <div class =" webgl_center " ><img src =" ../ resources/gl-line-loop.svg" style =" width : 400px ;" ></div >
51+ <div class =" webgl_center " ><img src =" resources/gl-line-loop.svg " style =" width : 400px ;" ></div >
5252
5353* ` TRIANGLES `
5454
5555 頂点シェーダによって出力された各クリップ空間の頂点3つに対して、その3点を使った三角形を描画する。大抵の場合このモードが使用される。
5656
57- <div class =" webgl_center " ><img src =" ../ resources/gl-triangles.svg" style =" width : 400px ;" ></div >
57+ <div class =" webgl_center " ><img src =" resources/gl-triangles.svg " style =" width : 400px ;" ></div >
5858
5959* ` TRIANGLE_STRIP `
6060
6161 頂点シェーダによって出力された各クリップ空間の頂点に対して、最新の3点ずつを使用した三角形を描画する。
6262 言い換えると、もしA,B,C,D,E,Fという6点があればA,B,C、B,C,D、C,D,E、そしてD,E,Fというように4つの三角形が描画される。
6363
64- <div class =" webgl_center " ><img src =" ../ resources/gl-triangle-strip.svg" style =" width : 400px ;" ></div >
64+ <div class =" webgl_center " ><img src =" resources/gl-triangle-strip.svg " style =" width : 400px ;" ></div >
6565
6666* ` TRIANGLE_FAN `
6767
6868 頂点シェーダによって出力された各クリップ空間の頂点に対して、最初の頂点1と最新の2点を使用した三角形を描画する。
6969 言い換えると、もしA,B,C,D,E,Fという6点があればA,B,C、A,C,D、A,D,E、そしてA,E,Fというように4つの三角形が描画される。
7070
71- <div class =" webgl_center " ><img src =" ../ resources/gl-triangle-fan.svg" style =" width : 400px ;" ></div >
71+ <div class =" webgl_center " ><img src =" resources/gl-triangle-fan.svg " style =" width : 400px ;" ></div >
7272
7373他の人たちの意見もあるが、私の経験上` TRIANGLE_FAN ` や` TRIANGLE_STRIP ` は避けた方が良いと考えている。
7474これらは一部の例外的ケースにしか利用できず、これらのケースを処理するためにすべてを三角形で描画するのはそもそも割に合わない。
@@ -82,7 +82,7 @@ TOC: 点、線、三角形
8282` TRIANGLE_FAN ` を` TRIANGLE_STRIP ` と同じように、これらを使うような状況はとても珍しい。
8383例えば4つの点を繋いだ直線を4本描きたい場合を考えてみよう。
8484
85- <div class =" webgl_center " ><img src =" ../ resources/4-lines-4-points.svg" style =" width : 400px ;" ></div >
85+ <div class =" webgl_center " ><img src =" resources/4-lines-4-points.svg " style =" width : 400px ;" ></div >
8686
8787もし` LINE_STRIP ` を使ったとしたら` gl.drawArrays ` を4回実行し、さらにそれぞれの線の属性を設定するためにより多くの処理が必要になる。
8888
0 commit comments