-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebgl.html
140 lines (117 loc) · 4.13 KB
/
webgl.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="renderer" content="webkit">
<title>Canvas WebGL 绘制矩形</title>
<meta name="description" content="WebGL 新手上路，绘制矩形"/>
<meta name="keywords" content="Canvas,WebGL"/>
<meta name="author" content="Web Layout:amu"/>
<meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no"/>
<link rel="stylesheet" href="./src/style/base.css">
<style>
.canvas-layer{ position: relative; }
canvas{background: rgba(0,0,0,.2);left: 0;top: 0;border: 1px seagreen dashed;width: 100%;}
</style>
</head>
<body>
<div class="paper">
<h1>WebGL 新手上路</h1>
<hr>
<h2>案例：canvas-webgl绘制矩形</h2>
<div class="canvas-layer">
<canvas id="canvas-gl" width="800" height="600"></canvas>
</div>
<br>
</div>
</body>
<script>
let canvas=document.getElementById("canvas-gl");
const gl = canvas.getContext("webgl");
// 顶点着色器
var vertex_shader_source = `
attribute vec2 a_position;
uniform vec2 u_resolution;
void main() {
// convert the rectangle points from pixels to 0.0 to 1.0
vec2 zeroToOne = a_position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
}`
// 片元着色器
var fragment_shader_source = `
precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}`
var vertexShader = createShader(gl, vertex_shader_source, gl.VERTEX_SHADER)
var fragmentShader = createShader(gl, fragment_shader_source, gl.FRAGMENT_SHADER)
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS) ) {
let info = gl.getProgramInfoLog(program);
console.log(info)
throw "Could not compile WebGL program. \n\n" + info;
}
// 创建缓冲区对象
var positionBuffer = gl.createBuffer();
var a_position = gl.getAttribLocation(program, 'a_position');
// lookup uniforms
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
var colorLocation = gl.getUniformLocation(program, "u_color");
var color = [Math.random(), Math.random(), Math.random(), 1];
drawScene(gl,program)
function drawScene(gl,program){
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// Clear the canvas.
//gl.clearColor(1.0, 1.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Tell it to use our program (pair of shaders)
gl.useProgram(program);
// Turn on the attribute
gl.enableVertexAttribArray(a_position);
// 绑定缓冲区对象到目标
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
setRectangle(gl, 10, 10, 100, 40);
gl.vertexAttribPointer( a_position, 2, gl.FLOAT, false, 0, 0);
// set the resolution
gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
// set the color
gl.uniform4fv(colorLocation, color);
gl.drawArrays(gl.LINE_LOOP,0, 4);
}
function setRectangle(gl, x, y, width, height) {
var x1 = x;
var x2 = x + width;
var y1 = y;
var y2 = y + height;
let data = new Float32Array([
x1, y1,
x1, y2,
x2, y2,
x2, y1
])
// 将数据写入到缓冲区对象
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
}
function createShader (gl, sourceCode, type) {
// Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
var shader = gl.createShader( type );
gl.shaderSource( shader, sourceCode );
gl.compileShader( shader );
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
var info = gl.getShaderInfoLog( shader );
throw "Could not compile WebGL program. \n\n" + info;
}
return shader;
}
</script>
</html>