diff options
Diffstat (limited to 'experimental/wasm/shell.html')
| -rw-r--r-- | experimental/wasm/shell.html | 511 |
1 files changed, 511 insertions, 0 deletions
diff --git a/experimental/wasm/shell.html b/experimental/wasm/shell.html new file mode 100644 index 0000000000..8557241096 --- /dev/null +++ b/experimental/wasm/shell.html @@ -0,0 +1,511 @@ +<!doctype html> +<html lang="en-us"> + <head> + <meta charset="utf-8"> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Skia and WASM</title> + <style> + .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } + textarea.emscripten { font-family: monospace; width: 80%; } + div.emscripten { text-align: center; } + div.emscripten_border { border: 1px solid black; } + /* the canvas *must not* have any border or padding, or mouse coords will be wrong */ + canvas.emscripten { border: 0px none; background-color: black; } + + .spinner { + height: 50px; + width: 50px; + margin: 0px auto; + -webkit-animation: rotation .8s linear infinite; + -moz-animation: rotation .8s linear infinite; + -o-animation: rotation .8s linear infinite; + animation: rotation 0.8s linear infinite; + border-left: 10px solid rgb(0,150,240); + border-right: 10px solid rgb(0,150,240); + border-bottom: 10px solid rgb(0,150,240); + border-top: 10px solid rgb(100,0,200); + border-radius: 100%; + background-color: rgb(200,100,250); + } + @-webkit-keyframes rotation { + from {-webkit-transform: rotate(0deg);} + to {-webkit-transform: rotate(360deg);} + } + @-moz-keyframes rotation { + from {-moz-transform: rotate(0deg);} + to {-moz-transform: rotate(360deg);} + } + @-o-keyframes rotation { + from {-o-transform: rotate(0deg);} + to {-o-transform: rotate(360deg);} + } + @keyframes rotation { + from {transform: rotate(0deg);} + to {transform: rotate(360deg);} + } + + </style> + </head> + <body> + <hr/> + <figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure> + <div class="emscripten" id="status">Downloading...</div> + <div class="emscripten"> + <progress value="0" max="100" id="progress" hidden=1></progress> + </div> + <div class="emscripten_border"> + <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas> + </div> + <svg id=svg xmlns='http://www.w3.org/2000/svg' width=50 height=50 viewPort='0 0 50 50'> + </svg> + <hr/> + <div class="emscripten"> + <input type="checkbox" id="resize">Resize canvas + <input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer + + <input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked, + document.getElementById('resize').checked)"> + </div> + + <hr/> + <textarea class="emscripten" id="output" rows="8"></textarea> + <hr> + <script type='text/javascript'> + function entryPoint() { + // See https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#call-compiled-c-c-code-directly-from-javascript + const FAST_TIMES = 100 + 11 /*warmups*/; + const SLOW_TIMES = 10 + 11 /*warmups*/; + + var path; + for (let i = 0; i< FAST_TIMES; i++){ + if (i === 10) { + // let it "warm up" + console.time('Path_with_calls'); // about 3.9s for 1M iterations + } + path = new Module.SkPath(); + path.moveTo(0,0); + path.lineTo(40,0); + path.lineTo(20,20); + path.close(); + path.moveTo(20,0); + path.lineTo(60,0); + path.lineTo(40,20); + path.close(); + if (i < FAST_TIMES - 1) { + path.delete(); + } + } + console.timeEnd('Path_with_calls'); + + var result; + for(let i = 0; i < SLOW_TIMES; i++) { + if (i === 10) { + console.time('simplify'); // about 5.4s for 100k iterations + } + result = Module.SimplifyPath(path); + if (i < SLOW_TIMES - 1) { + result.delete(); + } + } + console.timeEnd('simplify'); + + var p2d; + for(let i = 0; i < FAST_TIMES; i++) { + if (i === 10) { + console.time('ToPath2D'); // about 6.3s for 1M iterations + } + p2d = Module.ToPath2D(result, new Path2D()); + } + console.timeEnd('ToPath2D'); + + let ctx = Module.canvas.getContext('2d') + ctx.strokeStyle = 'red'; + ctx.stroke(p2d); + + var svgPtr; + for(let i=0; i < FAST_TIMES; i++) { + if (i === 10) { + console.time('ToSVGString (simple)'); // about 7.1s for 1M iterations + } + svgPtr = Module.ToSVGString(result); + } + console.timeEnd('ToSVGString (simple)'); + Module.print('Got SVG Data: ' + svgPtr); + + var mountains; + for(let i=0; i < FAST_TIMES; i++) { + if (i === 10) { + console.time('FromSVGString (simple)'); + } + mountains = Module.FromSVGString(svgPtr); + if (i < FAST_TIMES - 1) { + mountains.delete(); + } + } + console.timeEnd('FromSVGString (simple)'); + + path.delete(); + result.delete(); + mountains.delete(); + + //============================================================================== + + function uint8TypedArray(arr) { + const ta = new Uint8ClampedArray(arr.length); + for (let i = 0; i < arr.length; i++){ + ta[i] = arr[i]; + } + + retVal = Module._malloc(ta.length * ta.BYTES_PER_ELEMENT); + Module.HEAPU8.set(ta, retVal / ta.BYTES_PER_ELEMENT); + return retVal; + } + + function floatTypedArray(arr) { + const ta = new Float32Array(arr.length); + for (let i = 0; i < arr.length; i++){ + ta[i] = arr[i]; + } + + retVal = Module._malloc(ta.length * ta.BYTES_PER_ELEMENT); + Module.HEAPF32.set(ta, retVal / ta.BYTES_PER_ELEMENT); + return retVal; + } + var path4; + for (let i = 0; i< FAST_TIMES; i++) { + if (i === 10) { + console.time('path_with_typed_array'); // about 3.6s for 1M iterations + } + let verbs = []; + let args = []; + + verbs.push(Module.MOVE_VERB); + args.push(100); args.push(0); + verbs.push(Module.LINE_VERB); + args.push(140); args.push(0); + verbs.push(Module.LINE_VERB); + args.push(120); args.push(20); + verbs.push(Module.CLOSE_VERB); + + verbs.push(Module.MOVE_VERB); + args.push(120); args.push(0); + verbs.push(Module.LINE_VERB); + args.push(160); args.push(0); + verbs.push(Module.LINE_VERB); + args.push(140); args.push(20); + verbs.push(Module.CLOSE_VERB); + + let tVerbs = uint8TypedArray(verbs); + let tArgs = floatTypedArray(args); + + path4 = Module.SkPathFromVerbsArgsTyped(tVerbs, verbs.length, + tArgs, args.length); + if (i < FAST_TIMES - 1) { + path4.delete(); + } + Module._free(tVerbs); + Module._free(tArgs); + } + console.timeEnd('path_with_typed_array'); + //path4.dump(); + + var v4, a4; + for (let i = 0; i< FAST_TIMES; i++) { + if (i === 10) { + console.time('to_verbs_args_array'); // about 5.4s for 1M iterations + } + v4 = []; + a4 = []; + Module.SkPathToVerbsArgsArray(path4, v4, a4); + } + console.timeEnd('to_verbs_args_array'); + + Module.print(`Got path with ${v4.length} verbs and ${a4.length} args`); + Module.print(v4[0] + ' (0 for value is MoveTo, 1 for LineTo, etc)'); + Module.print(a4[0], a4[1] + ' (coordinates)'); + + path4.delete(); + //============================================================================== + + let p1 = new Module.SkPath(); + p1.moveTo(0,60); + p1.lineTo(40,60); + p1.lineTo(20,80); + p1.close(); + let p2 = new Module.SkPath(); + p2.moveTo(20,60); + p2.lineTo(60,60); + p2.lineTo(40,80); + p2.close(); + + var p3; + for (let i = 0; i< SLOW_TIMES; i++) { + if (i === 10) { + console.time('ApplyPathOp'); // about 5.2s for 100k iterations + } + p3 = Module.ApplyPathOp(p1, p2, Module.PathOp.INTERSECT); + if (i < SLOW_TIMES - 1) { + p3.delete(); + } + } + console.timeEnd('ApplyPathOp'); + + ctx = Module.canvas.getContext('2d'); + ctx.strokeStyle = 'green'; + // Alternative way to use Path2D (potentially for browsers that + // don't support the Path2D?) + ctx.beginPath(); + Module.ToPath2D(p3, ctx); + ctx.stroke(); + + var builder, p4; + for (let i = 0; i< SLOW_TIMES; i++) { + if (i === 10) { + console.time('PathOpBuilder'); // about 12.3s for 100k iterations + } + builder = new Module.SkOpBuilder(); + builder.add(p1, Module.PathOp.UNION); + builder.add(p2, Module.PathOp.UNION); + builder.add(p3, Module.PathOp.DIFFERENCE); + p4 = Module.ResolveBuilder(builder); + if (i < SLOW_TIMES - 1) { + p4.delete(); + } + builder.delete(); + } + console.timeEnd('PathOpBuilder'); + + + p2d = Module.ToPath2D(p4, new Path2D()); + + ctx = Module.canvas.getContext('2d'); + ctx.fillStyle = 'purple'; + ctx.strokeStyle = 'white'; + ctx.fill(p2d); + ctx.stroke(p2d); + + p1.delete(); + p2.delete(); + p3.delete(); + p4.delete(); + +//===================================================================================== + + function floatTypedArrayFrom2D(arr) { + // expects 2d array where index 0 is verb and index 1-n are args + let len = 0; + for (cmd of arr) { + len += cmd.length; + } + + const ta = new Float32Array(len); + let i = 0; + for (cmd of arr) { + for (c of cmd) { + ta[i] = c; + i++; + } + } + + retVal = Module._malloc(ta.length * ta.BYTES_PER_ELEMENT); + Module.HEAPF32.set(ta, retVal / ta.BYTES_PER_ELEMENT); + return [retVal, len]; + } + + function SkPathFromCmdTyped(cmdArr) { + let [cmd, len] = floatTypedArrayFrom2D(cmdArr); + let path = Module.SkPathFromCmdTyped(cmd, len); + Module._free(cmd); + return path; + } + + var path5; + for (let i = 0; i< FAST_TIMES; i++) { + if (i === 10) { + console.time('path_cmd_typed (simple)'); // about 4.6s for 1M iterations + } + let commands = []; + + commands.push([Module.MOVE_VERB, 100, 60]); + commands.push([Module.LINE_VERB, 140, 60]); + commands.push([Module.LINE_VERB, 120, 80]); + commands.push([Module.CLOSE_VERB]); + + commands.push([Module.MOVE_VERB, 120, 60]); + commands.push([Module.LINE_VERB, 160, 60]); + commands.push([Module.LINE_VERB, 140, 80]); + commands.push([Module.CLOSE_VERB]); + + path5 = SkPathFromCmdTyped(commands); + + if (i < FAST_TIMES - 1) { + path5.delete(); + } + } + console.timeEnd('path_cmd_typed (simple)'); + + p2d = Module.ToPath2D(path5, new Path2D()); + + ctx = Module.canvas.getContext('2d'); + ctx.fillStyle = 'white'; + ctx.fill(p2d); + + var cmd5; + for (let i = 0; i< FAST_TIMES; i++) { + if (i === 10) { + console.time('to_cmd_array'); // about 9.1s for 1M iterations + } + cmd5 = Module.SkPathToCmdArray(path5); + } + console.timeEnd('to_cmd_array'); + + + Module.print(`Got path with ${cmd5.length} commands`); + Module.print(cmd5[0][0] + ' (0 for value is MoveTo, 1 for LineTo, etc)'); + Module.print(cmd5[0][1], cmd5[0][2] + ' (coordinates)'); + //console.log(cmd5); + + path5.delete(); + //========================================================== + const svgPath = 'M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z'; + + var android; + for(let i=0; i < SLOW_TIMES; i++) { + if (i === 10) { + console.time('FromSVGString (moderate)'); // about 6.8s for 100k iterations + } + android = Module.FromSVGString(svgPath); + if (i < SLOW_TIMES - 1) { + android.delete(); + } + } + console.timeEnd('FromSVGString (moderate)'); + + result = Module.SimplifyPath(android); + //result.dump(); + let androidSimple = Module.ToSVGString(result); + + let newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + newPath.setAttribute('fill', 'rgb(0,200,0)'); + newPath.setAttribute('d', androidSimple); + document.getElementById('svg').appendChild(newPath); + + androidCMDs = Module.SkPathToCmdArray(android); + + android.delete(); + result.delete(); + + var android2; + for (let i = 0; i< FAST_TIMES; i++) { + if (i === 10) { + console.time('path_cmd_typed (moderate)'); // about 2.2s for 100k + } + + android2 = SkPathFromCmdTyped(androidCMDs); + + if (i < FAST_TIMES - 1) { + android2.delete(); + } + } + console.timeEnd('path_cmd_typed (moderate)'); + var android2Str; + for(let i=0; i < SLOW_TIMES; i++) { + if (i === 10) { + console.time('ToSVGString (moderate)'); + } + android2Str = Module.ToSVGString(android2); + } + console.timeEnd('ToSVGString (moderate)'); + + newPath = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + newPath.setAttribute('fill', 'rgb(0,0,200)'); + newPath.setAttribute('d', android2Str); + newPath.setAttribute('transform', 'translate(25 0)'); + document.getElementById('svg').appendChild(newPath); + + android2.delete(); + } + </script> + <script type='text/javascript'> + var statusElement = document.getElementById('status'); + var progressElement = document.getElementById('progress'); + var spinnerElement = document.getElementById('spinner'); + + var Module = { + preRun: [], + postRun: [entryPoint], + print: (function() { + var element = document.getElementById('output'); + if (element) element.value = ''; // clear browser cache + return function(text) { + if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); + // These replacements are necessary if you render to raw HTML + //text = text.replace(/&/g, "&"); + //text = text.replace(/</g, "<"); + //text = text.replace(/>/g, ">"); + //text = text.replace('\n', '<br>', 'g'); + console.log(text); + if (element) { + element.value += text + "\n"; + element.scrollTop = element.scrollHeight; // focus on bottom + } + }; + })(), + printErr: function(text) { + if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); + if (0) { // XXX disabled for safety typeof dump == 'function') { + dump(text + '\n'); // fast, straight to the real console + } else { + console.error(text); + } + }, + canvas: (function() { + var canvas = document.getElementById('canvas'); + + // As a default initial behavior, pop up an alert when webgl context is lost. To make your + // application robust, you may want to override this behavior before shipping! + // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2 + canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false); + + return canvas; + })(), + setStatus: function(text) { + if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' }; + if (text === Module.setStatus.last.text) return; + var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); + var now = Date.now(); + if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon + Module.setStatus.last.time = now; + Module.setStatus.last.text = text; + if (m) { + text = m[1]; + progressElement.value = parseInt(m[2])*100; + progressElement.max = parseInt(m[4])*100; + progressElement.hidden = false; + spinnerElement.hidden = false; + } else { + progressElement.value = null; + progressElement.max = null; + progressElement.hidden = true; + if (!text) spinnerElement.hidden = true; + } + statusElement.innerHTML = text; + }, + totalDependencies: 0, + monitorRunDependencies: function(left) { + this.totalDependencies = Math.max(this.totalDependencies, left); + Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.'); + } + }; + Module.setStatus('Downloading...'); + window.onerror = function() { + Module.setStatus('Exception thrown, see JavaScript console'); + spinnerElement.style.display = 'none'; + Module.setStatus = function(text) { + if (text) Module.printErr('[post-exception status] ' + text); + }; + }; + </script> + {{{ SCRIPT }}} + </body> +</html> |