Skip to content

Instantly share code, notes, and snippets.

@greggman
Last active June 2, 2023 10:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save greggman/56ac64d04e6ebe9ca3c8e0d6e630ecd1 to your computer and use it in GitHub Desktop.
Save greggman/56ac64d04e6ebe9ca3c8e0d6e630ecd1 to your computer and use it in GitHub Desktop.
Native Float32Array vs Extended Float32Array
{"title":"Native Float32Array vs Extended Float32Array","initialization":"class Vec3 extends Float32Array {\n get z() { return this[0]; };\n get y() { return this[1]; };\n get z() { return this[2]; };\n get w() { return this[3]; };\n set z(v) { this[0] = v; };\n set y(v) { this[1] = v; };\n set z(v) { this[2] = v; };\n set w(v) { this[3] = v; };\n};\n\nclass Vec3Plus extends Float32Array {\n get z() { return this[0]; };\n get y() { return this[1]; };\n get z() { return this[2]; };\n get w() { return this[3]; };\n set z(v) { this[0] = v; };\n set y(v) { this[1] = v; };\n set z(v) { this[2] = v; };\n set w(v) { this[3] = v; };\n set(array, offset = 0) {\n this[0] = array[offset];\n this[1] = array[offset] + 1;\n this[2] = array[offset] + 2;\n return this\n }\n addInPlace(v) {\n this[0] += v[0];\n this[1] += v[1];\n this[2] += v[2];\n return this;\n }\n};\n\n\nconst t2 = [1, 2, 3];\nconst positions = new Float32Array(5000 * 3);\n\nconst vec3 = {\n set(src, offset, dst) {\n dst[0] = src[offset];\n dst[1] = src[offset + 1];\n dst[2] = src[offset + 2];\n return dst;\n },\n add(v1, v2, dst) {\n dst[0] = v1[0] + v2[0];\n dst[1] = v1[1] + v2[1];\n dst[2] = v1[2] + v2[2];\n return dst;\n },\n};\n\nfunction testRawTypedArray(positions) {\n const len = positions.length;\n for (let i = 0; i < len; i += 3) {\n const t = positions.slice(i, i + 3);\n vec3.add(t, t2, t);\n }\n}\n\nfunction testExtendedTypedArray(positions) {\n const len = positions.length;\n for (let i = 0; i < len; i += 3) {\n const t = new Vec3(positions.slice(i, i + 3));\n vec3.add(t, t2, t);\n }\n}\n\nfunction testExtendedTypedArrayWithAPI(positions) {\n const len = positions.length;\n for (let i = 0; i < len; i += 3) {\n const t = new Vec3Plus(positions.slice(i, i + 3));\n t.addInPlace(t2);\n }\n}\n\nfunction testExtendedTypedArrayWithAPI(positions) {\n const len = positions.length;\n for (let i = 0; i < len; i += 3) {\n const t = new Vec3Plus(positions.slice(i, i + 3));\n vec3.add(t, t2, t);\n }\n}\n\nfunction testRawTypedArrayViaTemp(positions) {\n const t = new Float32Array(3);\n const len = positions.length;\n for (let i = 0; i < len; i += 3) {\n vec3.set(positions, i, t);\n vec3.add(t, t2, t);\n positions.set(t, i);\n }\n}\n\nfunction testExtendedTypedArrayViaTemp(positions) {\n const t = new Vec3(3);\n const len = positions.length;\n for (let i = 0; i < len; i += 3) {\n vec3.set(positions, i, t);\n vec3.add(t, t2, t);\n positions.set(t, i);\n }\n}\n\nfunction testExtendedTypedArrayWithAPIViaTemp(positions) {\n const t = new Vec3Plus(3);\n const len = positions.length;\n for (let i = 0; i < len; i += 3) {\n t.set(positions, i);\n t.addInPlace(t2);\n positions.set(t, i);\n }\n}\n\n ","setup":"positions.fill(0);","tests":[{"name":"Native Float32Array","code":"testRawTypedArray(positions);\n","results":{"aborted":false,"count":254,"cycles":4,"hz":3042.176167725777,"stats":{"moe":0.0000029744974093832514,"rme":0.9048945129787791,"sem":0.0000015176007190730876,"deviation":0.000011852840524296286,"mean":0.0003287120616514344,"variance":1.4048982849440027e-10,"numSamples":61},"times":{"cycle":0.08349286365946433,"elapsed":6.327,"period":0.0003287120616514344,"timeStamp":1685701185613}},"platforms":{"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36":{"aborted":false,"count":254,"cycles":4,"hz":3042.176167725777,"stats":{"moe":0.0000029744974093832514,"rme":0.9048945129787791,"sem":0.0000015176007190730876,"deviation":0.000011852840524296286,"mean":0.0003287120616514344,"variance":1.4048982849440027e-10,"numSamples":61},"times":{"cycle":0.08349286365946433,"elapsed":6.327,"period":0.0003287120616514344,"timeStamp":1685701185613}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0":{"aborted":false,"count":135,"cycles":4,"hz":1733.4348699313618,"stats":{"moe":0.000003282250431750571,"rme":0.5689567350243707,"sem":0.000001674617567219679,"deviation":0.000013501198456753723,"mean":0.0005768892834373388,"variance":1.822823597686491e-10,"numSamples":65},"times":{"cycle":0.07788005326404074,"elapsed":5.973,"period":0.0005768892834373388,"timeStamp":1685701007600}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15":{"aborted":false,"count":976,"cycles":2,"hz":2885.776532835357,"stats":{"moe":0.000003099806986327412,"rme":0.8945350257462736,"sem":0.000001475395995396198,"deviation":0.000006431102045636629,"mean":0.00034652717860224325,"variance":4.135907352139164e-11,"numSamples":19},"times":{"cycle":0.3382105263157894,"elapsed":6.761,"period":0.00034652717860224325,"timeStamp":1685701108183}}}},{"name":"Extended Float32Array","code":"testExtendedTypedArray(positions);\n","results":{"aborted":false,"count":158,"cycles":6,"hz":1944.3527853341661,"stats":{"moe":0.0000066433829338005415,"rme":1.2917080111376549,"sem":0.0000033894810886737456,"deviation":0.000026903172102561596,"mean":0.0005143099583279251,"variance":7.237806691800486e-10,"numSamples":63},"times":{"cycle":0.08126097341581216,"elapsed":6.387,"period":0.0005143099583279251,"timeStamp":1685701191949}},"platforms":{"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36":{"aborted":false,"count":158,"cycles":6,"hz":1944.3527853341661,"stats":{"moe":0.0000066433829338005415,"rme":1.2917080111376549,"sem":0.0000033894810886737456,"deviation":0.000026903172102561596,"mean":0.0005143099583279251,"variance":7.237806691800486e-10,"numSamples":63},"times":{"cycle":0.08126097341581216,"elapsed":6.387,"period":0.0005143099583279251,"timeStamp":1685701191949}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0":{"aborted":false,"count":55,"cycles":3,"hz":694.0786046996145,"stats":{"moe":0.000009185966524890578,"rme":0.637578282841342,"sem":0.000004686717614740091,"deviation":0.00003749374091792073,"mean":0.0014407590051457976,"variance":1.405780608020163e-9,"numSamples":64},"times":{"cycle":0.07924174528301887,"elapsed":5.903,"period":0.0014407590051457976,"timeStamp":1685701013580}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15":{"aborted":false,"count":117,"cycles":5,"hz":1496.3456719758385,"stats":{"moe":0.00000329530451012005,"rme":0.4930914641560597,"sem":0.0000016812778112857398,"deviation":0.000013450222490285918,"mean":0.0006682947788926054,"variance":1.8090848503819312e-10,"numSamples":64},"times":{"cycle":0.07819048913043483,"elapsed":6.413,"period":0.0006682947788926054,"timeStamp":1685701114964}}}},{"name":"Extended Float32Array with API","code":"testExtendedTypedArrayWithAPI(positions);","results":{"aborted":false,"count":160,"cycles":5,"hz":1927.997748576624,"stats":{"moe":0.000003977952341888208,"rme":0.7669483159105572,"sem":0.0000020295675213715347,"deviation":0.0000158514290760227,"mean":0.0005186728048506625,"variance":2.5126780375217783e-10,"numSamples":61},"times":{"cycle":0.08298764877610601,"elapsed":6.282,"period":0.0005186728048506625,"timeStamp":1685701198350}},"platforms":{"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36":{"aborted":false,"count":160,"cycles":5,"hz":1927.997748576624,"stats":{"moe":0.000003977952341888208,"rme":0.7669483159105572,"sem":0.0000020295675213715347,"deviation":0.0000158514290760227,"mean":0.0005186728048506625,"variance":2.5126780375217783e-10,"numSamples":61},"times":{"cycle":0.08298764877610601,"elapsed":6.282,"period":0.0005186728048506625,"timeStamp":1685701198350}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0":{"aborted":false,"count":976,"cycles":2,"hz":669.1233181935041,"stats":{"moe":0.000027926194058470956,"rme":1.8686067632919807,"sem":0.000011808115880960234,"deviation":0.00003339839524985418,"mean":0.0014944928278688525,"variance":1.1154528052654823e-9,"numSamples":8},"times":{"cycle":1.458625,"elapsed":11.775,"period":0.0014944928278688525,"timeStamp":1685701019490}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15":{"aborted":false,"count":115,"cycles":5,"hz":1500.5931198102016,"stats":{"moe":0.0000027448837189808686,"rme":0.4118953623381731,"sem":0.0000014004508770310554,"deviation":0.000011377316708806407,"mean":0.0006664031620553359,"variance":1.2944333549248546e-10,"numSamples":66},"times":{"cycle":0.07663636363636363,"elapsed":6.306,"period":0.0006664031620553359,"timeStamp":1685701121398}}}},{"name":"Native Float32Array via temp","code":"testRawTypedArrayViaTemp(positions);\n","results":{"aborted":false,"count":976,"cycles":2,"hz":6601.637593449624,"stats":{"moe":9.919595683314263e-7,"rme":0.6548557577478804,"sem":5.061018205772583e-7,"deviation":0.000003119821149694543,"mean":0.0001514775668679897,"variance":9.73328400608138e-12,"numSamples":38},"times":{"cycle":0.14784210526315797,"elapsed":6.152,"period":0.0001514775668679897,"timeStamp":1685701204644}},"platforms":{"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36":{"aborted":false,"count":976,"cycles":2,"hz":6601.637593449624,"stats":{"moe":9.919595683314263e-7,"rme":0.6548557577478804,"sem":5.061018205772583e-7,"deviation":0.000003119821149694543,"mean":0.0001514775668679897,"variance":9.73328400608138e-12,"numSamples":38},"times":{"cycle":0.14784210526315797,"elapsed":6.152,"period":0.0001514775668679897,"timeStamp":1685701204644}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0":{"aborted":false,"count":976,"cycles":2,"hz":3661.990212071777,"stats":{"moe":0.00000203870806028676,"rme":0.7465728962041953,"sem":9.82983635625246e-7,"deviation":0.000004714223906632098,"mean":0.00027307555238774065,"variance":2.22239070418616e-11,"numSamples":23},"times":{"cycle":0.26652173913043486,"elapsed":6.35,"period":0.00027307555238774065,"timeStamp":1685701031272}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15":{"aborted":false,"count":419,"cycles":4,"hz":5467.834324013834,"stats":{"moe":7.891434626265308e-7,"rme":0.43149057115204736,"sem":4.0262421562578104e-7,"deviation":0.000003295621239395458,"mean":0.00018288776519949837,"variance":1.0861119353554455e-11,"numSamples":67},"times":{"cycle":0.07662997361858982,"elapsed":6.286,"period":0.00018288776519949837,"timeStamp":1685701127722}}}},{"name":"Extended Float32Array via temp","code":"testExtendedTypedArrayViaTemp(positions);\n","results":{"aborted":false,"count":976,"cycles":2,"hz":6414.209591474244,"stats":{"moe":0.0000016897257061614012,"rme":1.083825483142105,"sem":8.621049521231639e-7,"deviation":0.000005243979699959322,"mean":0.0001559038546743465,"variance":2.7499323093585456e-11,"numSamples":37},"times":{"cycle":0.1521621621621622,"elapsed":6.142,"period":0.0001559038546743465,"timeStamp":1685701210805}},"platforms":{"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36":{"aborted":false,"count":976,"cycles":2,"hz":6414.209591474244,"stats":{"moe":0.0000016897257061614012,"rme":1.083825483142105,"sem":8.621049521231639e-7,"deviation":0.000005243979699959322,"mean":0.0001559038546743465,"variance":2.7499323093585456e-11,"numSamples":37},"times":{"cycle":0.1521621621621622,"elapsed":6.142,"period":0.0001559038546743465,"timeStamp":1685701210805}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0":{"aborted":false,"count":292,"cycles":4,"hz":3668.766362528673,"stats":{"moe":0.0000023217031165155805,"rme":0.851778629765035,"sem":0.0000011845424063855003,"deviation":0.000009402013874118128,"mean":0.0002725711863839584,"variance":8.839786488910976e-11,"numSamples":63},"times":{"cycle":0.07959078642411585,"elapsed":5.964,"period":0.0002725711863839584,"timeStamp":1685701037628}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15":{"aborted":false,"count":976,"cycles":2,"hz":5627.817578193254,"stats":{"moe":0.0000010341899348838906,"rme":0.5820232294730097,"sem":5.276479259611687e-7,"deviation":0.000003031106565999793,"mean":0.00017768877297565826,"variance":9.187607014447056e-12,"numSamples":33},"times":{"cycle":0.17342424242424245,"elapsed":6.956,"period":0.00017768877297565826,"timeStamp":1685701134043}}}},{"name":"Extended Float32Array with API via temp","code":"testExtendedTypedArrayWithAPIViaTemp(positions);","results":{"aborted":false,"count":976,"cycles":2,"hz":4171.625842511918,"stats":{"moe":0.000002005698023685528,"rme":0.8367021707881629,"sem":9.73639817323072e-7,"deviation":0.000004964608427741258,"mean":0.00023971469104665832,"variance":2.4647336840799525e-11,"numSamples":26},"times":{"cycle":0.23396153846153853,"elapsed":6.461,"period":0.00023971469104665832,"timeStamp":1685701216956}},"platforms":{"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36":{"aborted":false,"count":976,"cycles":2,"hz":4171.625842511918,"stats":{"moe":0.000002005698023685528,"rme":0.8367021707881629,"sem":9.73639817323072e-7,"deviation":0.000004964608427741258,"mean":0.00023971469104665832,"variance":2.4647336840799525e-11,"numSamples":26},"times":{"cycle":0.23396153846153853,"elapsed":6.461,"period":0.00023971469104665832,"timeStamp":1685701216956}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0":{"aborted":false,"count":976,"cycles":2,"hz":3689.6778435239967,"stats":{"moe":0.000003670579474362034,"rme":1.3543255759447557,"sem":0.0000017698068825274997,"deviation":0.000008487695637401193,"mean":0.00027102637205987174,"variance":7.204097723315925e-11,"numSamples":23},"times":{"cycle":0.2645217391304348,"elapsed":6.312,"period":0.00027102637205987174,"timeStamp":1685701043599}},"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15":{"aborted":false,"count":976,"cycles":2,"hz":5544.470086987396,"stats":{"moe":0.000001702494293924851,"rme":0.9439428685933063,"sem":8.686195377167607e-7,"deviation":0.000004913654123125165,"mean":0.00018035988729508197,"variance":2.414399684170493e-11,"numSamples":32},"times":{"cycle":0.17603125,"elapsed":6.753,"period":0.00018035988729508197,"timeStamp":1685701141034}}}}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment