WebGL(2D) - 入門編 - 1日目: 線を描く

ずっと、避けてきたWebGLの勉強を始めたので
備忘録も兼ねて、投稿していこうと思います。

# 目標

WebGL(2D)で線を描く。

# HTML

index.htmlにcanvasをセット。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <script src="study.js"></script>
    <title>WebGL Study</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
```

# WebGL開始。

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

よし。
これでWebGLを使える！！

# 初期化

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



# 座標をセット


canvasでは`0.0, 0.0`が左上だったのに対してwebglの左上の地点は`-1.0, 1.0`になる。
canvasでは高さと横幅が指定したpxだったのに対してwebglは全て-1.0から1.0の幅に固定される。
高さと幅は実際のpxから計算して算出する必要があるorz

![image.png](https://qiita-image-store.s3.amazonaws.com/0/80502/7191ff0f-4108-e752-9632-fb0fb8dff899.png)


```js
var w = 400; // 幅 
var h = 400; // 高さ

// 今いる場所 [x=-1.0, y=1.0]
// 向かいたい座標
var x = 250;
var y = 250;

// 計算して算出する
var dx = (x-(w/2))/(w/2); // dx = 0.25
var dy = -(y-(h/2))/(h/2); // dy = -0.25
```


# 描画するまでに色々と手順が必要。



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

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

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

```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);
```

3 - フラグメントシェーダー

```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);
```

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

```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);
```

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

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

6 - 座標をセットする 

中心点から最右上の地点をセット
(今回は2Dなので、xとyだけで描画)

```js:study.js
// 開始座標
var x = 200; // x座標
var y = 200; // y座標

// 向かいたい座標
var dx = 400; // x座標
var dy = 0; // y座標

// 座標をセット
var vertices = [
    (x-(w/2))/(w/2), ~(y-(h/2))/(h/2),
    (dx-(w/2))/(w/2), ~(dy-(h/2))/(h/2)
];
```

7 - 描画する 


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

直線書くだけなのに、こんなにコード書かないとダメなのかorz

でも、ちゃんと描画されると楽しいなぁー


# 備忘録

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