/
canvas-backing-resize.html
118 lines (109 loc) · 2.93 KB
/
canvas-backing-resize.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
<style>
html, body, canvas {
width: 100%;
height: 100%;
margin: 0;
display: block;
font-family: monospace;
}
#ui {
font-size: 1.5vh;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.9);
color: white;
padding: 0.5em;
}
</style>
<body>
<canvas></canvas>
<pre id="ui"></pre>
</body>
<script type="module">
import * as twgl from 'https://twgljs.org/dist/4.x/twgl-full.module.js';
const kmgt = function() {
const suffixes = ['b', 'k', 'm', 'G', 'T'];
return function kmgt(v) {
const t = Math.min(Math.log10(v) / 3 | 0, suffixes.length - 1);
const d = v / Math.pow(10, t * 3);
return `${d.toFixed(d % 1 > 0.05 ? 1 : 0)}${suffixes[t]}`;
};
}();
const gl = document.querySelector('canvas').getContext('webgl');
const ext = gl.getExtension('WEBGL_debug_renderer_info');
const vs = `
attribute vec4 position;
uniform mat4 matrix;
varying vec4 color;
void main() {
gl_Position = matrix * position;
color = position * 0.5 + 0.5;
}
`;
const fs = `
precision mediump float;
varying vec4 color;
void main() {
gl_FragColor = vec4(color.xyz, 1);
}
`;
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
position: {
numComponents: 2,
data: [
0, -1,
-1, 0,
1, 0,
1, 0,
-1, 0,
0, 1,
],
},
});
const ui = document.querySelector('#ui');
function resizeCanvasToDisplaySize(gl) {
const canvas = gl.canvas;
const width = canvas.clientWidth * devicePixelRatio;
const height = canvas.clientHeight * devicePixelRatio;
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
const w = gl.drawingBufferWidth;
const h = gl.drawingBufferHeight;
const samples = gl.getParameter(gl.SAMPLES);
const size = w * h;
const displaySize = size * 4;
const backSize = displaySize * samples;
const depthSize = size * (gl.getParameter(gl.DEPTH_BITS) > 16 ? 4 : 2);
const mem = displaySize + backSize + depthSize;
ui.textContent = `\
dpr: ${devicePixelRatio}
width: ${width}
height: ${height}
drawingBufferWidth: ${gl.drawingBufferWidth}
drawingBufferHeight: ${gl.drawingBufferHeight}
min memory needed: ${kmgt(mem)}
samples: ${samples}
gpu: ${gl.getParameter(ext ? ext.UNMASKED_VENDOR_WEBGL : gl.VENDOR)}
`;
}
}
const m4 = twgl.m4;
function render(time) {
resizeCanvasToDisplaySize(gl);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
const a = gl.canvas.clientWidth / gl.canvas.clientHeight;
const m = m4.ortho(-a, a, -1, 1, -1, 1);
m4.rotateZ(m, time * 0.001, m);
twgl.setUniforms(programInfo, {
matrix: m,
});
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
</script>