\u77e9\u9635<\/a>\u662f\u4e00\u4e2a\u7531 m\u884c\uff08row\uff09 n\u5217\uff08column\uff09\u5143\u7d20\u6392\u5217\u6210\u7684\u77e9\u5f62\u9635\u5217\u3002\u77e9\u9635\u91cc\u7684\u5143\u7d20\u53ef\u4ee5\u662f\u6570\u5b57\u3001\u7b26\u53f7\u6216\u6570\u5b66\u5f0f\u3002<\/p>\n \u5927\u5c0f\u76f8\u540c\uff08\u884c\u6570\u5217\u6570\u90fd\u76f8\u540c\uff09\u7684\u77e9\u9635\u4e4b\u95f4\u53ef\u4ee5\u76f8\u4e92\u52a0\u51cf\uff0c\u5177\u4f53\u662f\u5bf9\u6bcf\u4e2a\u4f4d\u7f6e\u4e0a\u7684\u5143\u7d20\u505a\u52a0\u51cf\u6cd5\u3002\u77e9\u9635\u7684\u4e58\u6cd5\u5219\u8f83\u4e3a\u590d\u6742\u3002\u4e24\u4e2a\u77e9\u9635\u53ef\u4ee5\u76f8\u4e58\uff0c\u5f53\u4e14\u4ec5\u5f53\u7b2c\u4e00\u4e2a\u77e9\u9635\u7684\u5217\u6570\u7b49\u4e8e\u7b2c\u4e8c\u4e2a\u77e9\u9635\u7684\u884c\u6570\u3002\u77e9\u9635\u7684\u4e58\u6cd5\u6ee1\u8db3\u7ed3\u5408\u5f8b\u548c\u5206\u914d\u5f8b\uff0c\u4f46\u4e0d\u6ee1\u8db3\u4ea4\u6362\u5f8b\u3002\n<\/p><\/blockquote>\n
![\"\u6e38\u620f\u5185\u6838\u57fa\u7840\"](\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/TGC5.png\")
<\/p>\n
\u4ee5\u4e0a\u6765\u81ea\u7ef4\u57fa\u767e\u79d1\u5bf9\u77e9\u9635\u7684\u89e3\u91ca\uff08\u56fe\u4f8b\u4ec5\u4f9b\u6b23\u8d4f\uff09\uff0c\u6bd4\u8f83\u7b80\u5355\u3002\u77e9\u9635\u4e5f\u662f\u6e38\u620f\u4e2d\u6700\u5e38\u7528\u7684\u529f\u80fd\uff0c\u63a5\u4e0b\u6765\u5c01\u88c5\u4e00\u4e2a4 x 4\u7684\u77e9\u9635\uff1a<\/p>\n
export default class Matrix4x4{\n private _data: number[] = [];\n public constructor(){\n this._data = [\n 1, 0, 0, 0,\n 0, 1, 0, 0,\n 0, 0, 1, 0,\n 0, 0, 0, 1\n ];\n }\n\n public get data(): number[]{\n return this._data;\n }\n\n public static identity(): Matrix4x4{\n return new Matrix4x4();\n }\n\n public static orthographic(left: number, right: number, bottom: number, top:number, nearClip: number, farClip: number){\n let m = new Matrix4x4();\n\n let lr: number = 1.0 \/ (left - right);\n let bt: number = 1.0 \/ (bottom - top);\n let nf: number = 1.0 \/ (nearClip - farClip);\n\n m._data[0] = -2.0 * lr;\n m._data[5] = -2.0 * bt;\n m._data[10] = -2.0 * nf;\n\n m._data[12] = (left + right) * lr;\n m._data[13] = (top + bottom) * bt;\n m._data[14] = (farClip + nearClip) * nf;\n\n return m;\n }\n\n public static translation(position: Vector3): Matrix4x4{\n let m = new Matrix4x4();\n\n m._data[12] = position.x;\n m._data[13] = position.y;\n m._data[14] = position.z;\n\n return m;\n }\n}\n<\/code><\/pre>\n![\"\u6e38\u620f\u5185\u6838\u57fa\u7840\"](\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/TGC4.png\")
<\/p>\n
\u4f4d\u7f6e<\/h3>\n
\u77e9\u9635\u9700\u8981\u4f4d\u7f6e\uff0c\u7136\u540e\u5c01\u88c5\u4e00\u4e2aVector3\uff0cx\uff0cy\uff0cz\uff1a<\/p>\n
export default class Vector3{\n private _x!: number;\n private _y!: number;\n private _z!: number;\n\n public constructor(x: number = 0, y: number = 0, z: number = 0){\n this._x = x;\n this._y = y;\n this._z = z;\n }\n\n public get x(): number{\n return this._x;\n }\n public set x(value: number){\n this._x = value;\n }\n\n public get y(): number{\n return this._y;\n }\n public set y(value: number){\n this._y = value;\n }\n\n public get z(): number{\n return this._z;\n }\n public set z(value: number){\n this._z = value;\n }\n\n public toArray(): number[]{\n return [this._x, this._y, this._z];\n }\n\n public toFloat32Array(): Float32Array{\n return new Float32Array(this.toArray());\n }\n}\n<\/code><\/pre>\n\u4f7f\u7528getter\u548csetter\u6765\u83b7\u53d6x\uff0cy\uff0cz\u7684\u4f4d\u7f6e\u3002<\/p>\n
\u6d4b\u8bd5<\/h3>\n
\u4fee\u6539Sprite\u7684\u5bbd\u9ad8\uff1a<\/p>\n
public position: Vector3 = new Vector3();\n\npublic constructor(name?: string, width: number = 100, height: number = 100){\n \/\/...\n}\n<\/code><\/pre>\n![\"\u6e38\u620f\u5185\u6838\u57fa\u7840\"](\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/TGC3.png\")
<\/p>\n
\u6700\u540e\u6d4b\u8bd5\u53ef\u7528\u6027\uff1a<\/p>\n
\/\/...\n\nexport default class Core{\n\/\/...\n\n public start(): void {\n \/\/...\n\n this._projection = Matrix4x4.orthographic(0, this._canvas.width, 0, this._canvas.height, -1.0, 100.0);\n\n this._sprite = new Sprite(\"testName\");\n this._sprite.load();\n this._sprite.position.x = 200;\n\n \/\/...\n }\n\n public resize():void {\n if(this._canvas){\n this._canvas.width = window.innerWidth;\n this._canvas.height = window.innerHeight;\n\n gl.viewport(-1, 1, -1, 1);\/\/\u4fee\u6539\u4f4d\u7f6e\n }\n }\n\n public loadShaders(): void{\n let vertexShaderSource = `\n attribute vec3 a_position;\n\n uniform mat4 u_projection;\n uniform mat4 u_model;\n\n void main(){\n gl_Position = u_projection * u_model * vec4(a_position, 1.0);\n }\n `;\n\n \/\/...\n }\n\n private loop():void {\n \/\/...\n\n let projectionPosition = this._shader.getUniformLocation(\"u_projection\");\n gl.uniformMatrix4fv(projectionPosition, false, new Float32Array(this._projection.data));\n\n let modelLocation = this._shader.getUniformLocation(\"u_model\");\n gl.uniformMatrix4fv(modelLocation, false, new Float32Array(Matrix4x4.identity().data));\n\n \/\/...\n }\n}\n<\/code><\/pre>\n\u5c31\u80fd\u770b\u5230\u4e0b\u9762\u7684\u573a\u666f\uff1a<\/p>\n
![\"\u6e38\u620f\u5185\u6838\u57fa\u7840\"](\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/TGC7.png\")
<\/p>\n\n
code enjoy! 🧐🧐🧐<\/p>\n
\u4f5c\u8005\uff1aindeex<\/p>\n
\u94fe\u63a5\uff1ahttps:\/\/indeex.cc<\/a><\/p>\n\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n
\n","protected":false},"excerpt":{"rendered":"\u77e9\u9635 \u6570\u5b66\u4e0a\uff0c\u4e00\u4e2a m \u00d7 n\u7684\u77e9\u9635\u662f\u4e00\u4e2a\u7531 m\u884c\uff08row\uff09 n\u5217\uff08column\uff09\u5143\u7d20\u6392\u5217\u6210\u7684\u77e9\u5f62\u9635Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/166"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/166\/revisions\/169"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\u6e38\u620f\u5185\u6838\u57fa\u7840\"](\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/TGC6.png\")
<\/p>\n