-
Notifications
You must be signed in to change notification settings - Fork 2
/
example.html
150 lines (124 loc) · 5.03 KB
/
example.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
141
142
143
144
145
146
147
148
149
150
<html>
<head>
<script>
var gl = null;
var gl_program = null;
let drawGLCanvas = function() {
// Select the tone mapping mode based on the radio button.
let toneMappingMode = null;
if (ToneMapModeStandard.checked) {
toneMappingMode = "standard";
}
if (ToneMapModeExtended.checked) {
toneMappingMode = "extended";
}
gl.drawingBufferToneMapping({ mode:toneMappingMode });
gl.useProgram(gl_program);
let vertices = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertices);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, 1,1, -1,1]), gl.STATIC_DRAW);
let indices = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indices);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2, 0,2,3]), gl.STATIC_DRAW);
let positionLocation = gl.getAttribLocation(gl_program, 'position');
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);
gl.uniform1f(gl.getUniformLocation(gl_program, 'pixel_value'), PixelValueSlider.value);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
}
let update = function() {
// Update dynamic range query result.
DynamicRangeMatch.innerHTML = "(unsupported)";
if (window.matchMedia("(dynamic-range: standard)").matches) {
DynamicRangeMatch.innerHTML = "standard";
}
if (window.matchMedia("(dynamic-range: high)").matches) {
DynamicRangeMatch.innerHTML = "high";
DynamicRangeExplanation.hidden = true;
} else {
DynamicRangeExplanation.hidden = false;
}
// Update the pixel value displays.
let parametricEval = function(x, a, b, c, d, e, f, g) {
const absX = Math.abs(x);
const sgnX = Math.sign(x);
return sgnX * (absX <= d) ? c*absX + f : Math.pow(a*absX + b, g) + e;
}
let srgbToLinear = function(x) {
return parametricEval(
x, 1/1.055, 0.055/1.055, 1/12.92, 0.04045, 0, 0, 2.4);
}
PixelValue.innerHTML = Number(PixelValueSlider.value).toFixed(2);
PixelValueLinear.innerHTML = srgbToLinear(PixelValueSlider.value).toFixed(2);
drawGLCanvas();
}
function main() {
gl = GLCanvas.getContext('webgl2');
gl.getExtension('EXT_color_buffer_half_float');
gl.getExtension('EXT_color_buffer_float');
gl.drawingBufferStorage(gl.RGBA16F, gl.drawingBufferWidth, gl.drawingBufferHeight);
let compileShader = function(gl, vertex_source, fragment_source) {
let vertex_shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertex_shader, vertex_source);
gl.compileShader(vertex_shader);
if (!gl.getShaderParameter(vertex_shader, gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(vertex_shader));
let fragment_shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragment_shader, fragment_source);
gl.compileShader(fragment_shader);
if (!gl.getShaderParameter(fragment_shader, gl.COMPILE_STATUS))
throw new Error(gl.getShaderInfoLog(fragment_shader));
let program = gl.createProgram();
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
throw new Error(gl.getProgramInfoLog(program));
return program;
}
const vs = `attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}`;
const fs = `precision highp float;
uniform float pixel_value;
void main() {
gl_FragColor = vec4(pixel_value, pixel_value, pixel_value, 1.0);
}`;
gl_program = compileShader(gl, vs, fs);
gl.useProgram(gl_program);
PixelValueSlider.addEventListener('input', update, false);
update();
}
</script>
</head>
<body onload='main()'>
<h1>HDR support</h1>
<p>The <tt>dynamic-range</tt> media query matches <tt id="DynamicRangeMatch">?</tt>.</p>
<p id="DynamicRangeExplanation" hidden>This means that, on this display, setting the tone mapping mode to <tt>extended</tt> will have no effect (it will be the same as setting it to <tt>standard</tt>).</p>
<p>
This demo requires that "Experimental Web Platform features" be enabled in chrome://flags.
</p>
<h1>Rendering settings</h1>
<p>
Pixel value:
<input id="PixelValueSlider" type="range" min="0" max="3" step="0.01" value="1" list="PixelValueSliderTicks""/>
<datalist id="PixelValueSliderTicks">
<option value="0" label="0"></option>
<option value="1" label="1"></option>
<option value="2" label="2"></option>
<option value="3" label="3"></option>
</datalist>
<tt id="PixelValue"></tt> (sRGB-encoded), <tt id="PixelValueLinear">?</tt> (linear-encoded)
</p>
<p>
Tone map mode:
<input type="radio" name="ToneMapMode" id="ToneMapModeStandard" onchange="update();" checked="true">
<label for="ToneMapModeStandard"><tt>standard</tt></label>
<input type="radio" name="ToneMapMode" id="ToneMapModeExtended" onchange="update();">
<label for="ToneMapModeExtended"><tt>extended</tt></label>
</p>
<h1>Canvas</h1>
<canvas id="GLCanvas" style="width:32px; height:32px; border:1px solid black;"></canvas>
</body>
</html>