{"id":2204,"date":"2024-11-10T16:49:17","date_gmt":"2024-11-10T08:49:17","guid":{"rendered":"https:\/\/fwq.ai\/blog\/2204\/"},"modified":"2024-11-10T16:49:17","modified_gmt":"2024-11-10T08:49:17","slug":"webgl-%e5%9f%ba%e7%a1%80%e9%9d%9e%e8%92%99%e7%9a%ae%e6%a8%a1%e5%9e%8b","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/2204\/","title":{"rendered":"[WebGL] [\u57fa\u7840]\u975e\u8499\u76ae\u6a21\u578b"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/001\/246\/273\/173068960137819.jpg\" class=\"aligncenter\" title=\"[WebGL] [\u57fa\u7840]\u975e\u8499\u76ae\u6a21\u578b\u63d2\u56fe\" alt=\"[WebGL] [\u57fa\u7840]\u975e\u8499\u76ae\u6a21\u578b\u63d2\u56fe\" \/><\/p>\n<h2> 1. <strong>gl_position = \u6295\u5f71 * \u89c6\u56fe * \u6a21\u578b * \u4f4d\u7f6e;<\/strong> <\/h2>\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>\u4ece\u672c\u5730\/\u6a21\u578b\u4f4d\u7f6e\u5230\u6700\u7ec8\u526a\u8f91\u7a7a\u95f4\u7684\u4f4d\u7f6e<\/strong><\/p>\n<p><strong>\u4e09\u53d8\u6362maxtrix\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p><strong>\u6295\u5f71<\/strong>\uff1a\u6295\u5f71\u53d8\u6362\u77e9\u9635<\/p>\n<p>\u5c06\u89c6\u56fe\u5750\u6807\u7cfb\u53d8\u6362\u4e3a\u88c1\u526a\u7a7a\u95f4\u5750\u6807\u7cfb<\/p>\n<\/li>\n<li>\n<p><strong>\u89c6\u56fe<\/strong>\uff1a\u89c6\u56fe\u53d8\u6362\u77e9\u9635<\/p>\n<p>\u5c06\u6a21\u578b\u5750\u6807\u7cfb\u53d8\u6362\u4e3a\u89c6\u56fe\u5750\u6807\u7cfb\uff08\u79fb\u52a8\u76f8\u673a\u4f4d\u7f6e\uff09<\/p>\n<\/li>\n<li>\n<p><strong>\u6a21\u578b<\/strong>\uff1a\u6a21\u578b\u8f6c\u6362\u77e9\u9635<\/p>\n<p>\u5c06\u672c\u5730\u5750\u6807\u8f6c\u6362\u4e3a\u6a21\u578b\u5750\u6807\u7cfb\/\u6e38\u620f\u4e16\u754c\u5750\u6807\u7cfb\uff08\u7edd\u5bf9\u5750\u6807\uff09<\/p>\n<\/li>\n<li>\n<p><strong>postition<\/strong>\uff1a\u9876\u70b9\u7684\u5c40\u90e8\u5750\u6807<\/p>\n<\/li>\n<\/ul>\n<p>\u5c40\u90e8\u5750\u6807\u7cfb\uff08\u76f8\u5bf9\u5750\u6807\u7cfb\uff09<\/p>\n<ul>\n<li>\u6ce8\u610f\uff1a<\/li>\n<li>\n<p>\u4f4d\u7f6e\u548c\u6a21\u578b\u5750\u6807\u7cfb\u539f\u70b9\u7531\u5f00\u53d1\u8005\u6839\u636e\u9700\u6c42\u5b9a\u4e49\u3002<\/p>\n<\/li>\n<li>\n<p>\u5206\u522b\u5bf9\u5e94\u6a21\u578b\u548c\u4f4d\u7f6e\u77e9\u9635\u6570\u636e\u7684\u4e16\u754c\u5750\u6807\u7cfb\u548c\u6a21\u578b\u5750\u6807\u7cfb\uff1a<\/p>\n<\/li>\n<\/ul>\n<pre>\n\n            absolute(world) y+ axis\n                 y (0, 1, 0)\n               |\n               |                           local(model) y+ axis\n               |                             |  \/\n               |                             | \/\n               |                             |\n               |                  ---------- o (1, 0, 1)  \u2190 local(model) origin ---- local x+ axis\n               |                           \/ |  \n               |                          \/  |\n               |                         \/   |\n               |                        \/    |\n               |                       \/     | \n               |______________________\/______|__________ x (1, 0, 0)  absolute(world) x+ axis\n              \/                     local(model) z+ axis\n             \/\n            \/\n           \/\n          z (0, 0, 1)\n   absolute(world) z+ axis\n<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<h2> 2. webgl \u9ed8\u8ba4\u4f7f\u7528\u5217\u4e3b\u987a\u5e8f\uff0c\u800c ++ \u9ed8\u8ba4\u4f7f\u7528\u884c\u4e3b\u987a\u5e8f\u3002 <\/h2>\n<p>\u5728webgl\u4e2d\uff0c\u77e9\u9635\u6309<strong>\u5217\u4e3b\u987a\u5e8f<\/strong>\u5b58\u50a8\uff0c\u8fd9\u4f1a\u5f71\u54cd\u77e9\u9635\u548c\u8ba1\u7b97\u987a\u5e8f\u3002\u8fd9\u79cd\u5b58\u50a8\u65b9\u6cd5\u5f71\u54cd\u77e9\u9635\u5728 webgl \u4e2d\u7684\u5b9a\u4e49\u548c\u4f7f\u7528\u65b9\u5f0f\u3002\u4ee5\u4e0b\u662f\u5728 webgl \u4e2d\u4f7f\u7528\u5217\u4e3b\u77e9\u9635\u65f6\u7684\u4e00\u4e9b\u5e38\u89c1\u505a\u6cd5\uff1a<\/p>\n<ol>\n<li> <strong>\u77e9\u9635\u5b9a\u4e49\u548c\u6392\u5217<\/strong> ## \u77e9\u9635\u5b9a\u4e49\u548c\u6392\u5217 \u4f7f\u7528\u5217\u4f18\u5148\u5b58\u50a8\u65f6\uff0c\u77e9\u9635\u7684\u5217\u6309\u987a\u5e8f\u5b58\u50a8\u3002\u4f8b\u5982\uff0c\u6309\u5217\u4f18\u5148\u987a\u5e8f\u6392\u5217\u7684 4&#215;4 \u77e9\u9635 <strong>m<\/strong> \u5982\u4e0b\u6240\u793a\uff1a<\/li>\n<\/ol>\n<p>m = | m11 m21 m31 m41 | m11 m21 m31 m41 | m11 m21 m31 m41 | m11 m21 m31 m41 | m12 m22 m32 m42 | m12 m22 m32 m42 | m12 m22 m32 m42 | m12 m22 m32 m42 | m13 m23 m33 m43 | m13 m23 m33 m43 | m13 m23 m33 m43 | m13 m23 m33 m43 | m14 m24 m34 m44 |<\/p>\n<p>\u5728 webgl \u4e2d\uff0c\u8be5\u77e9\u9635\u8868\u793a\u4e3a\u6309\u5217\u4f18\u5148\u987a\u5e8f\u7684\u4e00\u7ef4\u6570\u7ec4\uff1a<\/p>\n<pre>   const matrix = [\n     m11, m21, m31, m41,  \/\/ first column\n     m12, m22, m32, m42,  \/\/ second column\n     m13, m23, m33, m43,  \/\/ third column\n     m14, m24, m34, m44   \/\/ fourth column\n   ];\n<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<ol>\n<li> <strong>\u4e00\u81f4\u7684\u77e9\u9635\u548c\u6570\u7ec4\u683c\u5f0f<\/strong> \u5c06\u77e9\u9635\u6570\u636e\u4f20\u9012\u7ed9 webgl \u7740\u8272\u5668\u65f6\uff0c\u5fc5\u987b\u4f7f\u7528\u4e00\u81f4\u7684\u683c\u5f0f\u3002\u4f8b\u5982\uff0c\u5f53\u4f20\u9012 4&#215;4 \u8f6c\u6362\u77e9\u9635\u65f6\uff0cwebgl \u7684uniformmatrix4fv \u51fd\u6570\u671f\u671b\u6570\u7ec4\u6309\u5217\u4f18\u5148\u987a\u5e8f\u6392\u5217\uff1a <\/li>\n<\/ol>\n<pre>   gl.uniformmatrix4fv(location, false, matrix);\n<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u8fd9\u91cc\uff0c false \u8868\u793a\u77e9\u9635\u4e0d\u5e94\u8be5\u8f6c\u7f6e\u3002\u7531\u4e8e webgl \u9ed8\u8ba4\u4f7f\u7528\u5217\u4f18\u5148\u987a\u5e8f\uff0c\u8bf7\u786e\u4fdd\u6570\u636e\u683c\u5f0f\u7b26\u5408\u6b64\u8981\u6c42\uff0c\u56e0\u4e3a javascript \u7684\u6807\u51c6\u6570\u5b66\u5e93\u53ef\u80fd\u9ed8\u8ba4\u4f7f\u7528\u884c\u4f18\u5148\u987a\u5e8f\u3002<\/p>\n<ol>\n<li> <strong>\u77e9\u9635\u4e58\u6cd5\u987a\u5e8f<\/strong> \u5b9e\u9645\u4e0a\uff0c\u5217\u4e3b\u987a\u5e8f\u4f1a\u5f71\u54cd\u77e9\u9635\u7684\u4e58\u6cd5\u987a\u5e8f\u3002\u5728\u6b64\u7cfb\u7edf\u4e2d\uff0c\u77e9\u9635\u76f8\u4e58<strong>\u4ece\u53f3\u5230\u5de6<\/strong>\uff0c\u8fd9\u610f\u5473\u7740\u9996\u5148\u5e94\u7528\u6700\u540e\u4e00\u4e2a\u53d8\u6362\u3002\u4f8b\u5982\uff1a<\/li>\n<\/ol>\n<p>\u6240\u5f97\u77e9\u9635<strong>m<\/strong>\u53ef\u4ee5\u8868\u793a\u4e3a\u53d8\u6362\u77e9\u9635<strong>t<\/strong>\u3001<strong>r<\/strong>\u548c<strong>s<\/strong>\u7684\u4e58\u79ef\uff1a<\/p>\n<p><strong>m<\/strong> = <strong>t<\/strong> \u22c5 <strong>r<\/strong> \u22c5 <strong>s<\/strong><\/p>\n<p>\u5728\u6b64\u7b49\u5f0f\u4e2d\uff1a<\/p>\n<ul>\n<li> <strong>s<\/strong> \u662f\u7f29\u653e\u77e9\u9635\uff0c<\/li>\n<li> <strong>r<\/strong> \u662f\u65cb\u8f6c\u77e9\u9635\uff0c<\/li>\n<li> <strong>t<\/strong> \u662f\u5e73\u79fb\u77e9\u9635\u3002<\/li>\n<\/ul>\n<p>\u6309\u7167\u5217\u4f18\u5148\u987a\u5e8f\uff0c\u6b64\u5e8f\u5217\u9996\u5148\u5e94\u7528\u7f29\u653e\uff0c\u7136\u540e\u5e94\u7528\u65cb\u8f6c\uff0c\u6700\u540e\u5e94\u7528\u5e73\u79fb\u3002<\/p>\n<ol>\n<li> <strong>\u4f7f\u7528\u5b9e\u7528\u7a0b\u5e8f\u5e93<\/strong> \u4f7f\u7528 glmatrix \u7b49\u5e93\u53ef\u4ee5\u7b80\u5316 webgl \u4e2d\u7684\u77e9\u9635\u8fd0\u7b97\u3002\u8fd9\u4e9b\u5e93\u901a\u5e38\u9075\u5faa\u5217\u4e3b\u987a\u5e8f\uff0c\u7b26\u5408 webgl \u7684\u8981\u6c42\u5e76\u907f\u514d\u624b\u52a8\u77e9\u9635\u683c\u5f0f\u8c03\u6574\u7684\u9700\u8981\u3002\u4f8b\u5982\uff1a<\/li>\n<\/ol>\n<p>let modelmatrix = mat4.create();\/\/ \u521b\u5efa\u5355\u4f4d\u77e9\u9635<\/p>\n<pre>   let modelMatrix = mat4.create();\/\/ create a Identity matrix\n\/\/M = T \u22c5 R \u22c5 S the principle of mutiply of matrix is from right to left &lt;----- caused by colum major order\n   mat4.translate(modelMatrix, modelMatrix, [x, y, z]); \/\/ Translation\n   mat4.rotate(modelMatrix, modelMatrix, angle, [0, 1, 0]); \/\/ Rotation\n   mat4.scale(modelMatrix, modelMatrix, [sx, sy, sz]); \/\/ Scaling\n<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<ol>\n<li> <strong>\u8c03\u8bd5\u548c\u8f6c\u6362<\/strong> \u4e86\u89e3\u5217\u4e3b\u5b58\u50a8\u6709\u52a9\u4e8e\u8c03\u8bd5\u77e9\u9635\u8ba1\u7b97\u3002\u5982\u679c\u77e9\u9635\u7ed3\u679c\u662f\u610f\u5916\u7684\uff0c\u8bf7\u68c0\u67e5\u7740\u8272\u5668\u4e2d\u7684\u6570\u636e\u6392\u5217\u662f\u5426\u4e0e\u5217\u4f18\u5148\u987a\u5e8f\u5339\u914d\u3002<\/li>\n<\/ol>\n<p>\u4ee5\u4e0a\u5c31\u662f[WebGL] [\u57fa\u7840]\u975e\u8499\u76ae\u6a21\u578b\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. gl_position = \u6295\u5f71 * \u89c6\u56fe * \u6a21\u578b * \u4f4d\u7f6e; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\u4ece\u672c\u5730\/\u6a21\u578b\u4f4d\u7f6e\u5230\u6700\u7ec8\u526a\u8f91\u7a7a\u95f4\u7684\u4f4d\u7f6e \u4e09\u53d8\u6362maxtrix\uff1a \u6295\u5f71\uff1a\u6295\u5f71\u53d8\u6362\u77e9\u9635 \u5c06\u89c6\u56fe\u5750\u6807\u7cfb\u53d8\u6362\u4e3a\u88c1\u526a\u7a7a\u95f4\u5750\u6807\u7cfb \u89c6\u56fe\uff1a\u89c6\u56fe\u53d8\u6362\u77e9\u9635 \u5c06\u6a21\u578b\u5750\u6807\u7cfb\u53d8\u6362\u4e3a\u89c6\u56fe\u5750\u6807\u7cfb\uff08\u79fb\u52a8\u76f8\u673a\u4f4d\u7f6e\uff09 \u6a21\u578b\uff1a\u6a21\u578b\u8f6c\u6362\u77e9\u9635 \u5c06\u672c\u5730\u5750\u6807\u8f6c\u6362\u4e3a\u6a21\u578b\u5750\u6807\u7cfb\/\u6e38\u620f\u4e16\u754c\u5750\u6807\u7cfb\uff08\u7edd\u5bf9\u5750\u6807\uff09 postition\uff1a\u9876\u70b9\u7684\u5c40\u90e8\u5750\u6807 \u5c40\u90e8\u5750\u6807\u7cfb\uff08\u76f8\u5bf9\u5750\u6807\u7cfb\uff09 \u6ce8\u610f\uff1a \u4f4d\u7f6e\u548c\u6a21\u578b\u5750\u6807\u7cfb\u539f\u70b9\u7531\u5f00\u53d1\u8005\u6839\u636e\u9700\u6c42\u5b9a\u4e49\u3002 \u5206\u522b\u5bf9\u5e94\u6a21\u578b\u548c\u4f4d\u7f6e\u77e9\u9635\u6570\u636e\u7684\u4e16\u754c\u5750\u6807\u7cfb\u548c\u6a21\u578b\u5750\u6807\u7cfb\uff1a absolute(world) y+ axis y (0, 1, 0) | | local(model) y+ axis | | \/ | | \/ | | | &#8212;&#8212;&#8212;- o (1, 0, 1) \u2190 local(model) origin &#8212;- local x+ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-2204","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=2204"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2204\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=2204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=2204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=2204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}