JSFiddle - React, Tailwind, and code Playground

by jinam yu

HTML

<div id="app">
  <canvas id="canvas"></canvas>
</div>

JavaScript

function clamp(v, lo, hi) {
  return Math.min(hi, Math.max(lo, v));
}
function srgbToLinear(v) {
  var component = (+v * (1.0 / 255.0));
  return component * component;
}
function linearToSRGB(v) {
  return (Math.sqrt(v) * 255.0) | 0;
}
function transformSingleFace(inPixels, face, facePixels, opts) {
		if (!opts) {
			opts = {
      flipTheta: false,
		interpolation: "bilinear"
      };
		}
		var thetaFlip = opts.flipTheta ? -1 : 1;
		var edge = facePixels.width|0;

		var inWidth = inPixels.width|0;
		var inHeight = inPixels.height|0;
		var inData = inPixels.data;

		var smoothNearest = (opts.interpolation === "nearest");

		var faceData = facePixels.data;
		var faceWidth = facePixels.width|0;
		var faceHeight = facePixels.height|0;

		var iFaceWidth2 = 2.0 / faceWidth;
		var iFaceHeight2 = 2.0 / faceHeight;

		for (var j = 0; j < faceHeight; ++j) {
			for (var i = 0; i < faceWidth; ++i) {
				var a = iFaceWidth2 * i;
				var b = iFaceHeight2 * j;
				var outPos = (i + j * edge) << 2;
				var x = 0.0, y = 0.0, z = 0.0;
				// @@NOTE: Tried using explicit matrices for this and didn't see any
				// speedup over the (IMO more understandable) switch. (Probably because these
				// branches should be correctly predicted almost every time).
				switch (face) {
					case 0: x = 1.0 - a; y = 1.0;     z = 1.0 - b; break; // right  (+x)
					case 1: x = a - 1.0; y = -1.0;    z = 1.0 - b; break; // left   (-x)
					case 2: x = b - 1.0; y = a - 1.0; z = 1.0;     break; // top    (+y)
					case 3: x = 1.0 - b; y = a - 1.0; z = -1.0;    break; // bottom (-y)
					case 4: x = 1.0;     y = a - 1.0; z = 1.0 - b; break; // front  (+z)
					case 5: x = -1.0;    y = 1.0 - a; z = 1.0 - b; break; // back   (-z)
				}

				var theta = thetaFlip * Math.atan2(y, x);
				var rad = Math.sqrt(x*x+y*y);
				var phi = Math.atan2(z, rad);

				var uf = 2.0 * (inWidth / 4) * (theta + Math.PI) / Math.PI;
				var vf = 2.0 * (inWidth / 4) * (Math.PI/2 - phi) / Math.PI;
				var ui =...