{"id":307,"date":"2019-09-28T15:36:35","date_gmt":"2019-09-28T07:36:35","guid":{"rendered":"http:\/\/www.eolstudy.com\/?p=307"},"modified":"2020-08-16T14:26:05","modified_gmt":"2020-08-16T06:26:05","slug":"%e5%90%8c%e6%b5%8e%e5%a4%a7%e5%ad%a6cs100433-computer-graphics-autumn-2019-assignment-1","status":"publish","type":"post","link":"https:\/\/www.eolstudy.com\/index.php\/2019\/09\/recommendation\/307\/","title":{"rendered":"Computer Graphics (Autumn 2019) Assignment 1"},"content":{"rendered":"\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

1 What is a graphics pipeline?<\/strong><\/p>\n\n\n\n

\u7b54\uff1a<\/p>\n\n\n\n

      Graphics pipeline<\/strong> \u662f\u56fe\u5f62\u6e32\u67d3\u6d41\u6c34\u7ebf<\/strong>\u3002<\/p>\n\n\n\n

      \u4e00\u4e9b\u8d44\u6599\u5c06\u5176\u7ffb\u8bd1\u4e3a\u201c\u56fe\u5f62\u6e32\u67d3\u7ba1\u7ebf<\/strong>\u201d\uff0c\u4e2a\u4eba\u4e0d\u662f\u592a\u559c\u6b22\u8fd9\u6837\u7684\u7ffb\u8bd1\u2014\u2014\u628a\u5b83\u7406\u89e3\u4e3a\u201c\u6d41\u6c34\u7ebf\u201d\u4e4b\u540e\u4fbf\u8c41\u7136\u5f00\u6717\u3002Graphics pipeline \u5c06\u56fe\u5f62\u6e32\u67d3\u4efb\u52a1\u5212\u5206\u4e3a\u82e5\u5e72\u4e2a\u5c0f\u4efb\u52a1\uff0c\u540e\u4e00\u4e2a\u4efb\u52a1\u7684\u5b9e\u65bd\u5f80\u5f80\u4f9d\u8d56\u4e8e\u524d\u4e00\u4e2a\u4efb\u52a1\u7684\u5b8c\u6210\uff0c\u5404\u4e2a\u4efb\u52a1\u5f7c\u6b64\u8fde\u63a5\u5f62\u6210\u4e86\u4e00\u6761\u6e32\u67d3\u6d41\u6c34\u7ebf\u3002<\/p>\n\n\n\n

      \u53e6\u5916\u901a\u8fc7\u67e5\u9605\u4e00\u4e9b\u8d44\u6599\uff0c\u53d1\u73b0 Graphics pipeline \u5e76\u975e\u6709\u4e25\u683c\u7684\u5212\u5206\uff0c\u4e0d\u540c\u7684\u8d44\u6599\u4f1a\u6709\u4e0d\u540c\u7684\u5212\u5206\u65b9\u6cd5\u3002\u4e00\u822c\u6765\u8bf4\u5c06 Graphics pipeline \u5212\u5206\u4e3a\u4ee5\u4e0b\u56db\u4e2a\u9636\u6bb5\uff1a\u5e94\u7528\u7a0b\u5e8f\u9636\u6bb5\uff08Application\uff09\u3001\u51e0\u4f55\u5904\u7406\u9636\u6bb5\uff08Geometry Processing\uff09\u3001\u5149\u6805\u5316\uff08Rasterization\uff09\u548c\u50cf\u7d20\u5904\u7406\u9636\u6bb5\uff08Pixel Processing\uff09<\/strong>\u3002\u5e94\u7528\u7a0b\u5e8f\u9636\u6bb5<\/strong>\u901a\u5e38\u662f\u5728CPU\u7aef\u8fdb\u884c\u5904\u7406\uff0c\u5305\u62ec\u78b0\u649e\u68c0\u6d4b\u3001\u52a8\u753b\u7269\u7406\u6a21\u62df\u4ee5\u53ca\u89c6\u690e\u4f53\u5254\u9664\u7b49\u4efb\u52a1\uff0c\u8fd9\u4e2a\u9636\u6bb5\u4f1a\u5c06\u6570\u636e\u9001\u5230\u6e32\u67d3\u7ba1\u7ebf\u4e2d\uff1b\u51e0\u4f55\u5904\u7406\u9636\u6bb5<\/strong>\u4e3b\u8981\u6267\u884c\u9876\u70b9\u7740\u8272\u5668\u3001\u6295\u5f71\u53d8\u6362\u3001\u88c1\u526a\u548c\u5c4f\u5e55\u6620\u5c04\u7684\u529f\u80fd\uff1b\u5149\u6805\u5316\u9636\u6bb5<\/strong>\u5c06\u56fe\u5143\u79bb\u6563\u5316\u7247\u6bb5\uff0c\u53d8\u6210\u4e00\u4e2a\u4e2a\u542b\u6709\u4fe1\u606f\u7684\u70b9\uff1b\u50cf\u7d20\u5904\u7406\u9636\u6bb5<\/strong>\u5305\u62ec\u50cf\u7d20\u7740\u8272\u548c\u6df7\u5408\u7684\u529f\u80fd\u3002\u5bf9\u6bd4\u5404\u7c7b\u8d44\u6599\u53ef\u4ee5\u53d1\u73b0\uff0c\u867d\u7136\u7ba1\u7ebf\u7684\u5212\u5206\u7c92\u5ea6\u4e0d\u4e00\u6837\uff0c\u4f46\u662f\u6bcf\u4e2a\u9636\u6bb5\u7684\u5177\u4f53\u529f\u80fd\u5176\u5b9e\u662f\u5dee\u4e0d\u591a\u7684\uff0c\u539f\u7406\u4e5f\u662f\u4e00\u6837\u7684\uff0c\u5e76\u6ca1\u6709\u592a\u5927\u7684\u5dee\u5f02\u3002<\/p>\n\n\n\n

      \u4e0b\u56fe\u5219\u662f\u53e6\u4e00\u79cd\u5212\u5206\u65b9\u5f0f\uff0c\u84dd\u8272\u90e8\u5206\u4ee3\u8868\u7684\u662f\u53ef\u4ee5\u81ea\u5b9a\u4e49\u7684\u7740\u8272\u5668\u7684\u90e8\u5206\u3002<\/p>\n\n\n\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/www.eolstudy.com\/wp-content\/uploads\/2019\/09\/v2-1e286dd517c717e3f1c48792275f7e87_hd.jpg\"<\/figure>
\uff08\u84dd\u8272\u90e8\u5206\u4ee3\u8868\u7684\u662f\u53ef\u4ee5\u81ea\u5b9a\u4e49\u7684\u7740\u8272\u5668\u7684\u90e8\u5206\uff09 <\/figcaption><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

2 What are vertex, primitive and fragment?<\/strong><\/p>\n\n\n\n

\u7b54\uff1a<\/p>\n\n\n\n

      \u9876\u70b9\uff08Vertex\uff09<\/strong>\u662f\u5750\u6807\u7684\u6570\u636e\u7684\u96c6\u5408\uff0c\u5b83\u53ef\u4ee5\u5305\u542b\u4efb\u4f55\u6709\u7528\u7684\u7684\u6570\u636e\uff0c\u5305\u62ec\u4f4d\u7f6e\u4fe1\u606f\u3001\u989c\u8272\u4fe1\u606f\u7b49\u3002<\/p>\n\n\n\n

      \u56fe\u5143\uff08Primitive\uff09<\/strong> \u5219\u544a\u8bc9 OpenGL \u8fd9\u4e9b\u9876\u70b9\u6570\u636e\u6240\u8868\u793a\u7684\u6e32\u67d3\u7c7b\u578b\u2014\u2014\u6bd4\u5982\u4e00\u4e2a\u70b9\u3001\u4e00\u4e2a\u4e09\u89d2\u5f62\u3001\u6216\u662f\u4ec5\u4ec5\u662f\u4e00\u6761\u7ebf\u3002<\/p>\n\n\n\n

      \u7247\u6bb5\uff08Fragment\uff09<\/strong>\u5728\u5404\u7c7b\u8d44\u6599\u4e2d\u90fd\u4e0e\u7247\u6bb5\u7740\u8272\u5668\uff08Fragment Shader\uff09\u4e00\u8d77\u51fa\u73b0\u3002\u5b83\u662f\u4f9b\u7247\u6bb5\u7740\u8272\u5668\u4f7f\u7528\u7684\u50cf\u7d20\u9635\u5217\uff0c\u4e2a\u4eba\u5c06\u5176\u7406\u89e3\u4e3a\u4e00\u4e2a\u6ca1\u6709\u6e32\u67d3\u597d\u7684\u201c\u5e27\u201d\u3002\u5b83\u662f\u8fd9\u6837\u751f\u6210\u7684\uff1a\u51e0\u4f55\u7740\u8272\u5668\uff08Geometry Shader\uff09-> \u5149\u6805\u5316\u9636\u6bb5\uff08Rasterization Stage\uff09–\u5f97\u5230\u7247\u6bb5<\/strong>–> \u7247\u6bb5\u7740\u8272\u5668\uff08Fragment Shader\uff09->\u2026\u2026<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

3 What are geometry and topology?<\/strong><\/p>\n\n\n\n

\u7b54\uff1a<\/p>\n\n\n\n

      \u51e0\u4f55\uff08geometry\uff09<\/strong>\u662f\u6307\u5404\u4e2a\u9876\u70b9\u6240\u7ec4\u6210\u7684\u51e0\u4f55\u5f62\u4f53\uff0c\u5f80\u5f80\u5728\u51e0\u4f55\u5904\u7406\u9636\u6bb5\uff08Geometry Processor\uff09\u8d77\u4f5c\u7528\u3002\u5728\u8fd9\u4e2a\u9636\u6bb5\uff0c\u56fe\u5143\u7684\u5b8c\u6574\u6570\u636e\uff08\u6bd4\u5982\uff1a\u6240\u6709\u7684\u9876\u70b9\u6570\u636e\uff09\u548c\u76f8\u90bb\u9876\u70b9\u7684\u6570\u636e\u5168\u90e8\u90fd\u63d0\u4f9b\u7ed9\u7740\u8272\u5668\uff08shader\uff09\uff0c\u4f7f\u5176\u5fc5\u987b\u7737\u987e\u66f4\u591a\u7684\u4fe1\u606f\uff0c\u5305\u62ec\u9664\u4e86\u9876\u70b9\u672c\u8eab\u7684\u5176\u4ed6\u7684\u4e00\u4e9b\u989d\u5916\u7684\u66f4\u5168\u9762\u5b8c\u6574\u7684\u4fe1\u606f\u3002\u51e0\u4f55\u5904\u7406\u5668\u8fd8\u53ef\u4ee5\u5c06\u8f93\u51fa\u7684\u56fe\u5f62\u62d3\u6251\u7ed3\u6784\u8f6c\u6362\u6210\u5728 draw call \u4e2d\u9009\u62e9\u7684\u53e6\u4e00\u79cd\u7ed3\u6784\u3002<\/p>\n\n\n\n

      \u7531\u4e0a\u6587\u53ef\u77e5\uff0c\u62d3\u6251\uff08topology\uff09<\/strong>\u4e3a\u5404\u4e2a\u9876\u70b9\u7684\u7ec4\u6210\u65b9\u5f0f\u2014\u2014\u5b83\u4eec\u662f\u4ee5\u4ec0\u4e48\u987a\u5e8f\u8fde\u63a5\u5728\u4e00\u8d77\u7684\u3001\u5b83\u4eec\u7ec4\u6210\u4e86\u4e00\u4e2a\u600e\u6837\u7684\u56fe\u5f62\u7b49\u7b49\u3002<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

4 What happens when the viewport is enlarged? Why?<\/strong><\/p>\n\n\n\n

\u7b54\uff1a<\/p>\n\n\n\n

      \u56fe\u50cf\u4f1a\u7b49\u6bd4\u4f8b\u5728\u53d8\u5927\u7684\u7a97\u53e3\u91cc\u53d8\u5927\u3002\u89c6\u91ce\u4e0d\u4f1a\u53d8\u5316\u3002<\/p>\n\n\n\n

      \u56e0\u4e3a\u6539\u53d8 viewport \u7684\u5927\u5c0f\uff0c\u5b9e\u9645\u4e0a\u53ea\u6539\u53d8\u4e86\u89c6\u53e3\u4e2d\u7269\u4f53\u5411\u5c4f\u5e55\u50cf\u7d20\u4e4b\u95f4\u7684\u6620\u5c04\u5173\u7cfb\uff0c\u5e76\u6ca1\u6709\u6539\u53d8\u89c6\u53e3\u89c2\u5bdf\u8303\u56f4\u7684\u5927\u5c0f\u3002<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

5 What happens when the clipping window is enlarged? Why?<\/strong><\/p>\n\n\n\n

\u7b54\uff1a<\/p>\n\n\n\n

      \u89c6\u91ce\u91cc\u53ef\u88ab\u89c2\u5bdf\u7684\u7269\u4f53\u4f1a\u53d8\u591a\uff0c\u89c6\u91ce\u8303\u56f4\u53d8\u5927\uff0c\u4f46\u5c4f\u5e55\u7a97\u53e3\u4e2d\u7684\u50cf\u7d20\u4e0d\u4f1a\u53d8\u5316\u3002<\/p>\n\n\n\n

      \u56e0\u4e3a\u88c1\u526a\u8303\u56f4\u53d8\u5927\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3a\u6709\u66f4\u591a\u8303\u56f4\u5185\u7684\u7269\u4f53\u80fd\u88ab\u865a\u62df\u6444\u50cf\u673a\u62cd\u6444\u4e0b\u6765\u3002<\/p>\n\n\n\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/www.eolstudy.com\/wp-content\/uploads\/2019\/09\/perspective_frustum.png\"<\/figure>
\uff08clipping \u793a\u610f\u56fe\uff09<\/figcaption><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

6 How to represent a Solid object in computer graphics?<\/strong><\/p>\n\n\n\n

\u7b54\uff1a<\/p>\n\n\n\n

      \u5c06\u7269\u4f53\uff08object\uff09\u7684\u5404\u4e2a\u6570\u636e\u53d1\u9001\u7ed9 GPU\uff0c\u5e76\u544a\u8bc9 GPU \u5982\u4f55\u89e3\u8bfb\u8fd9\u4e9b\u6570\u636e\uff0c\u901a\u8fc7\u8fd9\u4e9b\u6570\u636e\u548c\u89e3\u8bfb\u65b9\u5f0f\u5c31\u53ef\u4ee5\u63cf\u7ed8\uff08represent\uff09\u8fd9\u4e2a\u7269\u4f53\u3002<\/p>\n\n\n\n

      \u5728 OpenGL \u4e2d\uff0c\u4f7f\u7528 VBO\u3001VAO\u3001EBO \u6765\u5b9e\u73b0\u3002<\/p>\n\n\n\n

      \u9876\u70b9\u7f13\u51b2\u5bf9\u8c61\uff08Vertex Buffer Objects, VBO\uff09<\/strong>\u5728 GPU \u5185\u5b58\uff08\u901a\u5e38\u88ab\u79f0\u4e3a\u663e\u5b58\uff09\u4e2d\u50a8\u5b58\u5927\u91cf\u9876\u70b9\u3002\u4f7f\u7528\u8fd9\u4e9b\u7f13\u51b2\u5bf9\u8c61\uff0c\u53ef\u4ee5\u4e00\u6b21\u6027\u7684\u53d1\u9001\u4e00\u5927\u6279\u6570\u636e\u5230\u663e\u5361\u4e0a\uff0c\u800c\u4e0d\u662f\u6bcf\u4e2a\u9876\u70b9\u53d1\u9001\u4e00\u6b21\u3002\u4ece CPU \u628a\u6570\u636e\u53d1\u9001\u5230\u663e\u5361\u76f8\u5bf9\u8f83\u6162\uff0c\u6240\u4ee5\u53ea\u8981\u53ef\u80fd\u8981\u5c1d\u8bd5\u5c3d\u91cf\u4e00\u6b21\u6027\u53d1\u9001\u5c3d\u53ef\u80fd\u591a\u7684\u6570\u636e\u3002\u5f53\u6570\u636e\u53d1\u9001\u81f3\u663e\u5361\u7684\u5185\u5b58\u4e2d\u540e\uff0c\u9876\u70b9\u7740\u8272\u5668\u51e0\u4e4e\u80fd\u7acb\u5373\u8bbf\u95ee\u9876\u70b9\uff0c\u8fd9\u662f\u4e2a\u975e\u5e38\u5feb\u7684\u8fc7\u7a0b\u3002<\/p>\n\n\n\n

      \u9876\u70b9\u6570\u7ec4\u5bf9\u8c61\uff08Vertex Array Object, VAO\uff09<\/strong>\u8bb0\u5f55\u7740\u5bf9\u5e94 VBO \u7684\u5c5e\u6027\u4fe1\u606f\uff0c\u6bd4\u5982\u5982\u4f55\u89e3\u8bfb VBO \u4e2d\u7684\u6570\u636e\u3002\u5b83\u53ef\u4ee5\u50cf\u9876\u70b9\u7f13\u51b2\u5bf9\u8c61\u90a3\u6837\u88ab\u7ed1\u5b9a\uff0c\u4efb\u4f55\u968f\u540e\u7684\u9876\u70b9\u5c5e\u6027\u8c03\u7528\u90fd\u4f1a\u50a8\u5b58\u5728\u8fd9\u4e2a VAO \u4e2d\u3002\u8fd9\u6837\u7684\u597d\u5904\u5c31\u662f\uff0c\u5f53\u914d\u7f6e\u9876\u70b9\u5c5e\u6027\u6307\u9488\u65f6\uff0c\u53ea\u9700\u8981\u5c06\u90a3\u4e9b\u8c03\u7528\u6267\u884c\u4e00\u6b21\uff0c\u4e4b\u540e\u518d\u7ed8\u5236\u7269\u4f53\u7684\u65f6\u5019\u53ea\u9700\u8981\u7ed1\u5b9a\u76f8\u5e94\u7684 VAO \u5c31\u884c\u4e86\u3002\u8fd9\u4f7f\u5728\u4e0d\u540c\u9876\u70b9\u6570\u636e\u548c\u5c5e\u6027\u914d\u7f6e\u4e4b\u95f4\u5207\u6362\u53d8\u5f97\u975e\u5e38\u7b80\u5355\uff0c\u53ea\u9700\u8981\u7ed1\u5b9a\u4e0d\u540c\u7684 VAO \u5c31\u884c\u4e86\u3002\u521a\u521a\u8bbe\u7f6e\u7684\u6240\u6709\u72b6\u6001\u90fd\u5c06\u5b58\u50a8\u5728 VAO \u4e2d\u3002<\/p>\n\n\n\n

      \u7d22\u5f15\u7f13\u51b2\u5bf9\u8c61\uff08Element Buffer Object\uff0cEBO\uff0c\u4e5f\u53ebIndex Buffer Object\uff0cIBO\uff09<\/strong>\uff0c\u662f\u4e00\u4e2a\u7f13\u51b2\uff0c\u5b83\u4e13\u95e8\u50a8\u5b58\u7d22\u5f15\uff0cOpenGL \u8c03\u7528\u8fd9\u4e9b\u9876\u70b9\u7684\u7d22\u5f15\u6765\u51b3\u5b9a\u8be5\u7ed8\u5236\u54ea\u4e2a\u9876\u70b9\u3002\u4e3a\u6b64\u53ef\u4ee5\u907f\u514d\u5728 VBO \u4e2d\u5b58\u5165\u91cd\u590d\u7684\u9876\u70b9\u3002<\/p>\n\n\n\n

      \u5728\u540e\u9762\u7ed8\u5236\u6b63\u65b9\u4f53\u7684\u4f5c\u4e1a\u4e2d\uff0c\u6211\u4f7f\u7528\u4e86 EBO \u6765\u4f18\u5316\u5b58\u50a8\u7a7a\u95f4\u3002       <\/p>\n\n\n\n

      VBO\u3001VAO\u3001EBO \u4e09\u8005\u5173\u7cfb\u5982\u4e0b\uff1a <\/p>\n\n\n\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/www.eolstudy.com\/wp-content\/uploads\/2019\/09\/vertex_array_objects_ebo.png\"<\/figure>
\uff08 VBO\u3001VAO\u3001EBO \u4e09\u8005 \u5173\u7cfb\uff09<\/figcaption><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

Programming<\/strong><\/p>\n\n\n\n

\u7ed8\u5236\u4e00\u4e2a\u65b9\u4f53<\/p>\n\n\n\n

      \u9996\u5148\uff0c\u5c55\u793a\u7ed8\u5236\u6548\u679c\u5982\u4e0b\uff08\u505a\u4e86\u4e00\u70b9\u5c0f\u5b9e\u9a8c\uff09\uff08\u53ef\u80fd\u9700\u8981\u4e00\u4e9b\u52a0\u8f7d\u65f6\u95f4\uff09\uff1a<\/p>\n\n\n\n

<\/div>
<\/div><\/div><\/div>\"https:\/\/www.eolstudy.com\/wp-content\/uploads\/2019\/09\/\u6b63\u5e38222.gif\"<\/figure>
\u6b63\u5e38\u7ed8\u5236<\/figcaption><\/figure><\/div>\n\n\n\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/www.eolstudy.com\/wp-content\/uploads\/2019\/09\/\u6ca1\u6709\u6df1\u5ea6\u6d4b\u8bd5222.gif\"<\/figure>
\u6ca1\u6709\u6df1\u5ea6\u6d4b\u8bd5<\/figcaption><\/figure><\/div>\n\n\n\n
<\/div>
<\/div><\/div><\/div>\"https:\/\/www.eolstudy.com\/wp-content\/uploads\/2019\/09\/\u6ca1\u6709\u6e05\u7a7a\u989c\u8272\u7f13\u51b2222.gif\"<\/figure>
\u6ca1\u6709\u6e05\u7a7a\u989c\u8272\u7f13\u51b2<\/figcaption><\/figure><\/div>\n\n\n\n

\u4ee3\u7801<\/strong><\/p>\n\n\n\n

      \u6211\u81ea\u5df1\u5199\u4e86\u4e00\u4e2a ShaderCompiler \u7c7b\uff0c\u5b83\u80fd\u591f\u5b8c\u6210\u7f16\u8bd1\u94fe\u63a5 shader \u7a0b\u5e8f\u7684\u529f\u80fd\uff0c\u53ea\u9700\u5728\u58f0\u660e\u65f6\u6307\u5b9a shader \u6587\u4ef6\u8def\u5f84\u6216\u8005\u4f7f\u7528 CompileShaderFile() \u63a5\u53e3\u6307\u5b9a\u8def\u5f84\uff0c\u7136\u540e\u901a\u8fc7 GetProgramId() \u63a5\u53e3\u5f97\u5230\u7f16\u8bd1\u597d\u7684\u7a0b\u5e8f ID\u3002<\/p>\n\n\n\n

      ShaderCompiler \u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n

#include <glad\/glad.h> \n#include <GLFW\/glfw3.h>\n#include <stdio.h>\n#include <iostream>\n#include <fstream>\n#include <string>\n#include <sstream>\n\nclass ShaderCompiler\n{\nprivate:\n    std::string VertexShaderSource = \"\";\n    std::string FragmentShaderSource = \"\";\n    unsigned int program_id = 0;\n    bool whether_compiled = false;\nprivate:\n    \/*\n    \u7f16\u8bd1shader\uff0c\u5e76\u8fde\u63a5\u5230program_id\uff1b\n    \u82e5\u6b64\u5bf9\u8c61\u4ee5\u524d\u5df2\u7ecf\u7f16\u8bd1\u8fc7\uff0c\u6b64\u51fd\u6570\u4f1a\u5220\u9664\u4ee5\u524d\u7684program\u3002\n    *\/\n    unsigned int CompileShader(unsigned int shaderType, const std::string& sourceCode)\n    {\n        if (whether_compiled)\n        {\n            glDeleteProgram(program_id);\n        }\n        whether_compiled = true;\n\n        unsigned int id = glCreateShader(shaderType);\n        const char* code = sourceCode.c_str();\n        glShaderSource(id, 1, &code, nullptr);\n        glCompileShader(id);\n\n        int result;\n        glGetShaderiv(id, GL_COMPILE_STATUS, &result);\n        if (result == GL_FALSE)\n        {\n            int length;\n            glGetShaderiv(id, GL_INFO_LOG_LENGTH, &length);\n            char* message = new(std::nothrow)char[length + 1];\n            glGetShaderInfoLog(id, length, &length, message);\n            std::cout << \"shader fail to compile:\" << std::endl;\n            std::cout << message << std::endl;\n\n            glDeleteShader(id);\n            delete[] message;\n\n            return 0;\n        }\n\n        return id;\n    }\n    \/*\n    \u4ece\u6307\u5b9a\u6587\u4ef6\u53d6\u5230\u6e90\u7801\u5e76\u5b58\u5165VertexShaderSource\u3001FragmentShaderSource\n    *\/\n    void ParseShader(const std::string& filePath)\n    {\n        std::ifstream stream(filePath);\n        if (stream.good() == 0)\n        {\n            std::cerr << \"fail to open shader files\" << std::endl;\n            VertexShaderSource = \"\";\n            FragmentShaderSource = \"\";\n            return;\n        }\n\n        enum class ShaderType\n        {\n            NONE = -1, VERTEX = 0, FRAGMENT = 1\n        };\n        std::string line;\n        std::stringstream ss[2];\n        ShaderType type = ShaderType::NONE;\n        while (getline(stream, line))\n        {\n            if (line.find(\"#shader\") != std::string::npos)\n            {\n                if (line.find(\"vertex\") != std::string::npos)\n                {\n                    type = ShaderType::VERTEX;\n                }\n                else if (line.find(\"fragment\") != std::string::npos)\n                {\n                    type = ShaderType::FRAGMENT;\n                }\n            }\n            else\n            {\n                if (type == ShaderType::NONE)\n                {\n                    continue;\n                }\n                ss[int(type)] << line << std::endl;\n            }\n        }\n        VertexShaderSource = ss[int(ShaderType::VERTEX)].str();\n        FragmentShaderSource = ss[int(ShaderType::FRAGMENT)].str();\n        return;\n    }\n    \/*\n    \u8c03\u7528CompileShader()\u751f\u6210\u7a0b\u5e8f\u3002\n    \u9700\u4e8b\u5148\u77e5\u9053\u6e90\u7801\u3002\n    *\/\n    unsigned int CreateShader(const std::string& vertexShaderCode, const std::string& fragmentShaderCode)\n    {\n        unsigned int program = glCreateProgram();\n        unsigned int vs = CompileShader(GL_VERTEX_SHADER, vertexShaderCode);\n        unsigned int fs = CompileShader(GL_FRAGMENT_SHADER, fragmentShaderCode);\n\n        glAttachShader(program, vs);\n        glAttachShader(program, fs);\n        glLinkProgram(program);\n        glValidateProgram(program);\n\n        glDeleteShader(vs);\n        glDeleteShader(fs);\n\n        return program;\n    }\npublic:\n    ShaderCompiler(const std::string filepath)\n    {\n        ParseShader(filepath);\n        program_id = CreateShader(VertexShaderSource, FragmentShaderSource);\n    }\n    ShaderCompiler()\n    {\n        ;\n    }\n    \/*\n    \u63d0\u4f9bshader\u6587\u4ef6\u8def\u5f84\uff0c\u76f4\u63a5\u8fd4\u56de\u7f16\u8bd1\u597d\u7684program_id\n    *\/\n    unsigned int CompileShaderFile(const std::string filepath)\n    {\n        ParseShader(filepath);\n        program_id = CreateShader(VertexShaderSource, FragmentShaderSource);\n        return program_id;\n    }\n    \/*\n    \u4e0d\u7f16\u8bd1\u8fde\u63a5\uff0c\u76f4\u63a5\u8fd4\u56de\u5185\u90e8\u7684program_id\n    *\/\n    unsigned int GetProgramId()\n    {\n        return program_id;\n    }\n};\n<\/pre>\n\n\n\n
 <\/p>\n\n\n\n
        \u7ed8\u5236\u6b63\u65b9\u4f53\u6240\u7528\u7684 shader \u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n
#shader vertex\n#version 330 core\n\nlayout (location = 0) in vec3 aPos;\nlayout(location = 1) in vec3 aColor;\nout vec4 oColor;\n\nuniform mat4 model;\nuniform mat4 view;\nuniform mat4 projection;\n\nvoid main()\n{\n   gl_Position = projection * view * model * vec4(aPos.x, aPos.y, aPos.z, 1.0f);\n   oColor = vec4(aColor, 1.0f);\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n#shader fragment\n#version 330 core\n\nout vec4 fragColor;\nin vec4 oColor;\n\nvoid main()\n{\n   fragColor = oColor;\n}\n<\/pre>\n\n\n\n
  <\/p>\n\n\n\n
        main() \u7a0b\u5e8f\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n\n\n\n
#include <glad\/glad.h> \n#include <GLFW\/glfw3.h>\n#include <stdio.h>\n#include <iostream>\n#include <fstream>\n#include <string>\n#include <sstream>\n\/\/glm\n#include <glm\/glm.hpp>\n#include <glm\/gtc\/matrix_transform.hpp>  \n#include <glm\/gtc\/type_ptr.hpp>\n\n#include \"ShaderCompiler.hpp\"\n\nvoid framebuffer_size_callback(GLFWwindow* window, int width, int height);\nvoid processInput(GLFWwindow* window);\n\n\/\/ settings\nconst unsigned int SCR_WIDTH = 1100;\nconst unsigned int SCR_HEIGHT = 1100;\n\nint main()\n{\n    glfwInit();\n    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);\n    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);\n    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);\n\n    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, \"HELLO WORLD\", nullptr, nullptr);\n    if (window == nullptr)\n    {\n        std::cout << \"fail to create GLFW window\" << std::endl;\n        glfwTerminate();\n        return -1;\n    }\n    glfwMakeContextCurrent(window);\/\/\u5c06\u7a97\u53e3\u4e0a\u4e0b\u6587 \u8bbe\u7f6e\u4e3a \u5f53\u524d\u7ebf\u7a0b\u7684\u4e3b\u4e0a\u4e0b\u6587\n\n    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))\n    {\n        std::cout << \"fail to initialize GLAD\" << std::endl;\n        return -1;\n    }\n\n    glViewport(0, 0, SCR_WIDTH, SCR_HEIGHT);\/\/glViewport\u51fd\u6570\u524d\u4e24\u4e2a\u53c2\u6570\u63a7\u5236\u7a97\u53e3\u5de6\u4e0b\u89d2\u7684\u4f4d\u7f6e\u3002\u7b2c\u4e09\u4e2a\u548c\u7b2c\u56db\u4e2a\u53c2\u6570\u63a7\u5236\u6e32\u67d3\u7a97\u53e3\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff08\u50cf\u7d20\uff09\n\n    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);\/\/\u6ce8\u518c\u51fd\u6570\uff0c\u544a\u8bc9GLFW\u6211\u4eec\u5e0c\u671b\u6bcf\u5f53\u7a97\u53e3\u8c03\u6574\u5927\u5c0f\u7684\u65f6\u5019\u8c03\u7528\u8fd9\u4e2a\u51fd\u6570\n    \n    glEnable(GL_DEPTH_TEST);\n\n    const int vertex_array_num = 48;\n    float vertex_position_color[vertex_array_num] =\n    {\n        \/\/x,y,z,r,g,b\n        0.5f, 0.5f, 0.5f, 0.9f, 0.3f, 0.3f,\/\/0\n        0.5f, 0.5f, -0.5f, 0.1f, 0.9f, 0.1f,\/\/1\n        -0.5f, 0.5f, -0.5f, 0.1f, 0.1f, 0.9f,\/\/2\n        -0.5f, 0.5f, 0.5f, 0.9f, 0.9f, 0.9f,\/\/3\n        0.5f, -0.5f, 0.5f, 0.3f, 0.3f, 0.9f,\/\/4\n        0.5f, -0.5f, -0.5f, 0.9f, 0.9f, 0.9f,\/\/5\n        -0.5f, -0.5f, -0.5f, 0.9f, 0.3f, 0.3f,\/\/6\n        -0.5f, -0.5f, 0.5f, 0.3f, 0.9f, 0.3f\/\/7\n    };\n\n    const int ebo_num = 36;\n    int ebo_idx[ebo_num] =\n    {\n        1, 5, 6,\n        1, 6, 2,\n        1, 0, 2, \n        0, 3, 2,\n        0, 3, 4,\n        3, 4, 7,\n        4, 5, 6,\n        4, 6, 7,\n        0, 4, 5,\n        0, 1, 5,\n        2, 3, 6,\n        3, 6, 7\n    };\n\n    unsigned int vertex_buffer_id, VAO_id, EBO_id;\n    glGenVertexArrays(1, &VAO_id);\n    glGenBuffers(1, &vertex_buffer_id);\n    glGenBuffers(1, &EBO_id);\n\n    glBindVertexArray(VAO_id);\n    \n    glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer_id);\n    glBufferData(GL_ARRAY_BUFFER, vertex_array_num * sizeof(float), vertex_position_color, GL_STATIC_DRAW);\n\n    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO_id);\n    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(ebo_idx), ebo_idx, GL_STATIC_DRAW);\n\n    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(float) * 6, (void*)0);\n    glEnableVertexAttribArray(0);\n    \n    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, sizeof(float) * 6, (void*)(sizeof(float) * 3));\n    glEnableVertexAttribArray(1);\n\n    glBindBuffer(GL_ARRAY_BUFFER, 0);\n    glBindVertexArray(0);\n\n    ShaderCompiler sc(\".\/shader.shader\");\n    unsigned int program_id = sc.GetProgramId();\n\n    while (!glfwWindowShouldClose(window))\n    {\n        processInput(window);\n        glClearColor(0.3f, 0.7f, 1.0f, 1.0f);\n        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);\n\n        glUseProgram(program_id);\n        glBindVertexArray(VAO_id); \n        \n        glm::mat4 model = glm::mat4(1.0f);\n        glm::mat4 view = glm::mat4(1.0f);\n        glm::mat4 projection = glm::mat4(1.0f);\n        model = glm::rotate(model, (float)glfwGetTime(), glm::vec3(1.0f, 1.0f, 1.0f));\n        view = glm::translate(view, glm::vec3(0.0f, 0.0f, -5.0f));\n        projection = glm::perspective(glm::radians(45.0f), (float)SCR_WIDTH \/ SCR_HEIGHT, 0.1f, 100.0f);\n\n        unsigned int modelLoc = glGetUniformLocation(program_id, \"model\");\n        unsigned int viewLoc = glGetUniformLocation(program_id, \"view\");\n        unsigned int projectionLoc = glGetUniformLocation(program_id, \"projection\");\n        glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));\n        glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(view));\n        glUniformMatrix4fv(projectionLoc, 1, GL_FALSE, glm::value_ptr(projection));\n\n        glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_INT, (void*)0);\n        glBindVertexArray(0);\n\n        glfwSwapBuffers(window);\n\n        glfwPollEvents();\n    }\n    glDeleteProgram(program_id);\n    glfwTerminate();\n\n    return 0;\n}\n\nvoid framebuffer_size_callback(GLFWwindow* window, int width, int height)\n{\n    glViewport(0, 0, width, height);\n}\n\n\nvoid processInput(GLFWwindow* window)\n{\n    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)\n    {\n        glfwSetWindowShouldClose(window, true);\n    }\n}\n\n<\/pre>\n\n\n\n
 <\/p>\n\n\n\n
 <\/p>\n\n\n\n
 <\/p>\n\n\n\n
\u4ee5\u4e0a\u3002<\/strong><\/p>\n\n\n\n
\u5b8c\u6210\u672c\u6b21\u4f5c\u4e1a\u3002<\/strong><\/p>\n\n\n\n
Eol \u63d0\u4f9b Web \u6280\u672f\u652f\u6301<\/p>\n\n\n\n
\u7279\u522b\u9e23\u8c22\uff1aEol<\/p>\n\n\n\n
 <\/p>\n\n\n\n
 <\/p>\n\n\n\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
1 What is a graphics pipeline? \u7b54\uff1a       Graphics pipeline \u662f\u56fe\u5f62\u6e32\u67d3\u6d41\u6c34\u7ebf\u3002       \u4e00\u4e9b\u8d44\u6599\u5c06\u5176\u7ffb\u8bd1\u4e3a\u201c\u56fe\u5f62\u6e32\u67d3\u7ba1\u7ebf\u201d\uff0c\u4e2a\u4eba\u4e0d\u662f\u592a\u559c\u6b22\u8fd9\u6837\u7684\u7ffb\u8bd1\u2014\u2014\u628a\u5b83\u7406\u89e3\u4e3a\u201c\u6d41\u6c34\u7ebf\u201d\u4e4b\u540e\u4fbf\u8c41\u7136\u5f00\u6717\u3002Graphics pipeline \u5c06\u56fe\u5f62\u6e32\u67d3\u4efb\u52a1\u5212\u5206\u4e3a\u82e5\u5e72\u4e2a\u5c0f\u4efb\u52a1\uff0c\u540e\u4e00\u4e2a\u4efb\u52a1\u7684\u5b9e\u65bd\u5f80\u5f80\u4f9d\u8d56\u4e8e\u524d\u4e00\u4e2a\u4efb\u52a1\u7684\u5b8c\u6210\uff0c\u5404\u4e2a\u4efb\u52a1\u5f7c\u6b64\u8fde\u63a5\u5f62\u6210\u4e86\u4e00\u6761\u6e32\u67d3\u6d41\u6c34\u7ebf\u3002       \u53e6\u5916\u901a\u8fc7\u67e5\u9605\u4e00\u4e9b\u8d44\u6599\uff0c\u53d1\u73b0 Graphics pipeline \u5e76\u975e\u6709\u4e25\u683c\u7684\u5212\u5206\uff0c\u4e0d\u540c\u7684\u8d44\u6599\u4f1a\u6709\u4e0d\u540c\u7684\u5212\u5206\u65b9\u6cd5\u3002\u4e00\u822c\u6765\u8bf4\u5c06 Graphics pipeline \u5212\u5206\u4e3a\u4ee5\u4e0b\u56db\u4e2a\u9636\u6bb5\uff1a\u5e94\u7528\u7a0b\u5e8f\u9636\u6bb5\uff08Application\uff09\u3001\u51e0\u4f55\u5904\u7406\u9636\u6bb5\uff08Geometry Processing\uff09\u3001\u5149\u6805\u5316\uff08Rasterization\uff09\u548c\u50cf\u7d20\u5904\u7406\u9636\u6bb5\uff08Pixel Processing\uff09\u3002\u5e94\u7528\u7a0b\u5e8f\u9636\u6bb5\u901a\u5e38\u662f\u5728CPU\u7aef\u8fdb\u884c\u5904\u7406\uff0c\u5305\u62ec\u78b0\u649e\u68c0\u6d4b\u3001\u52a8\u753b\u7269\u7406\u6a21\u62df\u4ee5\u53ca\u89c6\u690e\u4f53\u5254\u9664\u7b49\u4efb\u52a1\uff0c\u8fd9\u4e2a\u9636\u6bb5\u4f1a\u5c06\u6570\u636e\u9001\u5230\u6e32\u67d3\u7ba1\u7ebf\u4e2d\uff1b\u51e0\u4f55\u5904\u7406\u9636\u6bb5\u4e3b\u8981\u6267\u884c\u9876\u70b9\u7740\u8272\u5668\u3001\u6295\u5f71\u53d8\u6362\u3001\u88c1\u526a\u548c\u5c4f\u5e55\u6620\u5c04\u7684\u529f\u80fd\uff1b\u5149\u6805\u5316\u9636\u6bb5\u5c06\u56fe\u5143\u79bb\u6563\u5316\u7247\u6bb5\uff0c\u53d8\u6210\u4e00\u4e2a\u4e2a\u542b\u6709\u4fe1\u606f\u7684\u70b9\uff1b\u50cf\u7d20\u5904\u7406\u9636\u6bb5\u5305\u62ec\u50cf\u7d20\u7740\u8272\u548c\u6df7\u5408\u7684\u529f\u80fd\u3002\u5bf9\u6bd4\u5404\u7c7b\u8d44\u6599\u53ef\u4ee5\u53d1\u73b0\uff0c\u867d\u7136\u7ba1\u7ebf\u7684\u5212\u5206\u7c92\u5ea6\u4e0d\u4e00\u6837\uff0c\u4f46\u662f\u6bcf\u4e2a\u9636\u6bb5\u7684\u5177\u4f53\u529f\u80fd\u5176\u5b9e\u662f\u5dee\u4e0d\u591a\u7684\uff0c\u539f\u7406\u4e5f\u662f\u4e00\u6837\u7684\uff0c\u5e76\u6ca1\u6709\u592a\u5927\u7684\u5dee\u5f02\u3002       \u4e0b\u56fe\u5219\u662f\u53e6\u4e00\u79cd\u5212\u5206\u65b9\u5f0f\uff0c\u84dd\u8272\u90e8\u5206\u4ee3\u8868\u7684\u662f\u53ef\u4ee5\u81ea\u5b9a\u4e49\u7684\u7740\u8272\u5668\u7684\u90e8\u5206\u3002 2 What are vertex, primitive and fragment? \u7b54\uff1a       \u9876\u70b9\uff08Vertex\uff09\u662f\u5750\u6807\u7684\u6570\u636e\u7684\u96c6\u5408\uff0c\u5b83\u53ef\u4ee5\u5305\u542b\u4efb\u4f55\u6709\u7528\u7684\u7684\u6570\u636e\uff0c\u5305\u62ec\u4f4d\u7f6e\u4fe1\u606f\u3001\u989c\u8272\u4fe1\u606f\u7b49\u3002       \u56fe\u5143\uff08Primitive\uff09 \u5219\u544a\u8bc9 OpenGL \u8fd9\u4e9b\u9876\u70b9\u6570\u636e\u6240\u8868\u793a\u7684\u6e32\u67d3\u7c7b\u578b\u2014\u2014\u6bd4\u5982\u4e00\u4e2a\u70b9\u3001\u4e00\u4e2a\u4e09\u89d2\u5f62\u3001\u6216\u662f\u4ec5\u4ec5\u662f\u4e00\u6761\u7ebf\u3002       \u7247\u6bb5\uff08Fragment\uff09\u5728\u5404\u7c7b\u8d44\u6599\u4e2d\u90fd\u4e0e\u7247\u6bb5\u7740\u8272\u5668\uff08Fragment Shader\uff09\u4e00\u8d77\u51fa\u73b0\u3002\u5b83\u662f\u4f9b\u7247\u6bb5\u7740\u8272\u5668\u4f7f\u7528\u7684\u50cf\u7d20\u9635\u5217\uff0c\u4e2a\u4eba\u5c06\u5176\u7406\u89e3\u4e3a\u4e00\u4e2a\u6ca1\u6709\u6e32\u67d3\u597d\u7684\u201c\u5e27\u201d\u3002\u5b83\u662f\u8fd9\u6837\u751f\u6210\u7684\uff1a\u51e0\u4f55\u7740\u8272\u5668\uff08Geometry Shader\uff09-> \u5149\u6805\u5316\u9636\u6bb5\uff08Rasterization Stage\uff09–\u5f97\u5230\u7247\u6bb5–> \u7247\u6bb5\u7740\u8272\u5668\uff08Fragment Shader\uff09->\u2026\u2026 3 What are geometry and […]<\/p>\n","protected":false},"author":3,"featured_media":308,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[18,17],"tags":[],"class_list":["post-307","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-opengl","category-recommendation"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.eolstudy.com\/wp-content\/uploads\/2019\/09\/u25876603851238379908fm26gp0.jpg","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/posts\/307"}],"collection":[{"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":20,"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":584,"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/posts\/307\/revisions\/584"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/media\/308"}],"wp:attachment":[{"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eolstudy.com\/index.php\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}