{"id":52670,"date":"2025-08-11T17:19:02","date_gmt":"2025-08-11T09:19:02","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/52670.html"},"modified":"2025-08-11T17:19:02","modified_gmt":"2025-08-11T09:19:02","slug":"c-c%e4%b8%8ejavascript%e7%9a%84webassembly%e5%8d%8f%e4%bd%9c%e5%bc%80%e5%8f%91%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/52670.html","title":{"rendered":"C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357"},"content":{"rendered":"<h2>\u8de8\u8d8a\u8bed\u8a00\u8fb9\u754c&#xff1a;C\/C&#043;&#043;\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1<\/h2>\n<p>\u5728\u73b0\u4ee3Web\u5f00\u53d1\u7684\u6d6a\u6f6e\u4e2d&#xff0c;\u6211\u4eec\u6b63\u5728\u89c1\u8bc1\u4e00\u573a\u6027\u80fd\u9769\u547d\u7684\u5230\u6765\u3002WebAssembly&#xff08;WASM&#xff09;\u4f5c\u4e3a\u4e00\u9879\u7a81\u7834\u6027\u6280\u672f&#xff0c;\u6b63\u5728\u6253\u7834\u4f20\u7edfWeb\u5e94\u7528\u7684\u6027\u80fd\u74f6\u9888&#xff0c;\u8ba9C\/C&#043;&#043;\u8fd9\u6837\u7684\u7cfb\u7edf\u7ea7\u7f16\u7a0b\u8bed\u8a00\u80fd\u591f\u4e0eJavaScript\u65e0\u7f1d\u534f\u4f5c&#xff0c;\u4e3aWeb\u5e73\u53f0\u5e26\u6765\u524d\u6240\u672a\u6709\u7684\u8ba1\u7b97\u80fd\u529b\u3002<\/p>\n<p>\u4f5c\u4e3a\u4e00\u540d\u6280\u672f\u5de5\u7a0b\u5e08&#xff0c;\u6211\u4eec\u7ecf\u5e38\u9762\u4e34\u8fd9\u6837\u7684\u6311\u6218&#xff1a;\u5982\u4f55\u5728Web\u73af\u5883\u4e2d\u5b9e\u73b0\u9ad8\u6027\u80fd\u7684\u8ba1\u7b97\u5bc6\u96c6\u578b\u5e94\u7528&#xff1f;\u5982\u4f55\u590d\u7528\u73b0\u6709\u7684C\/C&#043;&#043;\u4ee3\u7801\u5e93&#xff1f;\u5982\u4f55\u5728\u4fdd\u6301Web\u5e94\u7528\u7075\u6d3b\u6027\u7684\u540c\u65f6\u83b7\u5f97\u63a5\u8fd1\u539f\u751f\u7684\u6027\u80fd&#xff1f;WebAssembly\u4e3a\u8fd9\u4e9b\u95ee\u9898\u63d0\u4f9b\u4e86\u4f18\u96c5\u7684\u89e3\u51b3\u65b9\u6848\u3002<\/p>\n<h3>\u4e00\u3001WebAssembly&#xff1a;\u8fde\u63a5C\/C&#043;&#043;\u4e0eJavaScript\u7684\u6865\u6881<\/h3>\n<h4>1.1 WebAssembly\u6280\u672f\u6982\u8ff0<\/h4>\n<p>WebAssembly\u8bde\u751f\u4e8e2015\u5e74&#xff0c;\u662f\u4e00\u4e2a\u7531Mozilla\u3001Google\u3001Microsoft\u548cApple\u8054\u5408\u63a8\u52a8\u7684Web\u6807\u51c6\u3002\u5b83\u4e0d\u662f\u4e00\u79cd\u7f16\u7a0b\u8bed\u8a00&#xff0c;\u800c\u662f\u4e00\u79cd\u4f4e\u7ea7\u7684\u7c7b\u6c47\u7f16\u8bed\u8a00&#xff0c;\u5177\u6709\u7d27\u51d1\u7684\u4e8c\u8fdb\u5236\u683c\u5f0f&#xff0c;\u53ef\u4ee5\u63a5\u8fd1\u539f\u751f\u7684\u6027\u80fd\u8fd0\u884c\u3002<\/p>\n<p>WASM\u7684\u8bbe\u8ba1\u76ee\u6807\u660e\u786e&#xff1a;<\/p>\n<ul>\n<li>\u6027\u80fd&#xff1a;\u63d0\u4f9b\u63a5\u8fd1\u539f\u751f\u4ee3\u7801\u7684\u6267\u884c\u901f\u5ea6<\/li>\n<li>\u5b89\u5168&#xff1a;\u5728\u6c99\u76d2\u73af\u5883\u4e2d\u5b89\u5168\u6267\u884c<\/li>\n<li>\u5f00\u653e&#xff1a;\u8bbe\u8ba1\u4e3a\u5f00\u653e\u6807\u51c6&#xff0c;\u652f\u6301\u591a\u79cd\u7f16\u7a0b\u8bed\u8a00<\/li>\n<li>\u8c03\u8bd5\u53cb\u597d&#xff1a;\u652f\u6301\u6e90\u7801\u7ea7\u8c03\u8bd5<\/li>\n<\/ul>\n<p><span class=\"token comment\">\/\/ WebAssembly\u6a21\u5757\u7684\u57fa\u672c\u52a0\u8f7d\u65b9\u5f0f<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">loadWasm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> wasmModule <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> WebAssembly<span class=\"token punctuation\">.<\/span><span class=\"token function\">instantiateStreaming<\/span><span class=\"token punctuation\">(<\/span><br \/>\n        <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;module.wasm&#039;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> wasmModule<span class=\"token punctuation\">.<\/span>instance<span class=\"token punctuation\">.<\/span>exports<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>WebAssembly\u5728\u73b0\u4ee3Web\u5f00\u53d1\u4e2d\u626e\u6f14\u7740\u8d8a\u6765\u8d8a\u91cd\u8981\u7684\u89d2\u8272\u3002\u4eceAdobe Photoshop\u5728\u7ebf\u7248\u5230Unity\u6e38\u620f\u5f15\u64ce&#xff0c;\u4eceFFmpeg\u89c6\u9891\u5904\u7406\u5230TensorFlow.js\u7684\u6027\u80fd\u52a0\u901f&#xff0c;WASM\u6b63\u5728\u5404\u4e2a\u9886\u57df\u53d1\u6325\u7740\u5173\u952e\u4f5c\u7528\u3002<\/p>\n<h4>1.2 \u8bed\u8a00\u534f\u4f5c\u7684\u6280\u672f\u57fa\u7840<\/h4>\n<p>C\/C&#043;&#043;\u7f16\u8bd1\u5230WebAssembly\u7684\u8fc7\u7a0b\u672c\u8d28\u4e0a\u662f\u4e00\u4e2a\u4ee3\u7801\u8f6c\u6362\u8fc7\u7a0b\u3002\u7f16\u8bd1\u5668&#xff08;\u4e3b\u8981\u662fEmscripten&#xff09;\u5c06C\/C&#043;&#043;\u6e90\u4ee3\u7801\u7f16\u8bd1\u6210WebAssembly\u5b57\u8282\u7801&#xff0c;\u540c\u65f6\u751f\u6210JavaScript\u80f6\u6c34\u4ee3\u7801\u6765\u5904\u7406\u4e24\u79cd\u8bed\u8a00\u4e4b\u95f4\u7684\u4ea4\u4e92\u3002<\/p>\n<p><span class=\"token comment\">\/\/ C&#043;&#043;\u4ee3\u7801\u793a\u4f8b<\/span><br \/>\n<span class=\"token keyword\">extern<\/span> <span class=\"token string\">&#034;C&#034;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">int<\/span> <span class=\"token function\">fibonacci<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> n<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>n <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> n<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">fibonacci<\/span><span class=\"token punctuation\">(<\/span>n<span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token function\">fibonacci<\/span><span class=\"token punctuation\">(<\/span>n<span class=\"token operator\">&#8211;<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ JavaScript\u8c03\u7528\u793a\u4f8b<\/span><br \/>\n<span class=\"token keyword\">const<\/span> wasmModule <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">loadWasm<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> wasmModule<span class=\"token punctuation\">.<\/span><span class=\"token function\">fibonacci<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\nconsole<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">Fibonacci(10) &#061; <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>result<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u8f93\u51fa&#xff1a;55<\/span><\/p>\n<p>\u5185\u5b58\u6a21\u578b\u662f\u7406\u89e3WASM\u534f\u4f5c\u7684\u5173\u952e\u3002WebAssembly\u4f7f\u7528\u7ebf\u6027\u5185\u5b58\u6a21\u578b&#xff0c;\u8fd9\u662f\u4e00\u4e2a\u8fde\u7eed\u7684\u5b57\u8282\u6570\u7ec4&#xff0c;\u53ef\u4ee5\u88abJavaScript\u548cWASM\u6a21\u5757\u5171\u540c\u8bbf\u95ee\u3002\u8fd9\u79cd\u5171\u4eab\u5185\u5b58\u673a\u5236\u4f7f\u5f97\u6570\u636e\u4ea4\u6362\u53d8\u5f97\u9ad8\u6548\u4e14\u76f4\u63a5\u3002<\/p>\n<h3>\u4e8c\u3001\u5f00\u53d1\u73af\u5883\u642d\u5efa\u4e0e\u5de5\u5177\u94fe\u914d\u7f6e<\/h3>\n<h4>2.1 Emscripten\u5f00\u53d1\u5957\u4ef6\u5b89\u88c5<\/h4>\n<p>Emscripten\u662f\u5c06C\/C&#043;&#043;\u7f16\u8bd1\u4e3aWebAssembly\u7684\u4e3b\u8981\u5de5\u5177\u94fe\u3002\u5b89\u88c5\u8fc7\u7a0b\u76f8\u5bf9\u7b80\u5355&#xff1a;<\/p>\n<p><span class=\"token comment\"># \u4e0b\u8f7dEmscripten SDK<\/span><br \/>\n<span class=\"token function\">git<\/span> clone https:\/\/github.com\/emscripten-core\/emsdk.git<br \/>\n<span class=\"token builtin class-name\">cd<\/span> emsdk<\/p>\n<p><span class=\"token comment\"># \u5b89\u88c5\u6700\u65b0\u7248\u672c<\/span><br \/>\n.\/emsdk <span class=\"token function\">install<\/span> latest<br \/>\n.\/emsdk activate latest<\/p>\n<p><span class=\"token comment\"># \u8bbe\u7f6e\u73af\u5883\u53d8\u91cf<\/span><br \/>\n<span class=\"token builtin class-name\">source<\/span> .\/emsdk_env.sh<\/p>\n<p>\u9a8c\u8bc1\u5b89\u88c5&#xff1a;<\/p>\n<p>emcc &#8211;version  <span class=\"token comment\"># \u67e5\u770b\u7f16\u8bd1\u5668\u7248\u672c<\/span><br \/>\nem&#043;&#043; &#8211;version  <span class=\"token comment\"># \u67e5\u770bC&#043;&#043;\u7f16\u8bd1\u5668\u7248\u672c<\/span><\/p>\n<p>\u5173\u952e\u7f16\u8bd1\u9009\u9879\u89e3\u6790&#xff1a;<\/p>\n<ul>\n<li>-O3: \u6700\u9ad8\u7ea7\u522b\u4f18\u5316<\/li>\n<li>-s WASM&#061;1: \u751f\u6210WebAssembly\u8f93\u51fa<\/li>\n<li>-s EXPORTED_FUNCTIONS: \u6307\u5b9a\u5bfc\u51fa\u7684\u51fd\u6570<\/li>\n<li>&#8211;bind: \u542f\u7528Embind\u8fdb\u884cC&#043;&#043;\u7ed1\u5b9a<\/li>\n<\/ul>\n<h4>2.2 \u73b0\u4ee3\u5f00\u53d1\u5de5\u5177\u96c6\u6210<\/h4>\n<p>\u73b0\u4ee3\u5f00\u53d1\u73af\u5883\u7684\u914d\u7f6e\u5bf9\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\u81f3\u5173\u91cd\u8981&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ VS Code\u914d\u7f6e\u793a\u4f8b (.vscode\/settings.json)<\/span><br \/>\n<span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token string\">&#034;C_Cpp.default.includePath&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n        <span class=\"token string\">&#034;${workspaceFolder}\/**&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token string\">&#034;\/path\/to\/emscripten\/system\/include&#034;<\/span><br \/>\n    <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token string\">&#034;C_Cpp.default.defines&#034;<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n        <span class=\"token string\">&#034;__EMSCRIPTEN__&#034;<\/span><br \/>\n    <span class=\"token punctuation\">]<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>Webpack\u96c6\u6210\u914d\u7f6e&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ webpack.config.js<\/span><br \/>\nmodule<span class=\"token punctuation\">.<\/span>exports <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    experiments<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        asyncWebAssembly<span class=\"token operator\">:<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    module<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        rules<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n            <span class=\"token punctuation\">{<\/span><br \/>\n                test<span class=\"token operator\">:<\/span> <span class=\"token regex\"><span class=\"token regex-delimiter\">\/<\/span><span class=\"token regex-source language-regex\">\\\\.wasm$<\/span><span class=\"token regex-delimiter\">\/<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n                type<span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;webassembly\/async&#034;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h3>\u4e09\u3001C\/C&#043;&#043;\u5230WebAssembly\u7684\u7f16\u8bd1\u5b9e\u8df5<\/h3>\n<h4>3.1 \u57fa\u7840\u7f16\u8bd1\u6d41\u7a0b<\/h4>\n<p>\u8ba9\u6211\u4eec\u4ece\u4e00\u4e2a\u7b80\u5355\u7684\u6570\u5b66\u8ba1\u7b97\u5e93\u5f00\u59cb&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ math_utils.cpp<\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/bind.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;cmath&gt;<\/span><\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">MathUtils<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">double<\/span> <span class=\"token function\">power<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">double<\/span> base<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">double<\/span> exponent<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">pow<\/span><span class=\"token punctuation\">(<\/span>base<span class=\"token punctuation\">,<\/span> exponent<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">double<\/span> <span class=\"token function\">factorial<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> n<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>n <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> n <span class=\"token operator\">*<\/span> <span class=\"token function\">factorial<\/span><span class=\"token punctuation\">(<\/span>n <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">double<\/span> <span class=\"token function\">calculate_pi<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> iterations<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">double<\/span> pi <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> iterations<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            pi <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token punctuation\">(<\/span>i <span class=\"token operator\">%<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">0<\/span> <span class=\"token operator\">?<\/span> <span class=\"token number\">1<\/span> <span class=\"token operator\">:<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">2.0<\/span> <span class=\"token operator\">*<\/span> i <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> pi <span class=\"token operator\">*<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>math_utils<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>MathUtils<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;MathUtils&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;power&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>MathUtils<span class=\"token operator\">::<\/span>power<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;factorial&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>MathUtils<span class=\"token operator\">::<\/span>factorial<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;calculate_pi&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>MathUtils<span class=\"token operator\">::<\/span>calculate_pi<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u7f16\u8bd1\u547d\u4ee4&#xff1a;<\/p>\n<p>em&#043;&#043; -lembind -O3 -s <span class=\"token assign-left variable\">WASM<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1<\/span> -s <span class=\"token assign-left variable\">MODULARIZE<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1<\/span> <span class=\"token punctuation\">\\\\<\/span><br \/>\n    -s <span class=\"token assign-left variable\">EXPORT_NAME<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;MathModule&#034;<\/span> <span class=\"token punctuation\">\\\\<\/span><br \/>\n    math_utils.cpp -o math_utils.js<\/p>\n<p>\u751f\u6210\u6587\u4ef6\u7ed3\u6784&#xff1a;<\/p>\n<ul>\n<li>math_utils.wasm: \u4e8c\u8fdb\u5236WebAssembly\u6a21\u5757<\/li>\n<li>math_utils.js: JavaScript\u80f6\u6c34\u4ee3\u7801<\/li>\n<li>\u53ef\u9009\u7684.d.ts: TypeScript\u7c7b\u578b\u5b9a\u4e49<\/li>\n<\/ul>\n<h4>3.2 \u590d\u6742\u9879\u76ee\u7684\u6a21\u5757\u5316\u7f16\u8bd1<\/h4>\n<p>\u5bf9\u4e8e\u5927\u578b\u9879\u76ee&#xff0c;\u6211\u4eec\u9700\u8981\u66f4sophisticated\u7684\u6784\u5efa\u7b56\u7565&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u9879\u76ee\u7ed3\u6784\u793a\u4f8b<\/span><br \/>\n<span class=\"token comment\">\/\/ src\/<\/span><br \/>\n<span class=\"token comment\">\/\/   \u251c\u2500\u2500 core\/<\/span><br \/>\n<span class=\"token comment\">\/\/   \u2502   \u251c\u2500\u2500 algorithm.cpp<\/span><br \/>\n<span class=\"token comment\">\/\/   \u2502   \u2514\u2500\u2500 algorithm.h<\/span><br \/>\n<span class=\"token comment\">\/\/   \u251c\u2500\u2500 utils\/<\/span><br \/>\n<span class=\"token comment\">\/\/   \u2502   \u251c\u2500\u2500 memory_pool.cpp<\/span><br \/>\n<span class=\"token comment\">\/\/   \u2502   \u2514\u2500\u2500 memory_pool.h<\/span><br \/>\n<span class=\"token comment\">\/\/   \u2514\u2500\u2500 bindings\/<\/span><br \/>\n<span class=\"token comment\">\/\/       \u2514\u2500\u2500 exports.cpp<\/span><\/p>\n<p>CMakeLists.txt\u914d\u7f6e&#xff1a;<\/p>\n<p>cmake_minimum_required(VERSION 3.10)<br \/>\nproject(WebAssemblyProject)<\/p>\n<p>set(CMAKE_CXX_STANDARD 17)<\/p>\n<p># \u8bbe\u7f6eEmscripten\u7279\u5b9a\u7684\u7f16\u8bd1\u9009\u9879<br \/>\nif(EMSCRIPTEN)<br \/>\n    set(CMAKE_CXX_FLAGS &#034;${CMAKE_CXX_FLAGS} -s USE_PTHREADS&#061;1&#034;)<br \/>\n    set(CMAKE_EXE_LINKER_FLAGS &#034;${CMAKE_EXE_LINKER_FLAGS} \\\\<br \/>\n        -lembind -s WASM&#061;1 -s MODULARIZE&#061;1 \\\\<br \/>\n        -s EXPORT_NAME&#061;ProjectModule \\\\<br \/>\n        -s ALLOW_MEMORY_GROWTH&#061;1&#034;)<br \/>\nendif()<\/p>\n<p># \u6dfb\u52a0\u6e90\u6587\u4ef6<br \/>\nfile(GLOB_RECURSE SOURCES &#034;src\/*.cpp&#034;)<br \/>\nadd_executable(project ${SOURCES})<\/p>\n<p>\u7f16\u8bd1\u811a\u672c&#xff1a;<\/p>\n<p><span class=\"token shebang important\">#!\/bin\/bash<\/span><br \/>\n<span class=\"token function\">mkdir<\/span> -p build<br \/>\n<span class=\"token builtin class-name\">cd<\/span> build<br \/>\nemcmake cmake <span class=\"token punctuation\">..<\/span><br \/>\nemmake <span class=\"token function\">make<\/span> -j4<\/p>\n<h3>\u56db\u3001JavaScript\u4e0eWebAssembly\u6570\u636e\u4ea4\u4e92<\/h3>\n<h4>4.1 \u57fa\u7840\u6570\u636e\u7c7b\u578b\u4ea4\u6362<\/h4>\n<p>WebAssembly\u539f\u751f\u652f\u6301\u56db\u79cd\u6570\u636e\u7c7b\u578b&#xff1a;i32\u3001i64\u3001f32\u3001f64\u3002\u66f4\u590d\u6742\u7684\u6570\u636e\u7c7b\u578b\u9700\u8981\u901a\u8fc7\u5185\u5b58\u64cd\u4f5c\u6765\u5904\u7406&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ C&#043;&#043;\u7aef&#xff1a;\u5b57\u7b26\u4e32\u5904\u7406\u793a\u4f8b<\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/bind.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;string&gt;<\/span><\/span><\/p>\n<p>std<span class=\"token operator\">::<\/span>string <span class=\"token function\">processText<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>string<span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>string result <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#034;Processed: &#034;<\/span> <span class=\"token operator\">&#043;<\/span> input<span class=\"token punctuation\">;<\/span><br \/>\n    std<span class=\"token operator\">::<\/span><span class=\"token function\">transform<\/span><span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">.<\/span><span class=\"token function\">begin<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> result<span class=\"token punctuation\">.<\/span><span class=\"token function\">end<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                   result<span class=\"token punctuation\">.<\/span><span class=\"token function\">begin<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">::<\/span>toupper<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>text_processor<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;processText&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>processText<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ JavaScript\u7aef\u8c03\u7528<\/span><br \/>\n<span class=\"token keyword\">const<\/span> module <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">MathModule<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> module<span class=\"token punctuation\">.<\/span><span class=\"token function\">processText<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;hello world&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\nconsole<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ &#034;Processed: HELLO WORLD&#034;<\/span><\/p>\n<p>\u6570\u7ec4\u5904\u7406\u7684\u9ad8\u6548\u65b9\u5f0f&#xff1a;<\/p>\n<p><span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/val.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;vector&gt;<\/span><\/span><\/p>\n<p>std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">processArray<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">result<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token operator\">&#043;&#043;<\/span>i<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        result<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> input<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u5e73\u65b9<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u66f4\u9ad8\u6548\u7684\u65b9\u5f0f&#xff1a;\u76f4\u63a5\u64cd\u4f5c\u5185\u5b58<\/span><br \/>\n<span class=\"token keyword\">void<\/span> <span class=\"token function\">processArrayInPlace<\/span><span class=\"token punctuation\">(<\/span>uintptr_t ptr<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> length<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> data <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">reinterpret_cast<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>ptr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> length<span class=\"token punctuation\">;<\/span> <span class=\"token operator\">&#043;&#043;<\/span>i<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        data<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> data<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">*<\/span> data<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>4.2 \u590d\u6742\u6570\u636e\u7ed3\u6784\u7684\u8de8\u8bed\u8a00\u64cd\u4f5c<\/h4>\n<p>\u5904\u7406\u590d\u6742\u6570\u636e\u7ed3\u6784\u65f6&#xff0c;\u6211\u4eec\u9700\u8981\u66f4\u4ed4\u7ec6\u5730\u7ba1\u7406\u5185\u5b58&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ C&#043;&#043;\u7ed3\u6784\u4f53\u5b9a\u4e49<\/span><br \/>\n<span class=\"token keyword\">struct<\/span> <span class=\"token class-name\">Point3D<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> z<span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token keyword\">float<\/span> <span class=\"token function\">magnitude<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">sqrt<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token operator\">*<\/span>x <span class=\"token operator\">&#043;<\/span> y<span class=\"token operator\">*<\/span>y <span class=\"token operator\">&#043;<\/span> z<span class=\"token operator\">*<\/span>z<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    Point3D <span class=\"token function\">normalize<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">float<\/span> mag <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">magnitude<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>mag <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">\/<\/span>mag<span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">\/<\/span>mag<span class=\"token punctuation\">,<\/span> z<span class=\"token operator\">\/<\/span>mag<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Mesh<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Point3D<span class=\"token operator\">&gt;<\/span> vertices<span class=\"token punctuation\">;<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">int<\/span><span class=\"token operator\">&gt;<\/span> indices<span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">void<\/span> <span class=\"token function\">addVertex<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Point3D<span class=\"token operator\">&amp;<\/span> vertex<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        vertices<span class=\"token punctuation\">.<\/span><span class=\"token function\">push_back<\/span><span class=\"token punctuation\">(<\/span>vertex<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    Point3D <span class=\"token function\">getVertex<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>index <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token number\">0<\/span> <span class=\"token operator\">&amp;&amp;<\/span> index <span class=\"token operator\">&lt;<\/span> vertices<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> vertices<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">int<\/span> <span class=\"token function\">getVertexCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> vertices<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u83b7\u53d6\u9876\u70b9\u6570\u636e\u7684\u6307\u9488&#xff0c;\u4f9bJavaScript\u76f4\u63a5\u8bbf\u95ee<\/span><br \/>\n    uintptr_t <span class=\"token function\">getVertexDataPtr<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">reinterpret_cast<\/span><span class=\"token operator\">&lt;<\/span>uintptr_t<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>vertices<span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>geometry<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>value_object<span class=\"token operator\">&lt;<\/span>Point3D<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Point3D&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">field<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;x&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Point3D<span class=\"token operator\">::<\/span>x<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">field<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;y&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Point3D<span class=\"token operator\">::<\/span>y<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">field<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;z&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Point3D<span class=\"token operator\">::<\/span>z<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;magnitude&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Point3D<span class=\"token operator\">::<\/span>magnitude<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;normalize&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Point3D<span class=\"token operator\">::<\/span>normalize<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>Mesh<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Mesh&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span>constructor<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;addVertex&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Mesh<span class=\"token operator\">::<\/span>addVertex<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getVertex&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Mesh<span class=\"token operator\">::<\/span>getVertex<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getVertexCount&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Mesh<span class=\"token operator\">::<\/span>getVertexCount<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getVertexDataPtr&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Mesh<span class=\"token operator\">::<\/span>getVertexDataPtr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>JavaScript\u7aef\u7684\u9ad8\u6548\u6570\u636e\u8bbf\u95ee&#xff1a;<\/p>\n<p><span class=\"token keyword\">const<\/span> module <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">GeometryModule<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u521b\u5efa\u7f51\u683c\u5e76\u6dfb\u52a0\u9876\u70b9<\/span><br \/>\n<span class=\"token keyword\">const<\/span> mesh <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">module<span class=\"token punctuation\">.<\/span>Mesh<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\nmesh<span class=\"token punctuation\">.<\/span><span class=\"token function\">addVertex<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> <span class=\"token number\">1.0<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> <span class=\"token number\">2.0<\/span><span class=\"token punctuation\">,<\/span> z<span class=\"token operator\">:<\/span> <span class=\"token number\">3.0<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\nmesh<span class=\"token punctuation\">.<\/span><span class=\"token function\">addVertex<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> <span class=\"token number\">4.0<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> <span class=\"token number\">5.0<\/span><span class=\"token punctuation\">,<\/span> z<span class=\"token operator\">:<\/span> <span class=\"token number\">6.0<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u9ad8\u6548\u8bbf\u95ee\u9876\u70b9\u6570\u636e<\/span><br \/>\n<span class=\"token keyword\">const<\/span> vertexCount <span class=\"token operator\">&#061;<\/span> mesh<span class=\"token punctuation\">.<\/span><span class=\"token function\">getVertexCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> dataPtr <span class=\"token operator\">&#061;<\/span> mesh<span class=\"token punctuation\">.<\/span><span class=\"token function\">getVertexDataPtr<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u521b\u5efaFloat32Array\u89c6\u56fe\u76f4\u63a5\u8bbf\u95eeWASM\u5185\u5b58<\/span><br \/>\n<span class=\"token keyword\">const<\/span> vertexData <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Float32Array<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    module<span class=\"token punctuation\">.<\/span><span class=\"token constant\">HEAPF32<\/span><span class=\"token punctuation\">.<\/span>buffer<span class=\"token punctuation\">,<\/span><br \/>\n    dataPtr<span class=\"token punctuation\">,<\/span><br \/>\n    vertexCount <span class=\"token operator\">*<\/span> <span class=\"token number\">3<\/span>  <span class=\"token comment\">\/\/ \u6bcf\u4e2a\u9876\u70b93\u4e2afloat<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Vertex data:&#039;<\/span><span class=\"token punctuation\">,<\/span> vertexData<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h4>4.3 \u51fd\u6570\u8c03\u7528\u548c\u56de\u8c03\u673a\u5236<\/h4>\n<p>\u56de\u8c03\u51fd\u6570\u7684\u5b9e\u73b0\u662f\u8de8\u8bed\u8a00\u534f\u4f5c\u7684\u9ad8\u7ea7\u7279\u6027&#xff1a;<\/p>\n<p><span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/val.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;functional&gt;<\/span><\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">AsyncProcessor<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>val callback<span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">void<\/span> <span class=\"token function\">setCallback<\/span><span class=\"token punctuation\">(<\/span>emscripten<span class=\"token operator\">::<\/span>val cb<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        callback <span class=\"token operator\">&#061;<\/span> cb<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">processAsync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> data<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u6a21\u62df\u5f02\u6b65\u5904\u7406<\/span><br \/>\n        std<span class=\"token operator\">::<\/span><span class=\"token function\">thread<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">,<\/span> data<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            std<span class=\"token operator\">::<\/span>this_thread<span class=\"token operator\">::<\/span><span class=\"token function\">sleep_for<\/span><span class=\"token punctuation\">(<\/span>std<span class=\"token operator\">::<\/span>chrono<span class=\"token operator\">::<\/span><span class=\"token function\">milliseconds<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">100<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u8c03\u7528JavaScript\u56de\u8c03<\/span><br \/>\n            <span class=\"token function\">callback<\/span><span class=\"token punctuation\">(<\/span>data <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">detach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ Promise-based\u63a5\u53e3<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>val <span class=\"token function\">processWithPromise<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> data<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> emscripten<span class=\"token operator\">::<\/span>val<span class=\"token operator\">::<\/span><span class=\"token function\">global<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Promise&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n            <span class=\"token punctuation\">.<\/span><span class=\"token function\">new_<\/span><span class=\"token punctuation\">(<\/span>emscripten<span class=\"token operator\">::<\/span>val<span class=\"token operator\">::<\/span><span class=\"token function\">module_property<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;createPromise&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>async_processor<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>AsyncProcessor<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;AsyncProcessor&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span>constructor<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;setCallback&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>AsyncProcessor<span class=\"token operator\">::<\/span>setCallback<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;processAsync&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>AsyncProcessor<span class=\"token operator\">::<\/span>processAsync<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;processWithPromise&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>AsyncProcessor<span class=\"token operator\">::<\/span>processWithPromise<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ JavaScript\u7aef\u4f7f\u7528\u56de\u8c03<\/span><br \/>\n<span class=\"token keyword\">const<\/span> processor <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">module<span class=\"token punctuation\">.<\/span>AsyncProcessor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>processor<span class=\"token punctuation\">.<\/span><span class=\"token function\">setCallback<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">result<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Async result:&#039;<\/span><span class=\"token punctuation\">,<\/span> result<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>processor<span class=\"token punctuation\">.<\/span><span class=\"token function\">processAsync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">42<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u5c06\u8f93\u51fa: &#034;Async result: 84&#034;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u4f7f\u7528Promise<\/span><br \/>\n<span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> processor<span class=\"token punctuation\">.<\/span><span class=\"token function\">processWithPromise<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">42<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\nconsole<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Promise result:&#039;<\/span><span class=\"token punctuation\">,<\/span> result<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h3>\u4e94\u3001\u6027\u80fd\u4f18\u5316\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h3>\n<h4>5.1 \u7f16\u8bd1\u65f6\u4f18\u5316\u6280\u5de7<\/h4>\n<p>\u7f16\u8bd1\u5668\u4f18\u5316\u662f\u63d0\u5347WebAssembly\u6027\u80fd\u7684\u7b2c\u4e00\u6b65&#xff1a;<\/p>\n<p><span class=\"token comment\"># \u751f\u4ea7\u73af\u5883\u7f16\u8bd1\u9009\u9879<\/span><br \/>\nem&#043;&#043; -O3 -s <span class=\"token assign-left variable\">WASM<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1<\/span> -s <span class=\"token assign-left variable\">MODULARIZE<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1<\/span> <span class=\"token punctuation\">\\\\<\/span><br \/>\n    -s <span class=\"token assign-left variable\">EXPORT_NAME<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;OptimizedModule&#034;<\/span> <span class=\"token punctuation\">\\\\<\/span><br \/>\n    -s <span class=\"token assign-left variable\">ALLOW_MEMORY_GROWTH<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1<\/span> <span class=\"token punctuation\">\\\\<\/span><br \/>\n    -s <span class=\"token assign-left variable\">INITIAL_MEMORY<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">16777216<\/span> <span class=\"token punctuation\">\\\\<\/span>    <span class=\"token comment\"># 16MB\u521d\u59cb\u5185\u5b58<\/span><br \/>\n    -s <span class=\"token assign-left variable\">MAXIMUM_MEMORY<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">268435456<\/span> <span class=\"token punctuation\">\\\\<\/span>   <span class=\"token comment\"># 256MB\u6700\u5927\u5185\u5b58<\/span><br \/>\n    -s <span class=\"token assign-left variable\">STACK_SIZE<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1048576<\/span> <span class=\"token punctuation\">\\\\<\/span>         <span class=\"token comment\"># 1MB\u6808\u5927\u5c0f<\/span><br \/>\n    -s <span class=\"token assign-left variable\">NO_EXIT_RUNTIME<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1<\/span> <span class=\"token punctuation\">\\\\<\/span>          <span class=\"token comment\"># \u4fdd\u6301\u8fd0\u884c\u65f6\u6d3b\u8dc3<\/span><br \/>\n    -s <span class=\"token assign-left variable\">ASSERTIONS<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">0<\/span> <span class=\"token punctuation\">\\\\<\/span>               <span class=\"token comment\"># \u7981\u7528\u65ad\u8a00&#xff08;\u751f\u4ea7\u73af\u5883&#xff09;<\/span><br \/>\n    -s <span class=\"token assign-left variable\">DISABLE_EXCEPTION_CATCHING<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1<\/span> <span class=\"token punctuation\">\\\\<\/span> <span class=\"token comment\"># \u7981\u7528\u5f02\u5e38\u5904\u7406<\/span><br \/>\n    &#8211;closure <span class=\"token number\">1<\/span> <span class=\"token punctuation\">\\\\<\/span>                   <span class=\"token comment\"># \u542f\u7528Closure\u7f16\u8bd1\u5668<\/span><br \/>\n    &#8211;llvm-lto <span class=\"token number\">3<\/span> <span class=\"token punctuation\">\\\\<\/span>                  <span class=\"token comment\"># \u94fe\u63a5\u65f6\u4f18\u5316<\/span><br \/>\n    source.cpp -o optimized.js<\/p>\n<p>\u4ee3\u7801\u5206\u5272\u7b56\u7565&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u5c06\u5927\u578b\u6a21\u5757\u5206\u89e3\u4e3a\u591a\u4e2a\u5c0f\u6a21\u5757<\/span><br \/>\n<span class=\"token comment\">\/\/ core_module.cpp &#8211; \u6838\u5fc3\u529f\u80fd<\/span><br \/>\n<span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>core<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u53ea\u5305\u542b\u6838\u5fc3\u529f\u80fd<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ advanced_module.cpp &#8211; \u9ad8\u7ea7\u529f\u80fd  <\/span><br \/>\n<span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>advanced<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u9ad8\u7ea7\u529f\u80fd&#xff0c;\u6309\u9700\u52a0\u8f7d<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>5.2 \u8fd0\u884c\u65f6\u6027\u80fd\u8c03\u4f18<\/h4>\n<p>\u5185\u5b58\u8bbf\u95ee\u6a21\u5f0f\u4f18\u5316\u662f\u5173\u952e&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u907f\u514d\u9891\u7e41\u7684\u8de8\u8bed\u8a00\u8c03\u7528<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">BatchProcessor<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span> buffer<span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u6279\u91cf\u5904\u7406\u800c\u4e0d\u662f\u5355\u4e2a\u5904\u7406<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">processBatch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        buffer<span class=\"token punctuation\">.<\/span><span class=\"token function\">clear<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        buffer<span class=\"token punctuation\">.<\/span><span class=\"token function\">reserve<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u4e00\u6b21\u6027\u5904\u7406\u6240\u6709\u6570\u636e<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> <span class=\"token keyword\">auto<\/span><span class=\"token operator\">&amp;<\/span> value <span class=\"token operator\">:<\/span> input<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            buffer<span class=\"token punctuation\">.<\/span><span class=\"token function\">push_back<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">complexCalculation<\/span><span class=\"token punctuation\">(<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> buffer<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> <span class=\"token function\">complexCalculation<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> input<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u590d\u6742\u8ba1\u7b97\u903b\u8f91<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> input <span class=\"token operator\">*<\/span> input <span class=\"token operator\">&#043;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">sin<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>SIMD\u6307\u4ee4\u7684\u5229\u7528&#xff1a;<\/p>\n<p><span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;immintrin.h&gt;<\/span><\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u4f7f\u7528SIMD\u52a0\u901f\u5411\u91cf\u8ba1\u7b97<\/span><br \/>\n<span class=\"token keyword\">void<\/span> <span class=\"token function\">vectorAdd<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> <span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> a<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> b<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> result<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> count<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">int<\/span> simd_count <span class=\"token operator\">&#061;<\/span> count <span class=\"token operator\">&#8211;<\/span> <span class=\"token punctuation\">(<\/span>count <span class=\"token operator\">%<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ SIMD\u5904\u7406<\/span><br \/>\n    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> simd_count<span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        __m256 va <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">_mm256_load_ps<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&amp;<\/span>a<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        __m256 vb <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">_mm256_load_ps<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&amp;<\/span>b<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        __m256 vr <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">_mm256_add_ps<\/span><span class=\"token punctuation\">(<\/span>va<span class=\"token punctuation\">,<\/span> vb<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">_mm256_store_ps<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&amp;<\/span>result<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span> vr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u5904\u7406\u5269\u4f59\u5143\u7d20<\/span><br \/>\n    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> i <span class=\"token operator\">&#061;<\/span> simd_count<span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> count<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        result<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> a<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#043;<\/span> b<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>5.3 \u8c03\u8bd5\u548c\u6027\u80fd\u5206\u6790<\/h4>\n<p>\u4f7f\u7528\u6d4f\u89c8\u5668\u5f00\u53d1\u8005\u5de5\u5177\u8fdb\u884c\u6027\u80fd\u5206\u6790&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u6027\u80fd\u6d4b\u8bd5\u5305\u88c5\u5668<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PerformanceProfiler<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">measureFunction<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">name<span class=\"token punctuation\">,<\/span> func<span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&#8230;<\/span>args<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> start <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">func<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&#8230;<\/span>args<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> end <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>name<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> took <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>end <span class=\"token operator\">&#8211;<\/span> start<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> milliseconds<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> <span class=\"token function\">profileMemoryUsage<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>performance<span class=\"token punctuation\">.<\/span>memory<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Memory usage:&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                used<span class=\"token operator\">:<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">round<\/span><span class=\"token punctuation\">(<\/span>performance<span class=\"token punctuation\">.<\/span>memory<span class=\"token punctuation\">.<\/span>usedJSHeapSize <span class=\"token operator\">\/<\/span> <span class=\"token number\">1048576<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#039;MB&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                total<span class=\"token operator\">:<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">round<\/span><span class=\"token punctuation\">(<\/span>performance<span class=\"token punctuation\">.<\/span>memory<span class=\"token punctuation\">.<\/span>totalJSHeapSize <span class=\"token operator\">\/<\/span> <span class=\"token number\">1048576<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#039;MB&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                limit<span class=\"token operator\">:<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">round<\/span><span class=\"token punctuation\">(<\/span>performance<span class=\"token punctuation\">.<\/span>memory<span class=\"token punctuation\">.<\/span>jsHeapSizeLimit <span class=\"token operator\">\/<\/span> <span class=\"token number\">1048576<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token string\">&#039;MB&#039;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u4f7f\u7528\u793a\u4f8b<\/span><br \/>\n<span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> PerformanceProfiler<span class=\"token punctuation\">.<\/span><span class=\"token function\">measureFunction<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token string\">&#039;Complex calculation&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    wasmModule<span class=\"token punctuation\">.<\/span>complexCalculation<span class=\"token punctuation\">,<\/span><br \/>\n    largeDataSet<br \/>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h3>\u516d\u3001\u5b9e\u6218\u9879\u76ee\u6848\u4f8b\u5206\u6790<\/h3>\n<h4>6.1 \u56fe\u50cf\u5904\u7406\u5e94\u7528\u5f00\u53d1<\/h4>\n<p>\u8ba9\u6211\u4eec\u6784\u5efa\u4e00\u4e2a\u5b8c\u6574\u7684\u56fe\u50cf\u5904\u7406\u6a21\u5757&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ image_processor.cpp<\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/bind.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;vector&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;cmath&gt;<\/span><\/span><\/p>\n<p><span class=\"token keyword\">struct<\/span> <span class=\"token class-name\">ImageData<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">uint8_t<\/span><span class=\"token operator\">&gt;<\/span> data<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">int<\/span> width<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">int<\/span> height<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">int<\/span> channels<span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token function\">ImageData<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> w<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> h<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> c<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> <span class=\"token function\">width<\/span><span class=\"token punctuation\">(<\/span>w<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">height<\/span><span class=\"token punctuation\">(<\/span>h<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">channels<\/span><span class=\"token punctuation\">(<\/span>c<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        data<span class=\"token punctuation\">.<\/span><span class=\"token function\">resize<\/span><span class=\"token punctuation\">(<\/span>w <span class=\"token operator\">*<\/span> h <span class=\"token operator\">*<\/span> c<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ImageProcessor<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u9ad8\u65af\u6a21\u7cca\u6ee4\u955c<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> ImageData <span class=\"token function\">gaussianBlur<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> ImageData<span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span> sigma<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        ImageData <span class=\"token function\">result<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> input<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">,<\/span> input<span class=\"token punctuation\">.<\/span>channels<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u8ba1\u7b97\u9ad8\u65af\u6838<\/span><br \/>\n        <span class=\"token keyword\">int<\/span> kernelSize <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">static_cast<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">int<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">6<\/span> <span class=\"token operator\">*<\/span> sigma <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>kernelSize <span class=\"token operator\">%<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> kernelSize<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">kernel<\/span><span class=\"token punctuation\">(<\/span>kernelSize<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">float<\/span> sum <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.0f<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">int<\/span> center <span class=\"token operator\">&#061;<\/span> kernelSize <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> kernelSize<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">float<\/span> x <span class=\"token operator\">&#061;<\/span> i <span class=\"token operator\">&#8211;<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n            kernel<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">exp<\/span><span class=\"token punctuation\">(<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">*<\/span> x<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> sigma <span class=\"token operator\">*<\/span> sigma<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            sum <span class=\"token operator\">&#043;&#061;<\/span> kernel<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5f52\u4e00\u5316\u6838<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">auto<\/span><span class=\"token operator\">&amp;<\/span> k <span class=\"token operator\">:<\/span> kernel<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            k <span class=\"token operator\">\/&#061;<\/span> sum<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6c34\u5e73\u6a21\u7cca<\/span><br \/>\n        ImageData <span class=\"token function\">temp<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> input<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">,<\/span> input<span class=\"token punctuation\">.<\/span>channels<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token function\">applyHorizontalBlur<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">,<\/span> temp<span class=\"token punctuation\">,<\/span> kernel<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5782\u76f4\u6a21\u7cca<\/span><br \/>\n        <span class=\"token function\">applyVerticalBlur<\/span><span class=\"token punctuation\">(<\/span>temp<span class=\"token punctuation\">,<\/span> result<span class=\"token punctuation\">,<\/span> kernel<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u8fb9\u7f18\u68c0\u6d4b<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> ImageData <span class=\"token function\">edgeDetection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> ImageData<span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        ImageData <span class=\"token function\">result<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> input<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u7070\u5ea6\u8f93\u51fa<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ Sobel\u7b97\u5b50<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">int<\/span> sobelX<span class=\"token punctuation\">[<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">int<\/span> sobelY<span class=\"token punctuation\">[<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">3<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">{<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> y <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> y <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> y<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> x <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> x <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> x<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">float<\/span> gx <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> gy <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> ky <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> ky <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> ky<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> kx <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> kx <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> kx<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                        <span class=\"token keyword\">int<\/span> px <span class=\"token operator\">&#061;<\/span> x <span class=\"token operator\">&#043;<\/span> kx<span class=\"token punctuation\">;<\/span><br \/>\n                        <span class=\"token keyword\">int<\/span> py <span class=\"token operator\">&#061;<\/span> y <span class=\"token operator\">&#043;<\/span> ky<span class=\"token punctuation\">;<\/span><br \/>\n                        <span class=\"token keyword\">uint8_t<\/span> pixel <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">getGrayPixel<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">,<\/span> px<span class=\"token punctuation\">,<\/span> py<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>                        gx <span class=\"token operator\">&#043;&#061;<\/span> pixel <span class=\"token operator\">*<\/span> sobelX<span class=\"token punctuation\">[<\/span>ky <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">[<\/span>kx <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                        gy <span class=\"token operator\">&#043;&#061;<\/span> pixel <span class=\"token operator\">*<\/span> sobelY<span class=\"token punctuation\">[<\/span>ky <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">[<\/span>kx <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token punctuation\">}<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><\/p>\n<p>                <span class=\"token keyword\">float<\/span> magnitude <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">sqrt<\/span><span class=\"token punctuation\">(<\/span>gx <span class=\"token operator\">*<\/span> gx <span class=\"token operator\">&#043;<\/span> gy <span class=\"token operator\">*<\/span> gy<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                result<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>y <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#043;<\/span> x<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span><br \/>\n                    <span class=\"token keyword\">static_cast<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">uint8_t<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>std<span class=\"token operator\">::<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">255.0f<\/span><span class=\"token punctuation\">,<\/span> magnitude<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u83b7\u53d6\u56fe\u50cf\u6570\u636e\u6307\u9488&#xff08;\u4f9bJavaScript\u8bbf\u95ee&#xff09;<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> uintptr_t <span class=\"token function\">getDataPtr<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> ImageData<span class=\"token operator\">&amp;<\/span> img<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">reinterpret_cast<\/span><span class=\"token operator\">&lt;<\/span>uintptr_t<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>img<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">uint8_t<\/span> <span class=\"token function\">getGrayPixel<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> ImageData<span class=\"token operator\">&amp;<\/span> img<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> x<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> y<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">int<\/span> index <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>y <span class=\"token operator\">*<\/span> img<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#043;<\/span> x<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> img<span class=\"token punctuation\">.<\/span>channels<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>img<span class=\"token punctuation\">.<\/span>channels <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> img<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token comment\">\/\/ RGB\u5230\u7070\u5ea6\u8f6c\u6362<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">static_cast<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">uint8_t<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><br \/>\n                <span class=\"token number\">0.299f<\/span> <span class=\"token operator\">*<\/span> img<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#043;<\/span>     <span class=\"token comment\">\/\/ R<\/span><br \/>\n                <span class=\"token number\">0.587f<\/span> <span class=\"token operator\">*<\/span> img<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>index <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token comment\">\/\/ G  <\/span><br \/>\n                <span class=\"token number\">0.114f<\/span> <span class=\"token operator\">*<\/span> img<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>index <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span>   <span class=\"token comment\">\/\/ B<\/span><br \/>\n            <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">void<\/span> <span class=\"token function\">applyHorizontalBlur<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> ImageData<span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">,<\/span> ImageData<span class=\"token operator\">&amp;<\/span> output<span class=\"token punctuation\">,<\/span><br \/>\n                                   <span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span> kernel<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">int<\/span> center <span class=\"token operator\">&#061;<\/span> kernel<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> y <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> y <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">;<\/span> y<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> x <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> x <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">;<\/span> x<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> c <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> c <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span>channels<span class=\"token punctuation\">;<\/span> c<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">float<\/span> sum <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.0f<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>                    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> k <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> k <span class=\"token operator\">&lt;<\/span> kernel<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> k<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                        <span class=\"token keyword\">int<\/span> px <span class=\"token operator\">&#061;<\/span> x <span class=\"token operator\">&#043;<\/span> k <span class=\"token operator\">&#8211;<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n                        px <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">max<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> px<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>                        <span class=\"token keyword\">int<\/span> index <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>y <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#043;<\/span> px<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>channels <span class=\"token operator\">&#043;<\/span> c<span class=\"token punctuation\">;<\/span><br \/>\n                        sum <span class=\"token operator\">&#043;&#061;<\/span> input<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">*<\/span> kernel<span class=\"token punctuation\">[<\/span>k<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token punctuation\">}<\/span><\/p>\n<p>                    <span class=\"token keyword\">int<\/span> outIndex <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>y <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#043;<\/span> x<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>channels <span class=\"token operator\">&#043;<\/span> c<span class=\"token punctuation\">;<\/span><br \/>\n                    output<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>outIndex<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">static_cast<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">uint8_t<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>sum<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">void<\/span> <span class=\"token function\">applyVerticalBlur<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> ImageData<span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">,<\/span> ImageData<span class=\"token operator\">&amp;<\/span> output<span class=\"token punctuation\">,<\/span><br \/>\n                                 <span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span> kernel<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">int<\/span> center <span class=\"token operator\">&#061;<\/span> kernel<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> y <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> y <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">;<\/span> y<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> x <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> x <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">;<\/span> x<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> c <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> c <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span>channels<span class=\"token punctuation\">;<\/span> c<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">float<\/span> sum <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.0f<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>                    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> k <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> k <span class=\"token operator\">&lt;<\/span> kernel<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> k<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                        <span class=\"token keyword\">int<\/span> py <span class=\"token operator\">&#061;<\/span> y <span class=\"token operator\">&#043;<\/span> k <span class=\"token operator\">&#8211;<\/span> center<span class=\"token punctuation\">;<\/span><br \/>\n                        py <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">max<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> py<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>                        <span class=\"token keyword\">int<\/span> index <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>py <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#043;<\/span> x<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>channels <span class=\"token operator\">&#043;<\/span> c<span class=\"token punctuation\">;<\/span><br \/>\n                        sum <span class=\"token operator\">&#043;&#061;<\/span> input<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">*<\/span> kernel<span class=\"token punctuation\">[<\/span>k<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token punctuation\">}<\/span><\/p>\n<p>                    <span class=\"token keyword\">int<\/span> outIndex <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>y <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#043;<\/span> x<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> input<span class=\"token punctuation\">.<\/span>channels <span class=\"token operator\">&#043;<\/span> c<span class=\"token punctuation\">;<\/span><br \/>\n                    output<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>outIndex<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">static_cast<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">uint8_t<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>sum<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>image_processor<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>value_object<span class=\"token operator\">&lt;<\/span>ImageData<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;ImageData&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">field<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;width&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ImageData<span class=\"token operator\">::<\/span>width<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">field<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;height&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ImageData<span class=\"token operator\">::<\/span>height<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">field<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;channels&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ImageData<span class=\"token operator\">::<\/span>channels<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>ImageProcessor<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;ImageProcessor&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;gaussianBlur&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ImageProcessor<span class=\"token operator\">::<\/span>gaussianBlur<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;edgeDetection&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ImageProcessor<span class=\"token operator\">::<\/span>edgeDetection<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getDataPtr&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ImageProcessor<span class=\"token operator\">::<\/span>getDataPtr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>JavaScript\u7aef\u7684\u4f7f\u7528&#xff1a;<\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">WebImageProcessor<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">wasmModule<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module <span class=\"token operator\">&#061;<\/span> wasmModule<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">async<\/span> <span class=\"token function\">processImageFromCanvas<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">canvas<span class=\"token punctuation\">,<\/span> operation<span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&#8230;<\/span>params<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> ctx <span class=\"token operator\">&#061;<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;2d&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> imageData <span class=\"token operator\">&#061;<\/span> ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">getImageData<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> canvas<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> canvas<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u521b\u5efaWebAssembly\u56fe\u50cf\u6570\u636e\u7ed3\u6784<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> wasmImageData <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">this<span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>ImageData<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            canvas<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span><br \/>\n            canvas<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token number\">4<\/span>  <span class=\"token comment\">\/\/ RGBA<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u590d\u5236\u6570\u636e\u5230WebAssembly\u5185\u5b58<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> dataPtr <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>ImageProcessor<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDataPtr<\/span><span class=\"token punctuation\">(<\/span>wasmImageData<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> wasmArray <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Uint8Array<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span><span class=\"token constant\">HEAPU8<\/span><span class=\"token punctuation\">.<\/span>buffer<span class=\"token punctuation\">,<\/span><br \/>\n            dataPtr<span class=\"token punctuation\">,<\/span><br \/>\n            imageData<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span>length<br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        wasmArray<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>imageData<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6267\u884c\u56fe\u50cf\u5904\u7406<\/span><br \/>\n        <span class=\"token keyword\">let<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">switch<\/span> <span class=\"token punctuation\">(<\/span>operation<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;blur&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>ImageProcessor<span class=\"token punctuation\">.<\/span><span class=\"token function\">gaussianBlur<\/span><span class=\"token punctuation\">(<\/span>wasmImageData<span class=\"token punctuation\">,<\/span> params<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;edge&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>ImageProcessor<span class=\"token punctuation\">.<\/span><span class=\"token function\">edgeDetection<\/span><span class=\"token punctuation\">(<\/span>wasmImageData<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">default<\/span><span class=\"token operator\">:<\/span><br \/>\n                <span class=\"token keyword\">throw<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Unsupported operation&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u83b7\u53d6\u5904\u7406\u7ed3\u679c<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> resultPtr <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>ImageProcessor<span class=\"token punctuation\">.<\/span><span class=\"token function\">getDataPtr<\/span><span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> resultArray <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Uint8Array<\/span><span class=\"token punctuation\">(<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span><span class=\"token constant\">HEAPU8<\/span><span class=\"token punctuation\">.<\/span>buffer<span class=\"token punctuation\">,<\/span><br \/>\n            resultPtr<span class=\"token punctuation\">,<\/span><br \/>\n            result<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">*<\/span> result<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">*<\/span> result<span class=\"token punctuation\">.<\/span>channels<br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u521b\u5efa\u65b0\u7684Canvas\u663e\u793a\u7ed3\u679c<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> resultCanvas <span class=\"token operator\">&#061;<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;canvas&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        resultCanvas<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#061;<\/span> result<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">;<\/span><br \/>\n        resultCanvas<span class=\"token punctuation\">.<\/span>height <span class=\"token operator\">&#061;<\/span> result<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> resultCtx <span class=\"token operator\">&#061;<\/span> resultCanvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;2d&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">const<\/span> resultImageData <span class=\"token operator\">&#061;<\/span> resultCtx<span class=\"token punctuation\">.<\/span><span class=\"token function\">createImageData<\/span><span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> result<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>result<span class=\"token punctuation\">.<\/span>channels <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token comment\">\/\/ \u7070\u5ea6\u56fe\u50cf\u8f6cRGBA<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> resultArray<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">const<\/span> gray <span class=\"token operator\">&#061;<\/span> resultArray<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                resultImageData<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> gray<span class=\"token punctuation\">;<\/span>     <span class=\"token comment\">\/\/ R<\/span><br \/>\n                resultImageData<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> <span class=\"token number\">4<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> gray<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ G<\/span><br \/>\n                resultImageData<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> <span class=\"token number\">4<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> gray<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ B<\/span><br \/>\n                resultImageData<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> <span class=\"token number\">4<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">3<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">255<\/span><span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/\/ A<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            resultImageData<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>resultArray<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        resultCtx<span class=\"token punctuation\">.<\/span><span class=\"token function\">putImageData<\/span><span class=\"token punctuation\">(<\/span>resultImageData<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> resultCanvas<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u4f7f\u7528\u793a\u4f8b<\/span><br \/>\n<span class=\"token keyword\">const<\/span> imageProcessor <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">WebImageProcessor<\/span><span class=\"token punctuation\">(<\/span>wasmModule<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> blurredCanvas <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> imageProcessor<span class=\"token punctuation\">.<\/span><span class=\"token function\">processImageFromCanvas<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    originalCanvas<span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token string\">&#039;blur&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token number\">2.0<\/span>  <span class=\"token comment\">\/\/ sigma\u503c<\/span><br \/>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\ndocument<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span><span class=\"token function\">appendChild<\/span><span class=\"token punctuation\">(<\/span>blurredCanvas<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h4>6.2 \u79d1\u5b66\u8ba1\u7b97\u6a21\u5757\u6784\u5efa<\/h4>\n<p>\u6784\u5efa\u4e00\u4e2a\u9ad8\u6027\u80fd\u7684\u6570\u503c\u8ba1\u7b97\u5e93&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ scientific_computing.cpp<\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/bind.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;vector&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;complex&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;cmath&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;algorithm&gt;<\/span><\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">Matrix<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">double<\/span><span class=\"token operator\">&gt;<\/span> data<span class=\"token punctuation\">;<\/span><br \/>\n    size_t rows<span class=\"token punctuation\">,<\/span> cols<span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token function\">Matrix<\/span><span class=\"token punctuation\">(<\/span>size_t r<span class=\"token punctuation\">,<\/span> size_t c<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> <span class=\"token function\">rows<\/span><span class=\"token punctuation\">(<\/span>r<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">cols<\/span><span class=\"token punctuation\">(<\/span>c<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span>r <span class=\"token operator\">*<\/span> c<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0.0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">Matrix<\/span><span class=\"token punctuation\">(<\/span>size_t r<span class=\"token punctuation\">,<\/span> size_t c<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">double<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span> values<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token operator\">:<\/span> <span class=\"token function\">rows<\/span><span class=\"token punctuation\">(<\/span>r<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">cols<\/span><span class=\"token punctuation\">(<\/span>c<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span>values<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">!&#061;<\/span> r <span class=\"token operator\">*<\/span> c<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            data<span class=\"token punctuation\">.<\/span><span class=\"token function\">resize<\/span><span class=\"token punctuation\">(<\/span>r <span class=\"token operator\">*<\/span> c<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0.0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">double<\/span><span class=\"token operator\">&amp;<\/span> <span class=\"token keyword\">operator<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span>size_t row<span class=\"token punctuation\">,<\/span> size_t col<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> data<span class=\"token punctuation\">[<\/span>row <span class=\"token operator\">*<\/span> cols <span class=\"token operator\">&#043;<\/span> col<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">double<\/span><span class=\"token operator\">&amp;<\/span> <span class=\"token keyword\">operator<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span>size_t row<span class=\"token punctuation\">,<\/span> size_t col<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> data<span class=\"token punctuation\">[<\/span>row <span class=\"token operator\">*<\/span> cols <span class=\"token operator\">&#043;<\/span> col<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    Matrix <span class=\"token function\">multiply<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Matrix<span class=\"token operator\">&amp;<\/span> other<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>cols <span class=\"token operator\">!&#061;<\/span> other<span class=\"token punctuation\">.<\/span>rows<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">throw<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">invalid_argument<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Matrix dimensions don&#039;t match&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        Matrix <span class=\"token function\">result<\/span><span class=\"token punctuation\">(<\/span>rows<span class=\"token punctuation\">,<\/span> other<span class=\"token punctuation\">.<\/span>cols<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u4f18\u5316\u7684\u77e9\u9635\u4e58\u6cd5&#xff08;\u5206\u5757\u7b97\u6cd5&#xff09;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> size_t block_size <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">64<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> rows<span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&#043;&#061;<\/span> block_size<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t j <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> j <span class=\"token operator\">&lt;<\/span> other<span class=\"token punctuation\">.<\/span>cols<span class=\"token punctuation\">;<\/span> j <span class=\"token operator\">&#043;&#061;<\/span> block_size<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t k <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> k <span class=\"token operator\">&lt;<\/span> cols<span class=\"token punctuation\">;<\/span> k <span class=\"token operator\">&#043;&#061;<\/span> block_size<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    size_t max_i <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>i <span class=\"token operator\">&#043;<\/span> block_size<span class=\"token punctuation\">,<\/span> rows<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    size_t max_j <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>j <span class=\"token operator\">&#043;<\/span> block_size<span class=\"token punctuation\">,<\/span> other<span class=\"token punctuation\">.<\/span>cols<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    size_t max_k <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>k <span class=\"token operator\">&#043;<\/span> block_size<span class=\"token punctuation\">,<\/span> cols<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>                    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t ii <span class=\"token operator\">&#061;<\/span> i<span class=\"token punctuation\">;<\/span> ii <span class=\"token operator\">&lt;<\/span> max_i<span class=\"token punctuation\">;<\/span> <span class=\"token operator\">&#043;&#043;<\/span>ii<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t jj <span class=\"token operator\">&#061;<\/span> j<span class=\"token punctuation\">;<\/span> jj <span class=\"token operator\">&lt;<\/span> max_j<span class=\"token punctuation\">;<\/span> <span class=\"token operator\">&#043;&#043;<\/span>jj<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                            <span class=\"token keyword\">double<\/span> sum <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t kk <span class=\"token operator\">&#061;<\/span> k<span class=\"token punctuation\">;<\/span> kk <span class=\"token operator\">&lt;<\/span> max_k<span class=\"token punctuation\">;<\/span> <span class=\"token operator\">&#043;&#043;<\/span>kk<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                                sum <span class=\"token operator\">&#043;&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">*<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">(<\/span>ii<span class=\"token punctuation\">,<\/span> kk<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token function\">other<\/span><span class=\"token punctuation\">(<\/span>kk<span class=\"token punctuation\">,<\/span> jj<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                            <span class=\"token punctuation\">}<\/span><br \/>\n                            <span class=\"token function\">result<\/span><span class=\"token punctuation\">(<\/span>ii<span class=\"token punctuation\">,<\/span> jj<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;&#061;<\/span> sum<span class=\"token punctuation\">;<\/span><br \/>\n                        <span class=\"token punctuation\">}<\/span><br \/>\n                    <span class=\"token punctuation\">}<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ LU\u5206\u89e3<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>pair<span class=\"token operator\">&lt;<\/span>Matrix<span class=\"token punctuation\">,<\/span> Matrix<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">luDecomposition<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>rows <span class=\"token operator\">!&#061;<\/span> cols<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">throw<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">invalid_argument<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Matrix must be square&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        Matrix <span class=\"token function\">L<\/span><span class=\"token punctuation\">(<\/span>rows<span class=\"token punctuation\">,<\/span> cols<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        Matrix U <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">*<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> rows<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">L<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1.0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> rows <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t k <span class=\"token operator\">&#061;<\/span> i <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> k <span class=\"token operator\">&lt;<\/span> rows<span class=\"token punctuation\">;<\/span> k<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">U<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">continue<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>                <span class=\"token keyword\">double<\/span> factor <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">U<\/span><span class=\"token punctuation\">(<\/span>k<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token function\">U<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token function\">L<\/span><span class=\"token punctuation\">(<\/span>k<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;<\/span> factor<span class=\"token punctuation\">;<\/span><\/p>\n<p>                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t j <span class=\"token operator\">&#061;<\/span> i<span class=\"token punctuation\">;<\/span> j <span class=\"token operator\">&lt;<\/span> cols<span class=\"token punctuation\">;<\/span> j<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token function\">U<\/span><span class=\"token punctuation\">(<\/span>k<span class=\"token punctuation\">,<\/span> j<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">-&#061;<\/span> factor <span class=\"token operator\">*<\/span> <span class=\"token function\">U<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">,<\/span> j<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">make_pair<\/span><span class=\"token punctuation\">(<\/span>L<span class=\"token punctuation\">,<\/span> U<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">double<\/span> <span class=\"token function\">determinant<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>rows <span class=\"token operator\">!&#061;<\/span> cols<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">throw<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">invalid_argument<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Matrix must be square&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">auto<\/span> <span class=\"token punctuation\">[<\/span>L<span class=\"token punctuation\">,<\/span> U<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">luDecomposition<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">double<\/span> det <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1.0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> rows<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            det <span class=\"token operator\">*&#061;<\/span> <span class=\"token function\">U<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> det<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u83b7\u53d6\u6570\u636e\u6307\u9488<\/span><br \/>\n    uintptr_t <span class=\"token function\">getDataPtr<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token keyword\">reinterpret_cast<\/span><span class=\"token operator\">&lt;<\/span>uintptr_t<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span><span class=\"token function\">data<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    size_t <span class=\"token function\">getRows<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">return<\/span> rows<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    size_t <span class=\"token function\">getCols<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">return<\/span> cols<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u5feb\u901f\u5085\u91cc\u53f6\u53d8\u6362<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">FFT<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">using<\/span> Complex <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span>complex<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">double<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">fft<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        size_t N <span class=\"token operator\">&#061;<\/span> input<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>N <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> input<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u786e\u4fddN\u662f2\u7684\u5e42<\/span><br \/>\n        size_t n <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">while<\/span> <span class=\"token punctuation\">(<\/span>n <span class=\"token operator\">&lt;<\/span> N<span class=\"token punctuation\">)<\/span> n <span class=\"token operator\">&lt;&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">x<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        x<span class=\"token punctuation\">.<\/span><span class=\"token function\">resize<\/span><span class=\"token punctuation\">(<\/span>n<span class=\"token punctuation\">,<\/span> <span class=\"token function\">Complex<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> <span class=\"token function\">fft_recursive<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">ifft<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span> input<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u5171\u8f6d<\/span><br \/>\n        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">x<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> input<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            x<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">conj<\/span><span class=\"token punctuation\">(<\/span>input<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ FFT<\/span><br \/>\n        x <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">fft<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5171\u8f6d\u5e76\u7f29\u653e<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> x<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            x<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">conj<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token keyword\">static_cast<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">double<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> x<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">fft_recursive<\/span><span class=\"token punctuation\">(<\/span>std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span> x<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        size_t N <span class=\"token operator\">&#061;<\/span> x<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>N <span class=\"token operator\">&lt;&#061;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span> x<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5206\u6cbb<\/span><br \/>\n        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">even<\/span><span class=\"token punctuation\">(<\/span>N<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">odd<\/span><span class=\"token punctuation\">(<\/span>N<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> N<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            even<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> x<span class=\"token punctuation\">[<\/span>i<span class=\"token operator\">*<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            odd<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> x<span class=\"token punctuation\">[<\/span>i<span class=\"token operator\">*<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        even <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">fft_recursive<\/span><span class=\"token punctuation\">(<\/span>even<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        odd <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">fft_recursive<\/span><span class=\"token punctuation\">(<\/span>odd<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>Complex<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">result<\/span><span class=\"token punctuation\">(<\/span>N<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t k <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> k <span class=\"token operator\">&lt;<\/span> N<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span> k<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            Complex t <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">exp<\/span><span class=\"token punctuation\">(<\/span><span class=\"token function\">Complex<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> M_PI <span class=\"token operator\">*<\/span> k <span class=\"token operator\">\/<\/span> N<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> odd<span class=\"token punctuation\">[<\/span>k<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            result<span class=\"token punctuation\">[<\/span>k<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> even<span class=\"token punctuation\">[<\/span>k<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#043;<\/span> t<span class=\"token punctuation\">;<\/span><br \/>\n            result<span class=\"token punctuation\">[<\/span>k <span class=\"token operator\">&#043;<\/span> N<span class=\"token operator\">\/<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> even<span class=\"token punctuation\">[<\/span>k<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#8211;<\/span> t<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>scientific_computing<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>Matrix<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Matrix&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span>constructor<span class=\"token operator\">&lt;<\/span>size_t<span class=\"token punctuation\">,<\/span> size_t<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span>constructor<span class=\"token operator\">&lt;<\/span>size_t<span class=\"token punctuation\">,<\/span> size_t<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">double<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&amp;<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;multiply&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Matrix<span class=\"token operator\">::<\/span>multiply<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;luDecomposition&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Matrix<span class=\"token operator\">::<\/span>luDecomposition<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;determinant&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Matrix<span class=\"token operator\">::<\/span>determinant<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getDataPtr&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Matrix<span class=\"token operator\">::<\/span>getDataPtr<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getRows&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Matrix<span class=\"token operator\">::<\/span>getRows<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getCols&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Matrix<span class=\"token operator\">::<\/span>getCols<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>FFT<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;FFT&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;fft&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>FFT<span class=\"token operator\">::<\/span>fft<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;ifft&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>FFT<span class=\"token operator\">::<\/span>ifft<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    emscripten<span class=\"token operator\">::<\/span>register_vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">double<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;VectorDouble&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>register_vector<span class=\"token operator\">&lt;<\/span>std<span class=\"token operator\">::<\/span>complex<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">double<\/span><span class=\"token operator\">&gt;&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;VectorComplex&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u6027\u80fd\u5bf9\u6bd4\u6d4b\u8bd5&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u6027\u80fd\u57fa\u51c6\u6d4b\u8bd5<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PerformanceBenchmark<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">wasmModule<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module <span class=\"token operator\">&#061;<\/span> wasmModule<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">async<\/span> <span class=\"token function\">benchmarkMatrixMultiplication<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> sizes <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token number\">100<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">500<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> results <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> size <span class=\"token keyword\">of<\/span> sizes<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">Testing <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>size<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">x<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>size<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> matrices&#8230;<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u751f\u6210\u968f\u673a\u77e9\u9635\u6570\u636e<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> data1 <span class=\"token operator\">&#061;<\/span> Array<span class=\"token punctuation\">.<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>length<span class=\"token operator\">:<\/span> size <span class=\"token operator\">*<\/span> size<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> data2 <span class=\"token operator\">&#061;<\/span> Array<span class=\"token punctuation\">.<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>length<span class=\"token operator\">:<\/span> size <span class=\"token operator\">*<\/span> size<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ WebAssembly\u7248\u672c<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> wasmStart <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> matrix1 <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">this<span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>Matrix<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">,<\/span> data1<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> matrix2 <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">this<span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>Matrix<\/span><span class=\"token punctuation\">(<\/span>size<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">,<\/span> data2<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> wasmResult <span class=\"token operator\">&#061;<\/span> matrix1<span class=\"token punctuation\">.<\/span><span class=\"token function\">multiply<\/span><span class=\"token punctuation\">(<\/span>matrix2<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> wasmTime <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> wasmStart<span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ JavaScript\u7248\u672c&#xff08;\u7528\u4e8e\u5bf9\u6bd4&#xff09;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> jsStart <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> jsResult <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">multiplyMatricesJS<\/span><span class=\"token punctuation\">(<\/span>data1<span class=\"token punctuation\">,<\/span> data2<span class=\"token punctuation\">,<\/span> size<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> jsTime <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> jsStart<span class=\"token punctuation\">;<\/span><\/p>\n<p>            results<span class=\"token punctuation\">[<\/span>size<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                wasmTime<span class=\"token punctuation\">,<\/span><br \/>\n                jsTime<span class=\"token punctuation\">,<\/span><br \/>\n                speedup<span class=\"token operator\">:<\/span> jsTime <span class=\"token operator\">\/<\/span> wasmTime<br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>size<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">x<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>size<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">: WASM <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>wasmTime<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">ms, JS <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>jsTime<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">ms, Speedup: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token punctuation\">(<\/span>jsTime<span class=\"token operator\">\/<\/span>wasmTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">x<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> results<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">multiplyMatricesJS<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">a<span class=\"token punctuation\">,<\/span> b<span class=\"token punctuation\">,<\/span> size<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Array<\/span><span class=\"token punctuation\">(<\/span>size <span class=\"token operator\">*<\/span> size<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">fill<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> size<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> j <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> j <span class=\"token operator\">&lt;<\/span> size<span class=\"token punctuation\">;<\/span> j<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> k <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> k <span class=\"token operator\">&lt;<\/span> size<span class=\"token punctuation\">;<\/span> k<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    result<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> size <span class=\"token operator\">&#043;<\/span> j<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#043;&#061;<\/span> a<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> size <span class=\"token operator\">&#043;<\/span> k<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">*<\/span> b<span class=\"token punctuation\">[<\/span>k <span class=\"token operator\">*<\/span> size <span class=\"token operator\">&#043;<\/span> j<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">async<\/span> <span class=\"token function\">benchmarkFFT<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> sizes <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token number\">1024<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2048<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">4096<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">8192<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> size <span class=\"token keyword\">of<\/span> sizes<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">Testing FFT with <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>size<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> points&#8230;<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u751f\u6210\u6d4b\u8bd5\u4fe1\u53f7<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> signal <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> size<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">const<\/span> value <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">sin<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span> <span class=\"token operator\">*<\/span> i <span class=\"token operator\">\/<\/span> size<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span><br \/>\n                             <span class=\"token number\">0.5<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">cos<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">4<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span> <span class=\"token operator\">*<\/span> i <span class=\"token operator\">\/<\/span> size<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                signal<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>real<span class=\"token operator\">:<\/span> value<span class=\"token punctuation\">,<\/span> imag<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><\/p>\n<p>            <span class=\"token keyword\">const<\/span> start <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> fftResult <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span><span class=\"token constant\">FFT<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">fft<\/span><span class=\"token punctuation\">(<\/span>signal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> time <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> start<span class=\"token punctuation\">;<\/span><\/p>\n<p>            console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">FFT <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>size<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> points: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>time<span class=\"token punctuation\">.<\/span><span class=\"token function\">toFixed<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">ms<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u4f7f\u7528\u793a\u4f8b<\/span><br \/>\n<span class=\"token keyword\">const<\/span> benchmark <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">PerformanceBenchmark<\/span><span class=\"token punctuation\">(<\/span>wasmModule<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">await<\/span> benchmark<span class=\"token punctuation\">.<\/span><span class=\"token function\">benchmarkMatrixMultiplication<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">await<\/span> benchmark<span class=\"token punctuation\">.<\/span><span class=\"token function\">benchmarkFFT<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h4>6.3 \u6e38\u620f\u5f15\u64ce\u6838\u5fc3\u6a21\u5757<\/h4>\n<p>\u6784\u5efa\u4e00\u4e2a\u7b80\u5316\u76842D\u7269\u7406\u5f15\u64ce&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ physics_engine.cpp<\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/bind.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;vector&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;cmath&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;algorithm&gt;<\/span><\/span><\/p>\n<p><span class=\"token keyword\">struct<\/span> <span class=\"token class-name\">Vector2<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token function\">Vector2<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> <span class=\"token function\">x<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">y<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token function\">Vector2<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> x_<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span> y_<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> <span class=\"token function\">x<\/span><span class=\"token punctuation\">(<\/span>x_<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">y<\/span><span class=\"token punctuation\">(<\/span>y_<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><\/p>\n<p>    Vector2 <span class=\"token keyword\">operator<\/span><span class=\"token operator\">&#043;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Vector2<span class=\"token operator\">&amp;<\/span> other<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">Vector2<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">&#043;<\/span> other<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> y <span class=\"token operator\">&#043;<\/span> other<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    Vector2 <span class=\"token keyword\">operator<\/span><span class=\"token operator\">&#8211;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Vector2<span class=\"token operator\">&amp;<\/span> other<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">Vector2<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">&#8211;<\/span> other<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> y <span class=\"token operator\">&#8211;<\/span> other<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    Vector2 <span class=\"token keyword\">operator<\/span><span class=\"token operator\">*<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> scalar<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">Vector2<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">*<\/span> scalar<span class=\"token punctuation\">,<\/span> y <span class=\"token operator\">*<\/span> scalar<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">float<\/span> <span class=\"token function\">dot<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Vector2<span class=\"token operator\">&amp;<\/span> other<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> x <span class=\"token operator\">*<\/span> other<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> y <span class=\"token operator\">*<\/span> other<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">float<\/span> <span class=\"token function\">magnitude<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">sqrt<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">*<\/span> x <span class=\"token operator\">&#043;<\/span> y <span class=\"token operator\">*<\/span> y<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    Vector2 <span class=\"token function\">normalized<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">float<\/span> mag <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">magnitude<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>mag <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> <span class=\"token function\">Vector2<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">\/<\/span> mag<span class=\"token punctuation\">,<\/span> y <span class=\"token operator\">\/<\/span> mag<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">Vector2<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">RigidBody<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    Vector2 position<span class=\"token punctuation\">;<\/span><br \/>\n    Vector2 velocity<span class=\"token punctuation\">;<\/span><br \/>\n    Vector2 acceleration<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> mass<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> restitution<span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/\/ \u5f39\u6027\u7cfb\u6570<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> radius<span class=\"token punctuation\">;<\/span>       <span class=\"token comment\">\/\/ \u7b80\u5316\u4e3a\u5706\u5f62\u521a\u4f53<\/span><\/p>\n<p><span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token function\">RigidBody<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> x<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span> y<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span> m<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span> r<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token operator\">:<\/span> <span class=\"token function\">position<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">mass<\/span><span class=\"token punctuation\">(<\/span>m<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">radius<\/span><span class=\"token punctuation\">(<\/span>r<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">restitution<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0.8f<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">applyForce<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Vector2<span class=\"token operator\">&amp;<\/span> force<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        acceleration <span class=\"token operator\">&#061;<\/span> acceleration <span class=\"token operator\">&#043;<\/span> <span class=\"token punctuation\">(<\/span>force <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">1.0f<\/span> <span class=\"token operator\">\/<\/span> mass<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> deltaTime<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        velocity <span class=\"token operator\">&#061;<\/span> velocity <span class=\"token operator\">&#043;<\/span> <span class=\"token punctuation\">(<\/span>acceleration <span class=\"token operator\">*<\/span> deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        position <span class=\"token operator\">&#061;<\/span> position <span class=\"token operator\">&#043;<\/span> <span class=\"token punctuation\">(<\/span>velocity <span class=\"token operator\">*<\/span> deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        acceleration <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">Vector2<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/\/ \u91cd\u7f6e\u52a0\u901f\u5ea6<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">handleBoundaryCollision<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> width<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span> height<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u8fb9\u754c\u78b0\u649e\u68c0\u6d4b\u548c\u54cd\u5e94<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>position<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#8211;<\/span> radius <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            position<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> radius<span class=\"token punctuation\">;<\/span><br \/>\n            velocity<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span>velocity<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">*<\/span> restitution<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>position<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#043;<\/span> radius <span class=\"token operator\">&gt;<\/span> width<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            position<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> width <span class=\"token operator\">&#8211;<\/span> radius<span class=\"token punctuation\">;<\/span><br \/>\n            velocity<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span>velocity<span class=\"token punctuation\">.<\/span>x <span class=\"token operator\">*<\/span> restitution<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>position<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#8211;<\/span> radius <span class=\"token operator\">&lt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            position<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> radius<span class=\"token punctuation\">;<\/span><br \/>\n            velocity<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span>velocity<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">*<\/span> restitution<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>position<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#043;<\/span> radius <span class=\"token operator\">&gt;<\/span> height<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            position<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> height <span class=\"token operator\">&#8211;<\/span> radius<span class=\"token punctuation\">;<\/span><br \/>\n            velocity<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span>velocity<span class=\"token punctuation\">.<\/span>y <span class=\"token operator\">*<\/span> restitution<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">bool<\/span> <span class=\"token function\">checkCollision<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> RigidBody<span class=\"token operator\">&amp;<\/span> other<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        Vector2 diff <span class=\"token operator\">&#061;<\/span> position <span class=\"token operator\">&#8211;<\/span> other<span class=\"token punctuation\">.<\/span>position<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">float<\/span> distance <span class=\"token operator\">&#061;<\/span> diff<span class=\"token punctuation\">.<\/span><span class=\"token function\">magnitude<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> distance <span class=\"token operator\">&lt;<\/span> <span class=\"token punctuation\">(<\/span>radius <span class=\"token operator\">&#043;<\/span> other<span class=\"token punctuation\">.<\/span>radius<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">resolveCollision<\/span><span class=\"token punctuation\">(<\/span>RigidBody<span class=\"token operator\">&amp;<\/span> other<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        Vector2 diff <span class=\"token operator\">&#061;<\/span> position <span class=\"token operator\">&#8211;<\/span> other<span class=\"token punctuation\">.<\/span>position<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">float<\/span> distance <span class=\"token operator\">&#061;<\/span> diff<span class=\"token punctuation\">.<\/span><span class=\"token function\">magnitude<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>distance <span class=\"token operator\">&lt;<\/span> radius <span class=\"token operator\">&#043;<\/span> other<span class=\"token punctuation\">.<\/span>radius<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token comment\">\/\/ \u5206\u79bb\u91cd\u53e0\u7684\u5bf9\u8c61<\/span><br \/>\n            Vector2 normal <span class=\"token operator\">&#061;<\/span> diff<span class=\"token punctuation\">.<\/span><span class=\"token function\">normalized<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">float<\/span> overlap <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>radius <span class=\"token operator\">&#043;<\/span> other<span class=\"token punctuation\">.<\/span>radius<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> distance<span class=\"token punctuation\">;<\/span><\/p>\n<p>            Vector2 separation <span class=\"token operator\">&#061;<\/span> normal <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span>overlap <span class=\"token operator\">*<\/span> <span class=\"token number\">0.5f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            position <span class=\"token operator\">&#061;<\/span> position <span class=\"token operator\">&#043;<\/span> separation<span class=\"token punctuation\">;<\/span><br \/>\n            other<span class=\"token punctuation\">.<\/span>position <span class=\"token operator\">&#061;<\/span> other<span class=\"token punctuation\">.<\/span>position <span class=\"token operator\">&#8211;<\/span> separation<span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u8ba1\u7b97\u76f8\u5bf9\u901f\u5ea6<\/span><br \/>\n            Vector2 relativeVelocity <span class=\"token operator\">&#061;<\/span> velocity <span class=\"token operator\">&#8211;<\/span> other<span class=\"token punctuation\">.<\/span>velocity<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">float<\/span> velAlongNormal <span class=\"token operator\">&#061;<\/span> relativeVelocity<span class=\"token punctuation\">.<\/span><span class=\"token function\">dot<\/span><span class=\"token punctuation\">(<\/span>normal<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u5982\u679c\u7269\u4f53\u6b63\u5728\u5206\u79bb&#xff0c;\u4e0d\u5904\u7406\u78b0\u649e<\/span><br \/>\n            <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>velAlongNormal <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u8ba1\u7b97\u5f39\u6027\u78b0\u649e\u54cd\u5e94<\/span><br \/>\n            <span class=\"token keyword\">float<\/span> e <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>restitution<span class=\"token punctuation\">,<\/span> other<span class=\"token punctuation\">.<\/span>restitution<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">float<\/span> j <span class=\"token operator\">&#061;<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span> <span class=\"token operator\">&#043;<\/span> e<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> velAlongNormal<span class=\"token punctuation\">;<\/span><br \/>\n            j <span class=\"token operator\">\/&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">1.0f<\/span> <span class=\"token operator\">\/<\/span> mass <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1.0f<\/span> <span class=\"token operator\">\/<\/span> other<span class=\"token punctuation\">.<\/span>mass<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            Vector2 impulse <span class=\"token operator\">&#061;<\/span> normal <span class=\"token operator\">*<\/span> j<span class=\"token punctuation\">;<\/span><br \/>\n            velocity <span class=\"token operator\">&#061;<\/span> velocity <span class=\"token operator\">&#043;<\/span> <span class=\"token punctuation\">(<\/span>impulse <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">1.0f<\/span> <span class=\"token operator\">\/<\/span> mass<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            other<span class=\"token punctuation\">.<\/span>velocity <span class=\"token operator\">&#061;<\/span> other<span class=\"token punctuation\">.<\/span>velocity <span class=\"token operator\">&#8211;<\/span> <span class=\"token punctuation\">(<\/span>impulse <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token number\">1.0f<\/span> <span class=\"token operator\">\/<\/span> other<span class=\"token punctuation\">.<\/span>mass<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ Getter\/Setter\u65b9\u6cd5<\/span><br \/>\n    Vector2 <span class=\"token function\">getPosition<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">return<\/span> position<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">void<\/span> <span class=\"token function\">setPosition<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Vector2<span class=\"token operator\">&amp;<\/span> pos<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> position <span class=\"token operator\">&#061;<\/span> pos<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    Vector2 <span class=\"token function\">getVelocity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">return<\/span> velocity<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">void<\/span> <span class=\"token function\">setVelocity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Vector2<span class=\"token operator\">&amp;<\/span> vel<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> velocity <span class=\"token operator\">&#061;<\/span> vel<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> <span class=\"token function\">getMass<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">return<\/span> mass<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> <span class=\"token function\">getRadius<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">return<\/span> radius<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token keyword\">void<\/span> <span class=\"token function\">setRestitution<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> r<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span> restitution <span class=\"token operator\">&#061;<\/span> r<span class=\"token punctuation\">;<\/span> <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PhysicsWorld<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>RigidBody<span class=\"token operator\">&gt;<\/span> bodies<span class=\"token punctuation\">;<\/span><br \/>\n    Vector2 gravity<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">float<\/span> worldWidth<span class=\"token punctuation\">,<\/span> worldHeight<span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token function\">PhysicsWorld<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> width<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span> height<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token operator\">:<\/span> <span class=\"token function\">worldWidth<\/span><span class=\"token punctuation\">(<\/span>width<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">worldHeight<\/span><span class=\"token punctuation\">(<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token function\">gravity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">9.81f<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">addBody<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> RigidBody<span class=\"token operator\">&amp;<\/span> body<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">push_back<\/span><span class=\"token punctuation\">(<\/span>body<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">removeBody<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>index <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token number\">0<\/span> <span class=\"token operator\">&amp;&amp;<\/span> index <span class=\"token operator\">&lt;<\/span> bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">erase<\/span><span class=\"token punctuation\">(<\/span>bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">begin<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span> index<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">setGravity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> Vector2<span class=\"token operator\">&amp;<\/span> g<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        gravity <span class=\"token operator\">&#061;<\/span> g<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">step<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> deltaTime<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u5e94\u7528\u91cd\u529b\u548c\u66f4\u65b0\u7269\u7406\u72b6\u6001<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">auto<\/span><span class=\"token operator\">&amp;<\/span> body <span class=\"token operator\">:<\/span> bodies<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            body<span class=\"token punctuation\">.<\/span><span class=\"token function\">applyForce<\/span><span class=\"token punctuation\">(<\/span>gravity <span class=\"token operator\">*<\/span> body<span class=\"token punctuation\">.<\/span><span class=\"token function\">getMass<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            body<span class=\"token punctuation\">.<\/span><span class=\"token function\">update<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            body<span class=\"token punctuation\">.<\/span><span class=\"token function\">handleBoundaryCollision<\/span><span class=\"token punctuation\">(<\/span>worldWidth<span class=\"token punctuation\">,<\/span> worldHeight<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5904\u7406\u5bf9\u8c61\u95f4\u78b0\u649e<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span>size_t j <span class=\"token operator\">&#061;<\/span> i <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> j <span class=\"token operator\">&lt;<\/span> bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> j<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>bodies<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">checkCollision<\/span><span class=\"token punctuation\">(<\/span>bodies<span class=\"token punctuation\">[<\/span>j<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    bodies<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">resolveCollision<\/span><span class=\"token punctuation\">(<\/span>bodies<span class=\"token punctuation\">[<\/span>j<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">int<\/span> <span class=\"token function\">getBodyCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    RigidBody <span class=\"token function\">getBody<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>index <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token number\">0<\/span> <span class=\"token operator\">&amp;&amp;<\/span> index <span class=\"token operator\">&lt;<\/span> bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> bodies<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token function\">RigidBody<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/\/ \u9ed8\u8ba4\u503c<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">void<\/span> <span class=\"token function\">setBody<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> index<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">const<\/span> RigidBody<span class=\"token operator\">&amp;<\/span> body<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>index <span class=\"token operator\">&gt;&#061;<\/span> <span class=\"token number\">0<\/span> <span class=\"token operator\">&amp;&amp;<\/span> index <span class=\"token operator\">&lt;<\/span> bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            bodies<span class=\"token punctuation\">[<\/span>index<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> body<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6279\u91cf\u83b7\u53d6\u4f4d\u7f6e\u6570\u636e&#xff08;\u4f9b\u6e32\u67d3\u4f7f\u7528&#xff09;<\/span><br \/>\n    std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">getAllPositions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span> positions<span class=\"token punctuation\">;<\/span><br \/>\n        positions<span class=\"token punctuation\">.<\/span><span class=\"token function\">reserve<\/span><span class=\"token punctuation\">(<\/span>bodies<span class=\"token punctuation\">.<\/span><span class=\"token function\">size<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> <span class=\"token keyword\">auto<\/span><span class=\"token operator\">&amp;<\/span> body <span class=\"token operator\">:<\/span> bodies<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            Vector2 pos <span class=\"token operator\">&#061;<\/span> body<span class=\"token punctuation\">.<\/span><span class=\"token function\">getPosition<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            positions<span class=\"token punctuation\">.<\/span><span class=\"token function\">push_back<\/span><span class=\"token punctuation\">(<\/span>pos<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            positions<span class=\"token punctuation\">.<\/span><span class=\"token function\">push_back<\/span><span class=\"token punctuation\">(<\/span>pos<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> positions<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>physics_engine<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>value_object<span class=\"token operator\">&lt;<\/span>Vector2<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;Vector2&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">field<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;x&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Vector2<span class=\"token operator\">::<\/span>x<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">field<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;y&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Vector2<span class=\"token operator\">::<\/span>y<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;dot&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Vector2<span class=\"token operator\">::<\/span>dot<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;magnitude&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Vector2<span class=\"token operator\">::<\/span>magnitude<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;normalized&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>Vector2<span class=\"token operator\">::<\/span>normalized<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>RigidBody<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;RigidBody&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span>constructor<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;applyForce&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>applyForce<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;update&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>update<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getPosition&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>getPosition<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;setPosition&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>setPosition<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getVelocity&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>getVelocity<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;setVelocity&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>setVelocity<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getMass&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>getMass<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getRadius&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>getRadius<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;setRestitution&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>RigidBody<span class=\"token operator\">::<\/span>setRestitution<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>PhysicsWorld<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;PhysicsWorld&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span>constructor<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;addBody&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>PhysicsWorld<span class=\"token operator\">::<\/span>addBody<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;removeBody&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>PhysicsWorld<span class=\"token operator\">::<\/span>removeBody<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;setGravity&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>PhysicsWorld<span class=\"token operator\">::<\/span>setGravity<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;step&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>PhysicsWorld<span class=\"token operator\">::<\/span>step<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getBodyCount&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>PhysicsWorld<span class=\"token operator\">::<\/span>getBodyCount<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getBody&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>PhysicsWorld<span class=\"token operator\">::<\/span>getBody<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;setBody&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>PhysicsWorld<span class=\"token operator\">::<\/span>setBody<span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getAllPositions&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>PhysicsWorld<span class=\"token operator\">::<\/span>getAllPositions<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    emscripten<span class=\"token operator\">::<\/span>register_vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;VectorFloat&#034;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>JavaScript\u6e32\u67d3\u548c\u6e38\u620f\u5faa\u73af&#xff1a;<\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">PhysicsGame<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">canvas<span class=\"token punctuation\">,<\/span> wasmModule<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas <span class=\"token operator\">&#061;<\/span> canvas<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx <span class=\"token operator\">&#061;<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;2d&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>module <span class=\"token operator\">&#061;<\/span> wasmModule<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u521b\u5efa\u7269\u7406\u4e16\u754c<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">this<span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>PhysicsWorld<\/span><span class=\"token punctuation\">(<\/span>canvas<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> canvas<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u8bbe\u7f6e\u91cd\u529b<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">setGravity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> <span class=\"token number\">300<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6dfb\u52a0\u4e00\u4e9b\u7403<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">addRandomBalls<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6e38\u620f\u5faa\u73af<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastTime <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isRunning <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u9f20\u6807\u4ea4\u4e92<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">setupInteraction<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">addRandomBalls<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">count<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> count<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> x <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas<span class=\"token punctuation\">.<\/span>width <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">60<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">30<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> y <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">100<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">50<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> mass <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">5<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> radius <span class=\"token operator\">&#061;<\/span> mass <span class=\"token operator\">*<\/span> <span class=\"token number\">5<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token keyword\">const<\/span> body <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">this<span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>RigidBody<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> mass<span class=\"token punctuation\">,<\/span> radius<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u968f\u673a\u521d\u59cb\u901f\u5ea6<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> vx <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">0.5<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">200<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> vy <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">100<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            body<span class=\"token punctuation\">.<\/span><span class=\"token function\">setVelocity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> vx<span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> vy<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u968f\u673a\u5f39\u6027\u7cfb\u6570<\/span><br \/>\n            body<span class=\"token punctuation\">.<\/span><span class=\"token function\">setRestitution<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">0.5<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">0.3<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">addBody<\/span><span class=\"token punctuation\">(<\/span>body<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">setupInteraction<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;click&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> rect <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getBoundingClientRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> x <span class=\"token operator\">&#061;<\/span> event<span class=\"token punctuation\">.<\/span>clientX <span class=\"token operator\">&#8211;<\/span> rect<span class=\"token punctuation\">.<\/span>left<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> y <span class=\"token operator\">&#061;<\/span> event<span class=\"token punctuation\">.<\/span>clientY <span class=\"token operator\">&#8211;<\/span> rect<span class=\"token punctuation\">.<\/span>top<span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u5728\u70b9\u51fb\u4f4d\u7f6e\u6dfb\u52a0\u65b0\u7403<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> mass <span class=\"token operator\">&#061;<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">random<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">3<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> radius <span class=\"token operator\">&#061;<\/span> mass <span class=\"token operator\">*<\/span> <span class=\"token number\">5<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">15<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> body <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">this<span class=\"token punctuation\">.<\/span>module<span class=\"token punctuation\">.<\/span>RigidBody<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> mass<span class=\"token punctuation\">,<\/span> radius<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            body<span class=\"token punctuation\">.<\/span><span class=\"token function\">setRestitution<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0.8<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">addBody<\/span><span class=\"token punctuation\">(<\/span>body<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u952e\u76d8\u63a7\u5236\u91cd\u529b\u65b9\u5411<\/span><br \/>\n        document<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;keydown&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">switch<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>key<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;ArrowLeft&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">setGravity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">300<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;ArrowRight&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">setGravity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> <span class=\"token number\">300<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> <span class=\"token number\">100<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;ArrowUp&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">setGravity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> <span class=\"token operator\">&#8211;<\/span><span class=\"token number\">300<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039;ArrowDown&#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">setGravity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> <span class=\"token number\">300<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">case<\/span> <span class=\"token string\">&#039; &#039;<\/span><span class=\"token operator\">:<\/span><br \/>\n                    <span class=\"token comment\">\/\/ \u7a7a\u683c\u952e\u91cd\u7f6e<\/span><br \/>\n                    <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">setGravity<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>x<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> y<span class=\"token operator\">:<\/span> <span class=\"token number\">300<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isRunning<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isRunning <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastTime <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">gameLoop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">stop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isRunning <span class=\"token operator\">&#061;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">gameLoop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>isRunning<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">const<\/span> currentTime <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> deltaTime <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>currentTime <span class=\"token operator\">&#8211;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastTime<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">1000.0<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u8f6c\u6362\u4e3a\u79d2<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>lastTime <span class=\"token operator\">&#061;<\/span> currentTime<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7269\u7406\u66f4\u65b0&#xff08;\u56fa\u5b9a\u65f6\u95f4\u6b65\u957f&#xff09;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> fixedTimeStep <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1.0<\/span> <span class=\"token operator\">\/<\/span> <span class=\"token number\">60.0<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">step<\/span><span class=\"token punctuation\">(<\/span>Math<span class=\"token punctuation\">.<\/span><span class=\"token function\">min<\/span><span class=\"token punctuation\">(<\/span>deltaTime<span class=\"token punctuation\">,<\/span> fixedTimeStep<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6e32\u67d3<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6027\u80fd\u7edf\u8ba1<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">updateStats<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">gameLoop<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">render<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u6e05\u9664\u753b\u5e03<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;#1a1a2e&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillRect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas<span class=\"token punctuation\">.<\/span>width<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>canvas<span class=\"token punctuation\">.<\/span>height<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6279\u91cf\u83b7\u53d6\u6240\u6709\u4f4d\u7f6e\u6570\u636e&#xff08;\u51cf\u5c11\u8de8\u8bed\u8a00\u8c03\u7528&#xff09;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> positions <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAllPositions<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> bodyCount <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">getBodyCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6e32\u67d3\u6240\u6709\u7403\u4f53<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> bodyCount<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> x <span class=\"token operator\">&#061;<\/span> positions<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> y <span class=\"token operator\">&#061;<\/span> positions<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> body <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">getBody<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> radius <span class=\"token operator\">&#061;<\/span> body<span class=\"token punctuation\">.<\/span><span class=\"token function\">getRadius<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> mass <span class=\"token operator\">&#061;<\/span> body<span class=\"token punctuation\">.<\/span><span class=\"token function\">getMass<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u6839\u636e\u8d28\u91cf\u8bbe\u7f6e\u989c\u8272<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> hue <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>mass <span class=\"token operator\">\/<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">*<\/span> <span class=\"token number\">360<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">hsl(<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>hue<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">, 70%, 60%)<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">arc<\/span><span class=\"token punctuation\">(<\/span>x<span class=\"token punctuation\">,<\/span> y<span class=\"token punctuation\">,<\/span> radius<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fill<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>            <span class=\"token comment\">\/\/ \u6dfb\u52a0\u9ad8\u5149\u6548\u679c<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;rgba(255, 255, 255, 0.3)&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">beginPath<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">arc<\/span><span class=\"token punctuation\">(<\/span>x <span class=\"token operator\">&#8211;<\/span> radius <span class=\"token operator\">*<\/span> <span class=\"token number\">0.3<\/span><span class=\"token punctuation\">,<\/span> y <span class=\"token operator\">&#8211;<\/span> radius <span class=\"token operator\">*<\/span> <span class=\"token number\">0.3<\/span><span class=\"token punctuation\">,<\/span> radius <span class=\"token operator\">*<\/span> <span class=\"token number\">0.3<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">*<\/span> Math<span class=\"token punctuation\">.<\/span><span class=\"token constant\">PI<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fill<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u6e32\u67d3UI<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">renderUI<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">renderUI<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span>fillStyle <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;white&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span>font <span class=\"token operator\">&#061;<\/span> <span class=\"token string\">&#039;16px monospace&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillText<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">Bodies: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">getBodyCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">25<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillText<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Click to add ball, Arrow keys to control gravity&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">45<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>ctx<span class=\"token punctuation\">.<\/span><span class=\"token function\">fillText<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;Space to reset gravity&#039;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">10<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">65<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token function\">updateStats<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u53ef\u4ee5\u5728\u8fd9\u91cc\u6536\u96c6\u6027\u80fd\u6570\u636e<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>window<span class=\"token punctuation\">.<\/span>performanceStats<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> bodyCount <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>world<span class=\"token punctuation\">.<\/span><span class=\"token function\">getBodyCount<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            window<span class=\"token punctuation\">.<\/span>performanceStats<span class=\"token punctuation\">.<\/span>bodies <span class=\"token operator\">&#061;<\/span> bodyCount<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u4f7f\u7528\u793a\u4f8b<\/span><br \/>\n<span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">initGame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> canvas <span class=\"token operator\">&#061;<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;gameCanvas&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> wasmModule <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">PhysicsModule<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u52a0\u8f7dWASM\u6a21\u5757<\/span><\/p>\n<p>    <span class=\"token keyword\">const<\/span> game <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">PhysicsGame<\/span><span class=\"token punctuation\">(<\/span>canvas<span class=\"token punctuation\">,<\/span> wasmModule<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    game<span class=\"token punctuation\">.<\/span><span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u6027\u80fd\u76d1\u63a7<\/span><br \/>\n    window<span class=\"token punctuation\">.<\/span>performanceStats <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">{<\/span> bodies<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">setInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">Running simulation with <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>window<span class=\"token punctuation\">.<\/span>performanceStats<span class=\"token punctuation\">.<\/span>bodies<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> bodies<\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">5000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316<\/span><br \/>\ndocument<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;DOMContentLoaded&#039;<\/span><span class=\"token punctuation\">,<\/span> initGame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<h3>\u4e03\u3001\u9ad8\u7ea7\u7279\u6027\u4e0e\u672a\u6765\u5c55\u671b<\/h3>\n<h4>7.1 WASI (WebAssembly System Interface)<\/h4>\n<p>WASI\u662fWebAssembly\u7684\u7cfb\u7edf\u63a5\u53e3\u6807\u51c6&#xff0c;\u5b83\u6269\u5c55\u4e86WebAssembly\u7684\u80fd\u529b&#xff0c;\u4f7f\u5176\u80fd\u591f\u5728\u670d\u52a1\u7aef\u548c\u5176\u4ed6\u975e\u6d4f\u89c8\u5668\u73af\u5883\u4e2d\u8fd0\u884c&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ wasi_example.cpp<\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;iostream&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;fstream&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;string&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;filesystem&gt;<\/span><\/span><\/p>\n<p><span class=\"token comment\">\/\/ WASI\u73af\u5883\u4e0b\u7684\u6587\u4ef6\u64cd\u4f5c\u793a\u4f8b<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">FileProcessor<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> std<span class=\"token operator\">::<\/span>string <span class=\"token function\">readFile<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>string<span class=\"token operator\">&amp;<\/span> filename<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        std<span class=\"token operator\">::<\/span>ifstream <span class=\"token function\">file<\/span><span class=\"token punctuation\">(<\/span>filename<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>file<span class=\"token punctuation\">.<\/span><span class=\"token function\">is_open<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> <span class=\"token string\">&#034;Error: Could not open file&#034;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        std<span class=\"token operator\">::<\/span>string <span class=\"token function\">content<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>std<span class=\"token operator\">::<\/span>istreambuf_iterator<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">char<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span>file<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n                           std<span class=\"token operator\">::<\/span>istreambuf_iterator<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">char<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> content<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">bool<\/span> <span class=\"token function\">writeFile<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>string<span class=\"token operator\">&amp;<\/span> filename<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>string<span class=\"token operator\">&amp;<\/span> content<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        std<span class=\"token operator\">::<\/span>ofstream <span class=\"token function\">file<\/span><span class=\"token punctuation\">(<\/span>filename<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>file<span class=\"token punctuation\">.<\/span><span class=\"token function\">is_open<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        file <span class=\"token operator\">&lt;&lt;<\/span> content<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>std<span class=\"token operator\">::<\/span>string<span class=\"token operator\">&gt;<\/span> <span class=\"token function\">listDirectory<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>string<span class=\"token operator\">&amp;<\/span> path<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>std<span class=\"token operator\">::<\/span>string<span class=\"token operator\">&gt;<\/span> files<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> <span class=\"token keyword\">auto<\/span><span class=\"token operator\">&amp;<\/span> entry <span class=\"token operator\">:<\/span> std<span class=\"token operator\">::<\/span>filesystem<span class=\"token operator\">::<\/span><span class=\"token function\">directory_iterator<\/span><span class=\"token punctuation\">(<\/span>path<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                files<span class=\"token punctuation\">.<\/span><span class=\"token function\">push_back<\/span><span class=\"token punctuation\">(<\/span>entry<span class=\"token punctuation\">.<\/span><span class=\"token function\">path<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">filename<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">string<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> std<span class=\"token operator\">::<\/span>exception<span class=\"token operator\">&amp;<\/span> e<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token comment\">\/\/ \u5904\u7406\u9519\u8bef<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> files<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>Node.js\u4e2d\u4f7f\u7528WASI\u6a21\u5757&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ Node.js WASI\u793a\u4f8b<\/span><br \/>\n<span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token constant\">WASI<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;wasi&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> fs <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;fs&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> path <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">require<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;path&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">runWasiModule<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token comment\">\/\/ \u521b\u5efaWASI\u5b9e\u4f8b<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> wasi <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">WASI<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n        args<span class=\"token operator\">:<\/span> process<span class=\"token punctuation\">.<\/span>argv<span class=\"token punctuation\">,<\/span><br \/>\n        env<span class=\"token operator\">:<\/span> process<span class=\"token punctuation\">.<\/span>env<span class=\"token punctuation\">,<\/span><br \/>\n        preopens<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token string\">&#039;\/sandbox&#039;<\/span><span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;\/tmp&#039;<\/span>  <span class=\"token comment\">\/\/ \u5c06\u5bbf\u4e3b\u673a\u76ee\u5f55\u6620\u5c04\u5230WASM\u73af\u5883<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u52a0\u8f7dWASM\u6a21\u5757<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> wasmBuffer <span class=\"token operator\">&#061;<\/span> fs<span class=\"token punctuation\">.<\/span><span class=\"token function\">readFileSync<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;.\/file_processor.wasm&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> wasmModule <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> WebAssembly<span class=\"token punctuation\">.<\/span><span class=\"token function\">compile<\/span><span class=\"token punctuation\">(<\/span>wasmBuffer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u521b\u5efa\u5b9e\u4f8b<\/span><br \/>\n    <span class=\"token keyword\">const<\/span> instance <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> WebAssembly<span class=\"token punctuation\">.<\/span><span class=\"token function\">instantiate<\/span><span class=\"token punctuation\">(<\/span>wasmModule<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        wasi_snapshot_preview1<span class=\"token operator\">:<\/span> wasi<span class=\"token punctuation\">.<\/span>wasiImport<br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    wasi<span class=\"token punctuation\">.<\/span><span class=\"token function\">start<\/span><span class=\"token punctuation\">(<\/span>instance<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token comment\">\/\/ \u73b0\u5728\u53ef\u4ee5\u8c03\u7528WASM\u51fd\u6570\u5904\u7406\u6587\u4ef6\u7cfb\u7edf\u64cd\u4f5c<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>7.2 \u591a\u7ebf\u7a0b\u548c\u5171\u4eab\u5185\u5b58<\/h4>\n<p>WebAssembly\u7684\u591a\u7ebf\u7a0b\u652f\u6301\u901a\u8fc7SharedArrayBuffer\u5b9e\u73b0&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ threaded_computation.cpp<\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/bind.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;emscripten\/threading.h&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;thread&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;vector&gt;<\/span><\/span><br \/>\n<span class=\"token macro property\"><span class=\"token directive-hash\">#<\/span><span class=\"token directive keyword\">include<\/span> <span class=\"token string\">&lt;atomic&gt;<\/span><\/span><\/p>\n<p><span class=\"token keyword\">class<\/span> <span class=\"token class-name\">ParallelProcessor<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n<span class=\"token keyword\">private<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> std<span class=\"token operator\">::<\/span>atomic<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">int<\/span><span class=\"token operator\">&gt;<\/span> completed_tasks<span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">public<\/span><span class=\"token operator\">:<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">void<\/span> <span class=\"token function\">parallelSum<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> data<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> size<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> result<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">int<\/span> num_threads <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span>thread<span class=\"token operator\">::<\/span><span class=\"token function\">hardware_concurrency<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">int<\/span> chunk_size <span class=\"token operator\">&#061;<\/span> size <span class=\"token operator\">\/<\/span> num_threads<span class=\"token punctuation\">;<\/span><\/p>\n<p>        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>std<span class=\"token operator\">::<\/span>thread<span class=\"token operator\">&gt;<\/span> threads<span class=\"token punctuation\">;<\/span><br \/>\n        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token function\">partial_sums<\/span><span class=\"token punctuation\">(<\/span>num_threads<span class=\"token punctuation\">,<\/span> <span class=\"token number\">0.0f<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> num_threads<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">int<\/span> start <span class=\"token operator\">&#061;<\/span> i <span class=\"token operator\">*<\/span> chunk_size<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">int<\/span> end <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>i <span class=\"token operator\">&#061;&#061;<\/span> num_threads <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">?<\/span> size <span class=\"token operator\">:<\/span> start <span class=\"token operator\">&#043;<\/span> chunk_size<span class=\"token punctuation\">;<\/span><\/p>\n<p>            threads<span class=\"token punctuation\">.<\/span><span class=\"token function\">emplace_back<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span>start<span class=\"token punctuation\">,<\/span> end<span class=\"token punctuation\">,<\/span> data<span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>partial_sums<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">float<\/span> sum <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.0f<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> j <span class=\"token operator\">&#061;<\/span> start<span class=\"token punctuation\">;<\/span> j <span class=\"token operator\">&lt;<\/span> end<span class=\"token punctuation\">;<\/span> j<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    sum <span class=\"token operator\">&#043;&#061;<\/span> data<span class=\"token punctuation\">[<\/span>j<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n                partial_sums<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> sum<span class=\"token punctuation\">;<\/span><br \/>\n                completed_tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">fetch_add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u7b49\u5f85\u6240\u6709\u7ebf\u7a0b\u5b8c\u6210<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">auto<\/span><span class=\"token operator\">&amp;<\/span> thread <span class=\"token operator\">:<\/span> threads<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            thread<span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u5408\u5e76\u7ed3\u679c<\/span><br \/>\n        <span class=\"token keyword\">float<\/span> total_sum <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.0f<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span> partial <span class=\"token operator\">:<\/span> partial_sums<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            total_sum <span class=\"token operator\">&#043;&#061;<\/span> partial<span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token operator\">*<\/span>result <span class=\"token operator\">&#061;<\/span> total_sum<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">void<\/span> <span class=\"token function\">parallelMatrixMultiply<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> a<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> b<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">float<\/span><span class=\"token operator\">*<\/span> c<span class=\"token punctuation\">,<\/span><br \/>\n                                     <span class=\"token keyword\">int<\/span> rows_a<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> cols_a<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">int<\/span> cols_b<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">int<\/span> num_threads <span class=\"token operator\">&#061;<\/span> std<span class=\"token operator\">::<\/span>thread<span class=\"token operator\">::<\/span><span class=\"token function\">hardware_concurrency<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> <span class=\"token keyword\">int<\/span> rows_per_thread <span class=\"token operator\">&#061;<\/span> rows_a <span class=\"token operator\">\/<\/span> num_threads<span class=\"token punctuation\">;<\/span><\/p>\n<p>        std<span class=\"token operator\">::<\/span>vector<span class=\"token operator\">&lt;<\/span>std<span class=\"token operator\">::<\/span>thread<span class=\"token operator\">&gt;<\/span> threads<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> t <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> t <span class=\"token operator\">&lt;<\/span> num_threads<span class=\"token punctuation\">;<\/span> t<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">int<\/span> start_row <span class=\"token operator\">&#061;<\/span> t <span class=\"token operator\">*<\/span> rows_per_thread<span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">int<\/span> end_row <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>t <span class=\"token operator\">&#061;&#061;<\/span> num_threads <span class=\"token operator\">&#8211;<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">?<\/span> rows_a <span class=\"token operator\">:<\/span> start_row <span class=\"token operator\">&#043;<\/span> rows_per_thread<span class=\"token punctuation\">;<\/span><\/p>\n<p>            threads<span class=\"token punctuation\">.<\/span><span class=\"token function\">emplace_back<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> i <span class=\"token operator\">&#061;<\/span> start_row<span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> end_row<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                    <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> j <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> j <span class=\"token operator\">&lt;<\/span> cols_b<span class=\"token punctuation\">;<\/span> j<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                        <span class=\"token keyword\">float<\/span> sum <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0.0f<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">int<\/span> k <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> k <span class=\"token operator\">&lt;<\/span> cols_a<span class=\"token punctuation\">;<\/span> k<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n                            sum <span class=\"token operator\">&#043;&#061;<\/span> a<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> cols_a <span class=\"token operator\">&#043;<\/span> k<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">*<\/span> b<span class=\"token punctuation\">[<\/span>k <span class=\"token operator\">*<\/span> cols_b <span class=\"token operator\">&#043;<\/span> j<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n                        <span class=\"token punctuation\">}<\/span><br \/>\n                        c<span class=\"token punctuation\">[<\/span>i <span class=\"token operator\">*<\/span> cols_b <span class=\"token operator\">&#043;<\/span> j<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> sum<span class=\"token punctuation\">;<\/span><br \/>\n                    <span class=\"token punctuation\">}<\/span><br \/>\n                <span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><\/p>\n<p>        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">auto<\/span><span class=\"token operator\">&amp;<\/span> thread <span class=\"token operator\">:<\/span> threads<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            thread<span class=\"token punctuation\">.<\/span><span class=\"token function\">join<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">int<\/span> <span class=\"token function\">getCompletedTasks<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">return<\/span> completed_tasks<span class=\"token punctuation\">.<\/span><span class=\"token function\">load<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>std<span class=\"token operator\">::<\/span>atomic<span class=\"token operator\">&lt;<\/span><span class=\"token keyword\">int<\/span><span class=\"token operator\">&gt;<\/span> ParallelProcessor<span class=\"token operator\">::<\/span>completed_tasks<span class=\"token punctuation\">{<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token function\">EMSCRIPTEN_BINDINGS<\/span><span class=\"token punctuation\">(<\/span>threaded_computation<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    emscripten<span class=\"token operator\">::<\/span>class_<span class=\"token operator\">&lt;<\/span>ParallelProcessor<span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;ParallelProcessor&#034;<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;parallelSum&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ParallelProcessor<span class=\"token operator\">::<\/span>parallelSum<span class=\"token punctuation\">,<\/span><br \/>\n                       emscripten<span class=\"token operator\">::<\/span><span class=\"token function\">allow_raw_pointers<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;parallelMatrixMultiply&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ParallelProcessor<span class=\"token operator\">::<\/span>parallelMatrixMultiply<span class=\"token punctuation\">,<\/span><br \/>\n                       emscripten<span class=\"token operator\">::<\/span><span class=\"token function\">allow_raw_pointers<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br \/>\n        <span class=\"token punctuation\">.<\/span><span class=\"token function\">class_function<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#034;getCompletedTasks&#034;<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&amp;<\/span>ParallelProcessor<span class=\"token operator\">::<\/span>getCompletedTasks<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u7f16\u8bd1\u591a\u7ebf\u7a0b\u7248\u672c&#xff1a;<\/p>\n<p>em&#043;&#043; -pthread -s <span class=\"token assign-left variable\">USE_PTHREADS<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">1<\/span> -s <span class=\"token assign-left variable\">PTHREAD_POOL_SIZE<\/span><span class=\"token operator\">&#061;<\/span><span class=\"token number\">4<\/span> <span class=\"token punctuation\">\\\\<\/span><br \/>\n    -O3 -lembind threaded_computation.cpp -o threaded.js<\/p>\n<p>JavaScript\u7aef\u7684\u591a\u7ebf\u7a0b\u8c03\u7528&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u591a\u7ebf\u7a0bWebAssembly\u4f7f\u7528<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">MultiThreadProcessor<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">constructor<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>workers <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">null<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">async<\/span> <span class=\"token function\">init<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">numWorkers <span class=\"token operator\">&#061;<\/span> navigator<span class=\"token punctuation\">.<\/span>hardwareConcurrency <span class=\"token operator\">||<\/span> <span class=\"token number\">4<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u4e3b\u7ebf\u7a0b\u52a0\u8f7d\u6a21\u5757<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token function\">ThreadedModule<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u521b\u5efaWorker\u7ebf\u7a0b<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> numWorkers<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token keyword\">const<\/span> worker <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Worker<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;threaded-worker.js&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n            <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>workers<span class=\"token punctuation\">.<\/span><span class=\"token function\">push<\/span><span class=\"token punctuation\">(<\/span>worker<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><\/p>\n<p>    <span class=\"token keyword\">async<\/span> <span class=\"token function\">processLargeArray<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">data<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ \u5206\u914d\u5171\u4eab\u5185\u5b58<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> sharedBuffer <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">SharedArrayBuffer<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">*<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> sharedArray <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Float32Array<\/span><span class=\"token punctuation\">(<\/span>sharedBuffer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        sharedArray<span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u4f7f\u7528WebAssembly\u591a\u7ebf\u7a0b\u5904\u7406<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> resultBuffer <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">SharedArrayBuffer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> result <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Float32Array<\/span><span class=\"token punctuation\">(<\/span>resultBuffer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">const<\/span> dataPtr <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule<span class=\"token punctuation\">.<\/span><span class=\"token function\">_malloc<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">.<\/span>length <span class=\"token operator\">*<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> resultPtr <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule<span class=\"token punctuation\">.<\/span><span class=\"token function\">_malloc<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule<span class=\"token punctuation\">.<\/span><span class=\"token constant\">HEAPF32<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">set<\/span><span class=\"token punctuation\">(<\/span>sharedArray<span class=\"token punctuation\">,<\/span> dataPtr <span class=\"token operator\">\/<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ \u8c03\u7528\u5e76\u884c\u6c42\u548c<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule<span class=\"token punctuation\">.<\/span>ParallelProcessor<span class=\"token punctuation\">.<\/span><span class=\"token function\">parallelSum<\/span><span class=\"token punctuation\">(<\/span>dataPtr<span class=\"token punctuation\">,<\/span> data<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">,<\/span> resultPtr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">const<\/span> finalResult <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule<span class=\"token punctuation\">.<\/span><span class=\"token constant\">HEAPF32<\/span><span class=\"token punctuation\">[<\/span>resultPtr <span class=\"token operator\">\/<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule<span class=\"token punctuation\">.<\/span><span class=\"token function\">_free<\/span><span class=\"token punctuation\">(<\/span>dataPtr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>wasmModule<span class=\"token punctuation\">.<\/span><span class=\"token function\">_free<\/span><span class=\"token punctuation\">(<\/span>resultPtr<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> finalResult<span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<h4>7.3 WebAssembly\u751f\u6001\u53d1\u5c55\u8d8b\u52bf<\/h4>\n<p>WebAssembly\u751f\u6001\u7cfb\u7edf\u6b63\u5728\u5feb\u901f\u53d1\u5c55&#xff0c;\u65b0\u7684\u5de5\u5177\u548c\u6846\u67b6\u4e0d\u65ad\u6d8c\u73b0&#xff1a;<\/p>\n<p>\u65b0\u5174\u7f16\u7a0b\u8bed\u8a00\u652f\u6301&#xff1a;<\/p>\n<ul>\n<li>Rust&#xff1a;\u901a\u8fc7wasm-pack\u63d0\u4f9b\u51fa\u8272\u7684WebAssembly\u652f\u6301<\/li>\n<li>AssemblyScript&#xff1a;\u4e13\u95e8\u4e3aWebAssembly\u8bbe\u8ba1\u7684TypeScript\u5b50\u96c6<\/li>\n<li>Go&#xff1a;\u901a\u8fc7GOARCH&#061;wasm GOOS&#061;js\u7f16\u8bd1\u5230WebAssembly<\/li>\n<li>C#\/.NET&#xff1a;\u901a\u8fc7Blazor WebAssembly<\/li>\n<\/ul>\n<p>\u5de5\u5177\u94fe\u6539\u8fdb&#xff1a;<\/p>\n<p><span class=\"token comment\"># Rust &#043; wasm-pack\u793a\u4f8b<\/span><br \/>\nwasm-pack build &#8211;target web &#8211;out-dir pkg<\/p>\n<p><span class=\"token comment\"># AssemblyScript\u793a\u4f8b  <\/span><br \/>\nasc assembly\/index.ts &#8211;target release &#8211;optimize<\/p>\n<p><span class=\"token comment\"># Go WebAssembly\u7f16\u8bd1<\/span><br \/>\n<span class=\"token assign-left variable\">GOOS<\/span><span class=\"token operator\">&#061;<\/span>js <span class=\"token assign-left variable\">GOARCH<\/span><span class=\"token operator\">&#061;<\/span>wasm go build -o main.wasm main.go<\/p>\n<p>\u7ec4\u4ef6\u6a21\u578b&#xff08;Component Model&#xff09;&#xff1a;<br \/>\nWebAssembly\u7ec4\u4ef6\u6a21\u578b\u662f\u4e0b\u4e00\u4ee3WebAssembly\u6807\u51c6&#xff0c;\u652f\u6301\u66f4\u597d\u7684\u8bed\u8a00\u4e92\u64cd\u4f5c\u6027\u548c\u6a21\u5757\u7ec4\u5408&#xff1a;<\/p>\n<p>\/\/ interface definition (WIT format)<br \/>\npackage example:calculator<\/p>\n<p>world calculator {<br \/>\n  export add: func(a: f64, b: f64) -&gt; f64<br \/>\n  export multiply: func(a: f64, b: f64) -&gt; f64<\/p>\n<p>  import logger: interface {<br \/>\n    log: func(message: string)<br \/>\n  }<br \/>\n}<\/p>\n<h3>\u516b\u3001\u603b\u7ed3\u4e0e\u5b9e\u8df5\u5efa\u8bae<\/h3>\n<h4>8.1 \u6280\u672f\u9009\u578b\u6307\u5bfc\u539f\u5219<\/h4>\n<p>\u9009\u62e9WebAssembly\u7684\u5173\u952e\u8003\u8651\u56e0\u7d20&#xff1a;<\/p>\n<p>\u9002\u7528\u573a\u666f&#xff1a;<\/p>\n<li>\u8ba1\u7b97\u5bc6\u96c6\u578b\u5e94\u7528&#xff1a;\u79d1\u5b66\u8ba1\u7b97\u3001\u56fe\u50cf\u5904\u7406\u3001\u97f3\u89c6\u9891\u7f16\u89e3\u7801<\/li>\n<li>\u6027\u80fd\u5173\u952e\u5e94\u7528&#xff1a;\u6e38\u620f\u5f15\u64ce\u3001\u5b9e\u65f6\u6570\u636e\u5904\u7406\u3001\u52a0\u5bc6\u89e3\u5bc6<\/li>\n<li>\u4ee3\u7801\u590d\u7528\u9700\u6c42&#xff1a;\u5df2\u6709C\/C&#043;&#043;\u4ee3\u7801\u5e93\u9700\u8981\u5728Web\u73af\u5883\u4e2d\u4f7f\u7528<\/li>\n<li>\u8de8\u5e73\u53f0\u9700\u6c42&#xff1a;\u540c\u4e00\u5957\u4ee3\u7801\u9700\u8981\u5728\u591a\u4e2a\u5e73\u53f0\u8fd0\u884c<\/li>\n<p>\u6027\u80fd\u8bc4\u4f30&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u6027\u80fd\u57fa\u51c6\u6d4b\u8bd5\u6846\u67b6<\/span><br \/>\n<span class=\"token keyword\">class<\/span> <span class=\"token class-name\">WASMBenchmark<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">static<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token function\">comparePerformance<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">jsFunc<span class=\"token punctuation\">,<\/span> wasmFunc<span class=\"token punctuation\">,<\/span> testData<span class=\"token punctuation\">,<\/span> iterations <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">1000<\/span><\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n        <span class=\"token comment\">\/\/ JavaScript\u7248\u672c\u6d4b\u8bd5<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> jsStart <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> iterations<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">jsFunc<\/span><span class=\"token punctuation\">(<\/span>testData<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> jsTime <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> jsStart<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token comment\">\/\/ WebAssembly\u7248\u672c\u6d4b\u8bd5<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> wasmStart <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> iterations<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">&#043;&#043;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            <span class=\"token function\">wasmFunc<\/span><span class=\"token punctuation\">(<\/span>testData<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token keyword\">const<\/span> wasmTime <span class=\"token operator\">&#061;<\/span> performance<span class=\"token punctuation\">.<\/span><span class=\"token function\">now<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#8211;<\/span> wasmStart<span class=\"token punctuation\">;<\/span><\/p>\n<p>        <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n            jsTime<span class=\"token punctuation\">,<\/span><br \/>\n            wasmTime<span class=\"token punctuation\">,<\/span><br \/>\n            speedup<span class=\"token operator\">:<\/span> jsTime <span class=\"token operator\">\/<\/span> wasmTime<span class=\"token punctuation\">,<\/span><br \/>\n            recommendation<span class=\"token operator\">:<\/span> jsTime <span class=\"token operator\">\/<\/span> wasmTime <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">1.5<\/span> <span class=\"token operator\">?<\/span> <span class=\"token string\">&#039;Use WASM&#039;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;Consider JS&#039;<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p>\u6210\u672c\u6548\u76ca\u5206\u6790&#xff1a;<\/p>\n<ul>\n<li>\u5f00\u53d1\u6210\u672c&#xff1a;\u9700\u8981C\/C&#043;&#043;\u548cWebAssembly\u6280\u80fd<\/li>\n<li>\u7ef4\u62a4\u6210\u672c&#xff1a;\u8de8\u8bed\u8a00\u8c03\u8bd5\u7684\u590d\u6742\u6027<\/li>\n<li>\u6027\u80fd\u6536\u76ca&#xff1a;\u901a\u5e38\u53ef\u83b7\u5f971.5-10\u500d\u6027\u80fd\u63d0\u5347<\/li>\n<li>\u6587\u4ef6\u5927\u5c0f&#xff1a;WASM\u6587\u4ef6\u901a\u5e38\u6bd4\u7b49\u4ef7JavaScript\u66f4\u5c0f<\/li>\n<\/ul>\n<h4>8.2 \u5f00\u53d1\u56e2\u961f\u7684\u6280\u80fd\u5efa\u8bbe<\/h4>\n<p>\u5b66\u4e60\u8def\u5f84\u5efa\u8bae&#xff1a;<\/p>\n<li>\n<p>\u57fa\u7840\u9636\u6bb5&#xff08;1-2\u5468&#xff09;&#xff1a;<\/p>\n<ul>\n<li>\u7406\u89e3WebAssembly\u57fa\u672c\u6982\u5ff5\u548c\u5de5\u4f5c\u539f\u7406<\/li>\n<li>\u638c\u63e1Emscripten\u5de5\u5177\u94fe\u4f7f\u7528<\/li>\n<li>\u5b8c\u6210\u7b80\u5355\u7684C\/C&#043;&#043;\u5230WASM\u7f16\u8bd1\u793a\u4f8b<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u8fdb\u9636\u9636\u6bb5&#xff08;2-4\u5468&#xff09;&#xff1a;<\/p>\n<ul>\n<li>\u5b66\u4e60JavaScript\u4e0eWebAssembly\u7684\u4ea4\u4e92\u673a\u5236<\/li>\n<li>\u638c\u63e1\u5185\u5b58\u7ba1\u7406\u548c\u6027\u80fd\u4f18\u5316\u6280\u5de7<\/li>\n<li>\u5b8c\u6210\u4e2d\u7b49\u590d\u6742\u5ea6\u7684\u9879\u76ee\u5b9e\u8df5<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u9ad8\u7ea7\u9636\u6bb5&#xff08;1-2\u4e2a\u6708&#xff09;&#xff1a;<\/p>\n<ul>\n<li>\u6df1\u5165\u7406\u89e3WebAssembly\u8fd0\u884c\u65f6<\/li>\n<li>\u638c\u63e1\u591a\u7ebf\u7a0b\u548cSIMD\u4f18\u5316<\/li>\n<li>\u80fd\u591f\u89e3\u51b3\u590d\u6742\u7684\u8de8\u8bed\u8a00\u96c6\u6210\u95ee\u9898<\/li>\n<\/ul>\n<\/li>\n<p>\u56e2\u961f\u534f\u4f5c\u7b56\u7565&#xff1a;<\/p>\n<p><span class=\"token comment\">\/\/ \u4ee3\u7801\u7ec4\u7ec7\u793a\u4f8b<\/span><br \/>\nproject<span class=\"token operator\">\/<\/span><br \/>\n\u251c\u2500\u2500 src<span class=\"token operator\">\/<\/span><br \/>\n\u2502   \u251c\u2500\u2500 cpp<span class=\"token operator\">\/<\/span>              # <span class=\"token constant\">C<\/span><span class=\"token operator\">&#043;&#043;<\/span>\u6e90\u7801<br \/>\n\u2502   \u2502   \u251c\u2500\u2500 core<span class=\"token operator\">\/<\/span><br \/>\n\u2502   \u2502   \u2514\u2500\u2500 bindings<span class=\"token operator\">\/<\/span><br \/>\n\u2502   \u251c\u2500\u2500 js<span class=\"token operator\">\/<\/span>               # JavaScript\u4ee3\u7801<br \/>\n\u2502   \u2502   \u251c\u2500\u2500 wasm<span class=\"token operator\">&#8211;<\/span>loader<span class=\"token punctuation\">.<\/span>js<br \/>\n\u2502   \u2502   \u2514\u2500\u2500 app<span class=\"token punctuation\">.<\/span>js<br \/>\n\u2502   \u2514\u2500\u2500 types<span class=\"token operator\">\/<\/span>            # TypeScript\u7c7b\u578b\u5b9a\u4e49<br \/>\n\u251c\u2500\u2500 build<span class=\"token operator\">\/<\/span>                # \u6784\u5efa\u811a\u672c<br \/>\n\u251c\u2500\u2500 tests<span class=\"token operator\">\/<\/span>                # \u6d4b\u8bd5\u7528\u4f8b<br \/>\n\u2514\u2500\u2500 docs<span class=\"token operator\">\/<\/span>                 # \u6587\u6863<\/p>\n<p>\u7248\u672c\u7ba1\u7406\u548cCI\/CD&#xff1a;<\/p>\n<p><span class=\"token comment\"># GitHub Actions\u793a\u4f8b<\/span><br \/>\n<span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> Build and Test WASM<br \/>\n<span class=\"token key atrule\">on<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">[<\/span>push<span class=\"token punctuation\">,<\/span> pull_request<span class=\"token punctuation\">]<\/span><\/p>\n<p><span class=\"token key atrule\">jobs<\/span><span class=\"token punctuation\">:<\/span><br \/>\n  <span class=\"token key atrule\">build-wasm<\/span><span class=\"token punctuation\">:<\/span><br \/>\n    <span class=\"token key atrule\">runs-on<\/span><span class=\"token punctuation\">:<\/span> ubuntu<span class=\"token punctuation\">&#8211;<\/span>latest<br \/>\n    <span class=\"token key atrule\">steps<\/span><span class=\"token punctuation\">:<\/span><br \/>\n      <span class=\"token punctuation\">&#8211;<\/span> <span class=\"token key atrule\">uses<\/span><span class=\"token punctuation\">:<\/span> actions\/checkout&#064;v2<\/p>\n<p>      <span class=\"token punctuation\">&#8211;<\/span> <span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> Setup Emscripten<br \/>\n        <span class=\"token key atrule\">uses<\/span><span class=\"token punctuation\">:<\/span> mymindstorm\/setup<span class=\"token punctuation\">&#8211;<\/span>emsdk&#064;v11<br \/>\n        <span class=\"token key atrule\">with<\/span><span class=\"token punctuation\">:<\/span><br \/>\n          <span class=\"token key atrule\">version<\/span><span class=\"token punctuation\">:<\/span> latest<\/p>\n<p>      <span class=\"token punctuation\">&#8211;<\/span> <span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> Build WASM module<br \/>\n        <span class=\"token key atrule\">run<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">|<\/span><span class=\"token scalar string\"><br \/>\n          emcc &#8211;version<br \/>\n          mkdir build &amp;&amp; cd build<br \/>\n          emcmake cmake ..<br \/>\n          emmake make -j4<\/span><\/p>\n<p>      <span class=\"token punctuation\">&#8211;<\/span> <span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> Run tests<br \/>\n        <span class=\"token key atrule\">run<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">|<\/span><span class=\"token scalar string\"><br \/>\n          npm install<br \/>\n          npm test<\/span><\/p>\n<p>      <span class=\"token punctuation\">&#8211;<\/span> <span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> Upload artifacts<br \/>\n        <span class=\"token key atrule\">uses<\/span><span class=\"token punctuation\">:<\/span> actions\/upload<span class=\"token punctuation\">&#8211;<\/span>artifact&#064;v2<br \/>\n        <span class=\"token key atrule\">with<\/span><span class=\"token punctuation\">:<\/span><br \/>\n          <span class=\"token key atrule\">name<\/span><span class=\"token punctuation\">:<\/span> wasm<span class=\"token punctuation\">&#8211;<\/span>modules<br \/>\n          <span class=\"token key atrule\">path<\/span><span class=\"token punctuation\">:<\/span> build\/<span class=\"token important\">*.wasm<\/span><\/p>\n<h3>\u7ed3\u8bed<\/h3>\n<p>WebAssembly\u4ee3\u8868\u4e86Web\u5e73\u53f0\u7684\u4e00\u4e2a\u91cd\u8981\u91cc\u7a0b\u7891&#xff0c;\u5b83\u8ba9\u6211\u4eec\u80fd\u591f\u5728\u4fdd\u6301Web\u5f00\u653e\u6027\u548c\u5b89\u5168\u6027\u7684\u540c\u65f6&#xff0c;\u83b7\u5f97\u63a5\u8fd1\u539f\u751f\u7684\u6027\u80fd\u3002\u901a\u8fc7C\/C&#043;&#043;\u4e0eJavaScript\u7684\u534f\u4f5c\u5f00\u53d1&#xff0c;\u6211\u4eec\u53ef\u4ee5\u6784\u5efa\u51fa\u65e2\u9ad8\u6548\u53c8\u7075\u6d3b\u7684Web\u5e94\u7528\u3002<\/p>\n<p>\u968f\u7740WebAssembly\u6807\u51c6\u7684\u4e0d\u65ad\u5b8c\u5584\u548c\u5de5\u5177\u94fe\u7684\u6301\u7eed\u6539\u8fdb&#xff0c;\u8fd9\u9879\u6280\u672f\u5fc5\u5c06\u5728\u66f4\u591a\u9886\u57df\u53d1\u6325\u91cd\u8981\u4f5c\u7528\u3002\u4ece\u6e38\u620f\u5f00\u53d1\u5230\u79d1\u5b66\u8ba1\u7b97&#xff0c;\u4ece\u56fe\u50cf\u5904\u7406\u5230\u4eba\u5de5\u667a\u80fd&#xff0c;WebAssembly\u6b63\u5728\u91cd\u65b0\u5b9a\u4e49Web\u5e94\u7528\u7684\u53ef\u80fd\u6027\u8fb9\u754c\u3002<\/p>\n<p>\u4f5c\u4e3a\u5f00\u53d1\u8005&#xff0c;\u6211\u4eec\u5e94\u8be5\u79ef\u6781\u62e5\u62b1\u8fd9\u9879\u6280\u672f&#xff0c;\u5728\u9002\u5f53\u7684\u573a\u666f\u4e2d\u5408\u7406\u5e94\u7528&#xff0c;\u4e3a\u7528\u6237\u63d0\u4f9b\u66f4\u597d\u7684Web\u4f53\u9a8c\u3002\u540c\u65f6&#xff0c;\u4e5f\u8981\u4fdd\u6301\u5bf9\u65b0\u6280\u672f\u53d1\u5c55\u7684\u654f\u611f\u5ea6&#xff0c;\u8ddf\u4e0aWebAssembly\u751f\u6001\u7cfb\u7edf\u7684\u6f14\u8fdb\u6b65\u4f10\u3002<\/p>\n<p>WebAssembly\u4e0d\u4ec5\u4ec5\u662f\u4e00\u9879\u6280\u672f&#xff0c;\u66f4\u662f\u8fde\u63a5\u4e0d\u540c\u7f16\u7a0b\u8bed\u8a00\u548c\u5e73\u53f0\u7684\u6865\u6881&#xff0c;\u5b83\u8ba9\u6211\u4eec\u7684\u4ee3\u7801\u80fd\u591f\u8de8\u8d8a\u8bed\u8a00\u8fb9\u754c&#xff0c;\u5728\u66f4\u5e7f\u9614\u7684\u821e\u53f0\u4e0a\u53d1\u6325\u4ef7\u503c\u3002\u5728\u8fd9\u4e2a\u591a\u8bed\u8a00\u534f\u4f5c\u7684\u65b0\u65f6\u4ee3&#xff0c;\u638c\u63e1WebAssembly\u5f00\u53d1\u6280\u80fd\u5c06\u6210\u4e3a\u73b0\u4ee3Web\u5f00\u53d1\u8005\u7684\u91cd\u8981\u7ade\u4e89\u4f18\u52bf\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb790\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf26\u6b21\u3002WebAssembly(WASM)\u4f5c\u4e3a\u73b0\u4ee3Web\u6027\u80fd\u9769\u547d\u7684\u6838\u5fc3\u6280\u672f\uff0c\u6253\u7834\u4e86\u7cfb\u7edf\u7ea7\u7f16\u7a0b\u8bed\u8a00\u4e0eWeb\u5e73\u53f0\u95f4\u7684\u58c1\u5792\u3002\u672c\u6587\u7cfb\u7edf\u4ecb\u7ecd\u4e86C\/C++\u4e0eJavaScript\u901a\u8fc7WASM\u5b9e\u73b0\u9ad8\u6548\u534f\u4f5c\u7684\u5f00\u53d1\u5b9e\u8df5\u3002\u9996\u5148\u5256\u6790\u4e86WASM\u7684\u6280\u672f\u7279\u6027\uff0c\u5305\u62ec\u5176\u4f4e\u5ef6\u8fdf\u3001\u5b89\u5168\u6c99\u7bb1\u548c\u8de8\u8bed\u8a00\u652f\u6301\u7b49\u4f18\u52bf\u3002\u968f\u540e\u8be6\u7ec6\u8bb2\u89e3\u4e86\u5f00\u53d1\u73af\u5883\u642d\u5efa\uff0c\u91cd\u70b9\u4ecb\u7ecdEmscripten\u5de5\u5177\u94fe\u7684\u914d\u7f6e\u4e0e\u4f18\u5316\u7f16\u8bd1\u9009\u9879\u3002\u5728\u5b9e\u8df5\u5c42\u9762\uff0c\u6587\u7ae0\u5c55\u793a\u4e86\u4ece\u7b80\u5355\u6570\u5b66\u5e93\u5230\u590d\u6742\u9879\u76ee\u7684\u7f16\u8bd1\u6d41\u7a0b\uff0c\u5e76\u6df1\u5165\u63a2\u8ba8\u4e86JavaScript\u4e0e<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[55,174,187],"topic":[],"class_list":{"0":"post-52670","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-server","7":"tag-c","9":"tag-javascript"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/52670.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb790\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf26\u6b21\u3002WebAssembly(WASM)\u4f5c\u4e3a\u73b0\u4ee3Web\u6027\u80fd\u9769\u547d\u7684\u6838\u5fc3\u6280\u672f\uff0c\u6253\u7834\u4e86\u7cfb\u7edf\u7ea7\u7f16\u7a0b\u8bed\u8a00\u4e0eWeb\u5e73\u53f0\u95f4\u7684\u58c1\u5792\u3002\u672c\u6587\u7cfb\u7edf\u4ecb\u7ecd\u4e86C\/C++\u4e0eJavaScript\u901a\u8fc7WASM\u5b9e\u73b0\u9ad8\u6548\u534f\u4f5c\u7684\u5f00\u53d1\u5b9e\u8df5\u3002\u9996\u5148\u5256\u6790\u4e86WASM\u7684\u6280\u672f\u7279\u6027\uff0c\u5305\u62ec\u5176\u4f4e\u5ef6\u8fdf\u3001\u5b89\u5168\u6c99\u7bb1\u548c\u8de8\u8bed\u8a00\u652f\u6301\u7b49\u4f18\u52bf\u3002\u968f\u540e\u8be6\u7ec6\u8bb2\u89e3\u4e86\u5f00\u53d1\u73af\u5883\u642d\u5efa\uff0c\u91cd\u70b9\u4ecb\u7ecdEmscripten\u5de5\u5177\u94fe\u7684\u914d\u7f6e\u4e0e\u4f18\u5316\u7f16\u8bd1\u9009\u9879\u3002\u5728\u5b9e\u8df5\u5c42\u9762\uff0c\u6587\u7ae0\u5c55\u793a\u4e86\u4ece\u7b80\u5355\u6570\u5b66\u5e93\u5230\u590d\u6742\u9879\u76ee\u7684\u7f16\u8bd1\u6d41\u7a0b\uff0c\u5e76\u6df1\u5165\u63a2\u8ba8\u4e86JavaScript\u4e0e\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/52670.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-11T09:19:02+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/52670.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/52670.html\",\"name\":\"C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2025-08-11T09:19:02+00:00\",\"dateModified\":\"2025-08-11T09:19:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/52670.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/52670.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/52670.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/52670.html","og_locale":"zh_CN","og_type":"article","og_title":"C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb790\u6b21\uff0c\u70b9\u8d5e18\u6b21\uff0c\u6536\u85cf26\u6b21\u3002WebAssembly(WASM)\u4f5c\u4e3a\u73b0\u4ee3Web\u6027\u80fd\u9769\u547d\u7684\u6838\u5fc3\u6280\u672f\uff0c\u6253\u7834\u4e86\u7cfb\u7edf\u7ea7\u7f16\u7a0b\u8bed\u8a00\u4e0eWeb\u5e73\u53f0\u95f4\u7684\u58c1\u5792\u3002\u672c\u6587\u7cfb\u7edf\u4ecb\u7ecd\u4e86C\/C++\u4e0eJavaScript\u901a\u8fc7WASM\u5b9e\u73b0\u9ad8\u6548\u534f\u4f5c\u7684\u5f00\u53d1\u5b9e\u8df5\u3002\u9996\u5148\u5256\u6790\u4e86WASM\u7684\u6280\u672f\u7279\u6027\uff0c\u5305\u62ec\u5176\u4f4e\u5ef6\u8fdf\u3001\u5b89\u5168\u6c99\u7bb1\u548c\u8de8\u8bed\u8a00\u652f\u6301\u7b49\u4f18\u52bf\u3002\u968f\u540e\u8be6\u7ec6\u8bb2\u89e3\u4e86\u5f00\u53d1\u73af\u5883\u642d\u5efa\uff0c\u91cd\u70b9\u4ecb\u7ecdEmscripten\u5de5\u5177\u94fe\u7684\u914d\u7f6e\u4e0e\u4f18\u5316\u7f16\u8bd1\u9009\u9879\u3002\u5728\u5b9e\u8df5\u5c42\u9762\uff0c\u6587\u7ae0\u5c55\u793a\u4e86\u4ece\u7b80\u5355\u6570\u5b66\u5e93\u5230\u590d\u6742\u9879\u76ee\u7684\u7f16\u8bd1\u6d41\u7a0b\uff0c\u5e76\u6df1\u5165\u63a2\u8ba8\u4e86JavaScript\u4e0e","og_url":"https:\/\/www.wsisp.com\/helps\/52670.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2025-08-11T09:19:02+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"27 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/52670.html","url":"https:\/\/www.wsisp.com\/helps\/52670.html","name":"C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2025-08-11T09:19:02+00:00","dateModified":"2025-08-11T09:19:02+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/52670.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/52670.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/52670.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"C\/C++\u4e0eJavaScript\u7684WebAssembly\u534f\u4f5c\u5f00\u53d1\u6307\u5357"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/52670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=52670"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/52670\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=52670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=52670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=52670"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=52670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}