WebGL(2D) - 入門編 - 2日目: 線の太さをコントロールする

# 目標

線の太さをコントロールする

# 完成イメージ

![image3.png](https://qiita-image-store.s3.amazonaws.com/0/80502/a4bc87d8-784d-acb3-c885-8c3cc3d3289c.png)


# WebGL開始。

```js:study.js
var w = 400; // 幅
var h = 400; // 高さ
var canvas = document.getElementById("canvas");
canvas.width = w;
canvas.height = h;
var gl = canvas.getContext("webgl");
```

# 初期化

```js:study.js
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
```


# 空のバッファオブジェクトを生成

```js:study.js
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
```

# バーテックス(頂点)シェーダー

```js:study.js
var vSource = [
    "precision mediump float;",
    "attribute vec2 vertex;",
    "void main(void) {",
        "gl_Position = vec4(vertex, 0.0, 1.0);",
    "}"
].join("\n");

var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vSource);
gl.compileShader(vShader);
gl.getShaderParameter(vShader, gl.COMPILE_STATUS);
```

# フラグメントシェーダー

```js:study.js
var rgba = [0.0, 0.0, 0.0, 1.0]; // Red, Green, Blue, Alpha
var fSource = [
    "precision mediump float;",
    "void main(void) {",
        "gl_FragColor = vec4("+ rgba.join(",") +");",
    "}"
].join("\n");

var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fSource);
gl.compileShader(fShader);
gl.getShaderParameter(fShader, gl.COMPILE_STATUS);
```

# プログラムオブジェクトの生成

```js:study.js
var program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.getProgramParameter(program, gl.LINK_STATUS);
gl.useProgram(program);
```

# シェーダー側の変数をjs側で受け受け取る

```js:study.js
var vertex = gl.getAttribLocation(program, "vertex");
gl.enableVertexAttribArray(vertex);
gl.vertexAttribPointer(vertex, 2, gl.FLOAT, false, 0, 0);
```

# 座標セット

始点と終点のイメージ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/80502/c931275c-ab9a-0750-86c5-8c08c5dad1d6.png)



```js:study.js
// 始点
var x = 100; // x座標
var y = 300; // y座標

// 終点
var dx = 300; // x座標
var dy = 100; // y座標
```

# 線に太さを付ける

線の太さに合わせて二等辺三角形を作る。
赤い丸の座標を計算してセット

![image2.png](https://qiita-image-store.s3.amazonaws.com/0/80502/5a984a82-188c-c1ed-2756-baa299b3ca2c.png)


```js:study.js
// 線太さ
var lineWidth = 90;

// 始点と終点の角度を取得
var angle = Math.atan2(y - dy, x - dx) / (Math.PI / 180) * -1;

// 4点の座標をセット
var x1 = x + Math.cos((angle + 270) * Math.PI / 180) * lineWidth / 2;
var y1 = y + Math.sin((angle + 270) * Math.PI / 180) * lineWidth / 2 * -1;

var x2 = dx + Math.cos((angle + 270) * Math.PI / 180) * lineWidth / 2;
var y2 = dy + Math.sin((angle + 270) * Math.PI / 180) * lineWidth / 2 * -1;

var x3 = x + Math.cos((angle + 90) * Math.PI / 180) * lineWidth / 2;
var y3 = y + Math.sin((angle + 90) * Math.PI / 180) * lineWidth / 2 * -1;

var x4 = dx + Math.cos((angle + 90) * Math.PI / 180) * lineWidth / 2;
var y4 = dy + Math.sin((angle + 90) * Math.PI / 180) * lineWidth / 2 * -1;

var vertices = [
    (x1-(w/2))/(w/2), -(y1-(h/2))/(h/2),
    (x2-(w/2))/(w/2), -(y2-(h/2))/(h/2),
    (x3-(w/2))/(w/2), -(y3-(h/2))/(h/2),
    (x4-(w/2))/(w/2), -(y4-(h/2))/(h/2)
];
```



# 4点をつないで描画

```js:study.js
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length/2);
```


# 備忘録

[WebGLStudy](https://github.com/ienaga/WebGLStudy)