-
Notifications
You must be signed in to change notification settings - Fork 0
/
5.html
117 lines (98 loc) · 4.32 KB
/
5.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}
</style>
</head>
<body>
<script type="shader-source" id="vertexShader">
precision mediump float;
attribute vec2 a_Position;
attribute vec2 a_Canvas_Size;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;
void main(){
vec2 position = (a_Position / a_Canvas_Size) * 2.0 - 1.0;
position = position * vec2(1.0,-1.0);
gl_Position = vec4(position,0,1);
v_texCoord = a_texCoord;
}
</script>
<script type="shader-source" id="fragmentShader">
precision mediump float;
varying vec2 v_texCoord;
uniform sampler2D u_image;
void main(){
gl_FragColor = texture2D(u_image,v_texCoord);
}
</script>
<script src="../util.js"></script>
<script>
const canvas = document.createElement('canvas')
const wWidth = window.innerWidth;
const wHeight = window.innerHeight;
canvas.width = wWidth;
canvas.height = wHeight;
document.body.appendChild(canvas)
const gl = canvas.getContext('webgl');
const program = createSimpleProgram(gl);
gl.useProgram(program)
const positions = [
30, 30, 0, 0, //V0
30, 300, 0, 1, //V1
300, 300, 1, 1, //V2
30, 30, 0, 0, //V0
300, 300, 1, 1, //V2
300, 30, 1, 0 //V3
]
const buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
const a_Position = gl.getAttribLocation(program, 'a_Position')
const a_Canvas_Size = gl.getAttribLocation(program, 'a_Canvas_Size')
const a_texCoord = gl.getAttribLocation(program, 'a_texCoord')
const u_image = gl.getUniformLocation(program, 'u_image')
gl.vertexAttrib2f(a_Canvas_Size, canvas.width, canvas.height)
gl.enableVertexAttribArray(a_Position)
gl.enableVertexAttribArray(a_texCoord)
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(a_texCoord, 2, gl.FLOAT, false, 16, 8);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)
const img = new Image;
img.src = '../images/wl.png'
img.onload = function () {
const texture = gl.createTexture();
// gl.activeTexture(gl.TEXTURE0)
// gl.TEXTURE_2D 当前纹理绑定点
gl.bindTexture(gl.TEXTURE_2D, texture)
// target 纹理类型,TEXTURE_2D代表2维纹理
// level 表示多级分辨率的纹理图像的级数,若只有一种分辨率,则 level 设为 0,通常我们使用一种分辨率
// components 纹理通道数,通常我们使用 RGBA 和 RGB 两种通道
// width 纹理宽度,可省略
// height 纹理高度,可省略
// border 边框,通常设置为0,可省略
// format 纹理映射的格式
// type 纹理映射的数据类型
// pixels 纹理图像的数据
// 为片元着色器传递图片数据
// 我们将 img 变量指向的图片数据传递给片元着色器,取对应纹理坐标的 RGBA 四个通道值,赋给片元,每个通道的数据格式是无符号单字节整数。
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
// gl.LINEAR 代表采用最靠近象素中心的四个象素的加权平均值,这种效果表现的更加平滑自然。 gl.NEAREST 采用最靠近象素中心的纹素,该算法可能使图像走样,但是执行效率高,不需要额外的计算。
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.uniform1i(u_image, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
if (positions.length <= 0) {
return;
}
gl.drawArrays(gl.TRIANGLES, 0, positions.length / 4);
}
</script>
</body>
</html>