diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-srgb-upload.html | |
parent | Initial commit. (diff) | |
download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-srgb-upload.html')
-rw-r--r-- | dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-srgb-upload.html | 253 |
1 files changed, 253 insertions, 0 deletions
diff --git a/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-srgb-upload.html b/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-srgb-upload.html new file mode 100644 index 0000000000..3508670563 --- /dev/null +++ b/dom/canvas/test/webgl-conf/checkout/conformance/textures/misc/texture-srgb-upload.html @@ -0,0 +1,253 @@ +<!-- +Copyright (c) 2022 The Khronos Group Inc. +Use of this source code is governed by an MIT-style license that can be +found in the LICENSE.txt file. +--> +<!DOCTYPE html> +<html> +<head> +<meta charset=utf-8> +<title>Upload texture from video into srgb internalformats</title> +<link rel="stylesheet" href="../../../resources/js-test-style.css"/> +<script src="../../../js/js-test-pre.js"></script> +<script src="../../../js/webgl-test-utils.js"></script> +</head> +<body> + <div id="description"></div> + <div id="console"></div> + <div> + Video: + <canvas id="e_rgba" width="300" height="200"></canvas> + 0x7f: <canvas id="e_rgba_color" width="30" height="200"></canvas> + <div>GL.RGBA</div> + </div> + <hr> + <div> + Video: + <canvas id="e_srgb8" width="300" height="200"></canvas> + 0x7f: <canvas id="e_srgb8_color" width="30" height="200"></canvas> + <div>GL.SRGB8</div> + </div> + <hr> + <div> + Video: + <canvas id="e_srgb8_alpha8" width="300" height="200"></canvas> + 0x7f: <canvas id="e_srgb8_alpha8_color" width="30" height="200"></canvas> + <div>GL.SRGB8_ALPHA8</div> + </div> +<script> +"use strict"; +const wtu = WebGLTestUtils; +description(); + +const DATA_URL_FOR_720p_png_bt709_bt709_tv_yuv420p_vp9_webm = '\ +data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEA\ +AAAAAAMBEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHGTbuMU6uEElTDZ1OsggElTbuMU6u\ +EHFO7a1OsggLr7AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\ +AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmoCrXsYMPQ\ +kBNgIRMYXZmV0GETGF2ZkSJiEBEAAAAAAAAFlSua9quAQAAAAAAAFHXgQFzxYgAAAAAAAAAAZyBACK1\ +nIN1bmSGhVZfVlA5g4EBI+ODhAJiWgDgAQAAAAAAAB6wggUAuoIC0JqBAlWwkFW6gQFVsYEBVbuBAVW\ +5gQESVMNn43NzAQAAAAAAAFljwItjxYgAAAAAAAAAAWfIAQAAAAAAABxFo4dFTkNPREVSRIePTGF2Yy\ +BsaWJ2cHgtdnA5Z8iiRaOIRFVSQVRJT05Eh5QwMDowMDowMC4wNDAwMDAwMDAAAB9DtnVBWOeBAKNBU\ +oEAAICCSYNCQE/wLPYAOCQcGAAYAFB/N9H/HZUjnnscu9GvIJt3936AAAAAACh4E4g/fJ8GmILlgmQ6\ +iUMwWlrCvdZpJAjY24ONeWCZEIrug5k4YTeAAAAAaXgTiD98nwaYguWCZDq6Zy9PLtRqFgTRRWpDzEC\ +RrKr8wtgzCibnQJwWtOOaHH9ZRjl4+aOQHHoHk/YUdplRSYiwuJO6LIyUXumq92uzm/wLAqBN0N9kRR\ +evcxyTv6VcsFqLJ5W5INE4AAAAAGN4E3vgaWsaGceNeWlTmlA/W7BnrSNUEx9X/o/hlK8PPDCgN5Kpw\ +0gRJkKtiMQMtYO7DQAUWLnf3+GjIUUj4hiAGdY+FNLJIdswhZLCeSDQfqV1btKL/ns57OfXQc0R3HFz\ +YyB4E3vgaWsaGceNeWjppQzBaWtIcWVNbYO5ARh7kHkq6WBosnlbkfoAHFO7a5G7j7OBALeK94EB8YI\ +BjfCBAw=='; + +function invoke(fn) { return fn(); } + +invoke(async () => { + const video = document.createElement("video"); + video.src = DATA_URL_FOR_720p_png_bt709_bt709_tv_yuv420p_vp9_webm; + //video.src = "Big_Buck_Bunny_360_10s_1MB.mp4"; + //video.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"; + video.muted = true; + video.loop = true; + video.crossOrigin = "anonymous"; + await video.play(); + + function renderTex(canvas, fn_tex_image) { + const gl = canvas.gl = wtu.create3DContext(canvas); + + const vs = ` +attribute float a_VertexID; +varying vec2 v_uv; +void main() { + float id = a_VertexID; + v_uv.x = mod(id, 2.0); + id -= v_uv.x; + id /= 2.0; + v_uv.y = mod(id, 2.0); + gl_Position = vec4(2.0 * v_uv - 1.0, 0, 1); +}`; + + const fs = ` +precision mediump float; +uniform sampler2D tex; +varying vec2 v_uv; +void main() { + gl_FragColor = texture2D(tex, v_uv); +}`; + + const program = gl.createProgram(); + let shader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(shader, vs); + gl.compileShader(shader); + gl.attachShader(program, shader); + shader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(shader, fs); + gl.compileShader(shader); + gl.attachShader(program, shader); + gl.bindAttribLocation(program, 0, 'a_VertexID'); + gl.linkProgram(program); + gl.useProgram(program); + if (gl.getError()) throw 'Error during linking'; + + const vbuf = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vbuf); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,1,2,3]), gl.STATIC_DRAW); + gl.enableVertexAttribArray(0); + gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0); + + const texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + + const draw = function() { + //requestAnimationFrame(draw); + fn_tex_image(gl); + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); + }; + draw(); + + if (gl.getError()) throw 'Error during drawing'; + } + + const GL = WebGL2RenderingContext; + const COLOR_DATA = new Uint8Array([127, 127, 127, 255]); + + function internalformat_webgl1or2(gl, internalformat_name) { + let internalformat = gl[internalformat_name]; + if (!internalformat) { + const ext = gl.getExtension('EXT_srgb'); + if (!ext) { + testPassed('EXT_srgb not supported. (ok!)'); + return; + } + switch (internalformat_name) { + case 'SRGB8': + internalformat = ext.SRGB_EXT; + break; + case 'SRGB8_ALPHA8': + internalformat = ext.SRGB_ALPHA_EXT; + break; + default: + throw internalformat_name; + } + } + return internalformat; + } + + function begin(e_video, e_color, internalformat_name, unpackformat) { + renderTex(e_video, gl => { + const internalformat = internalformat_webgl1or2(gl, internalformat_name); + if (!gl.SRGB8) { + unpackformat = internalformat; // Must match in webgl1. + } + gl.texImage2D(GL.TEXTURE_2D, 0, internalformat, + unpackformat, GL.UNSIGNED_BYTE, video); + }); + renderTex(e_color, gl => { + const internalformat = internalformat_webgl1or2(gl, internalformat_name); + if (!gl.SRGB8) { + unpackformat = internalformat; // Must match in webgl1. + } + gl.texImage2D(GL.TEXTURE_2D, 0, internalformat, 1, 1, 0, + unpackformat, GL.UNSIGNED_BYTE, COLOR_DATA); + }); + } + + begin(e_rgba, e_rgba_color, 'RGBA', GL.RGBA); + begin(e_srgb8, e_srgb8_color, 'SRGB8', GL.RGB); + begin(e_srgb8_alpha8, e_srgb8_alpha8_color, 'SRGB8_ALPHA8', GL.RGBA); + + // - + + const GREY50_COLOR_COORD = { + x: 0, + y: 0, + }; + const GREY50_TEX_COORD = { + x: e_rgba.width/2 + 1, + y: e_rgba.height/2 + 1, + }; + const fn_test = (canvas, coord, data) => { + wtu.checkCanvasRect(canvas.gl, coord.x, coord.y, 1, 1, data, + `${canvas.id} @${JSON.stringify(coord)}`); + } + + debug(''); + debug('e_rgba'); + fn_test(e_rgba_color, GREY50_COLOR_COORD, [0x7f, 0x7f, 0x7f, 0xff]); + fn_test(e_rgba, GREY50_TEX_COORD, [0x7f, 0x7f, 0x7f, 0xff]); + + debug(''); + debug('e_srgb8'); + fn_test(e_srgb8_color, GREY50_COLOR_COORD, [0x36, 0x36, 0x36, 0xff]); + fn_test(e_srgb8, GREY50_TEX_COORD, [0x36, 0x36, 0x36, 0xff]); + + debug(''); + debug('e_srgb8_alpha8'); + fn_test(e_srgb8_alpha8_color, GREY50_COLOR_COORD, [0x36, 0x36, 0x36, 0xff]); + fn_test(e_srgb8_alpha8, GREY50_TEX_COORD, [0x36, 0x36, 0x36, 0xff]); + + finishTest(); +}); + +/* +async function blobToDataURL(blob) { + const fr = new FileReader(); + return await new Promise((yes, no) => { + fr.addEventListener('loadend', ev => { + if (fr.result) { + return yes(fr.result); + } + return no(fr.error); + }); + fr.readAsDataURL(blob); + }); +} + +async function fetchDataUrl(url, wrapAt) { + const r = await fetch(url); + const b = await r.blob(); + const durl = await blobToDataURL(b); + return durl; +} + +function wrapLines(str, wrapAt) { + const lines = []; + let remaining = str; + while (remaining) { + lines.push(remaining.slice(0, wrapAt)); + remaining = remaining.slice(wrapAt); + } + return lines; +} + +(async () => { + const url = '720p.png.bt709.bt709.tv.yuv420p.vp9.webm'; + const ident = 'DATA_URL_FOR_' + url.replaceAll('.', '_'); + const durl = await fetchDataUrl(url); + const lines = wrapLines(durl, 79); + console.log(ident, '= \'\\\n' + lines.join('\\\n') + '\';'); +})(); +*/ +</script> +</body> +</html> |