{"id":417,"date":"2022-02-14T10:55:01","date_gmt":"2022-02-14T02:55:01","guid":{"rendered":"https:\/\/www.fanyamin.com\/wordpress\/?p=417"},"modified":"2022-02-14T11:56:34","modified_gmt":"2022-02-14T03:56:34","slug":"direct3d-opengl-and-webgl","status":"publish","type":"post","link":"https:\/\/www.fanyamin.com\/wordpress\/?p=417","title":{"rendered":"GDI, OpenGL, WebGL and Direct3D"},"content":{"rendered":"<p>The main APIs we used are:<\/p>\n<ul>\n<li>drawIimage<\/li>\n<li>renderText<\/li>\n<\/ul>\n<h1>GDI<\/h1>\n<p>The Graphics Device Interface (GDI) is a legacy component of Microsoft Windows responsible for representing graphical objects and transmitting them to output devices such as monitors and printers. Windows apps use Windows API to interact with GDI, for such tasks as drawing lines and curves, rendering fonts, and handling palettes. The Windows USER subsystem uses GDI to render such UI elements as window frames and menus. Other systems have components that are similar to GDI; for example: macOS has Quartz, and Linux has X Window System.<\/p>\n<p>GDI's most significant advantages over more direct methods of accessing the hardware are perhaps its scaling capabilities and its abstract representation of target devices. Using GDI, it is possible to draw on multiple devices, such as a screen and a printer, and expect proper reproduction in each case. This capability is at the center of most &quot;What You See Is What You Get&quot; applications for Microsoft Windows.<\/p>\n<p>Simple games that do not require fast graphics rendering may use GDI. However, GDI is relatively hard to use for advanced animation, lacks a notion for synchronizing with individual video frames in the video card, and lacks hardware rasterization for 3D. Modern games usually use DirectX, Vulkan, or OpenGL instead.<\/p>\n<h1>OpenGL<\/h1>\n<p>OpenGL\u2122 \u662f\u884c\u4e1a\u9886\u57df\u4e2d\u6700\u4e3a\u5e7f\u6cdb\u63a5\u7eb3\u7684 2D\/3D \u56fe\u5f62 API, \u5176\u81ea\u8bde\u751f\u81f3\u4eca\u5df2\u50ac\u751f\u4e86\u5404\u79cd\u8ba1\u7b97\u673a\u5e73\u53f0\u53ca\u8bbe\u5907\u4e0a\u7684\u6570\u5343\u4f18\u79c0\u5e94\u7528\u7a0b\u5e8f\u3002OpenGL\u2122 \u662f\u72ec\u7acb\u4e8e\u89c6\u7a97\u64cd\u4f5c\u7cfb\u7edf\u6216\u5176\u5b83\u64cd\u4f5c\u7cfb\u7edf\u7684\uff0c\u4ea6\u662f\u7f51\u7edc\u900f\u660e\u7684\u3002\u5728\u5305\u542bCAD\u3001\u5185\u5bb9\u521b\u4f5c\u3001\u80fd\u6e90\u3001\u5a31\u4e50\u3001\u6e38\u620f\u5f00\u53d1\u3001\u5236\u9020\u4e1a\u3001\u5236\u836f\u4e1a\u53ca\u865a\u62df\u73b0\u5b9e\u7b49\u884c\u4e1a\u9886\u57df\u4e2d\uff0cOpenGL\u2122 \u5e2e\u52a9\u7a0b\u5e8f\u5458\u5b9e\u73b0\u5728 PC\u3001\u5de5\u4f5c\u7ad9\u3001\u8d85\u7ea7\u8ba1\u7b97\u673a\u7b49\u786c\u4ef6\u8bbe\u5907\u4e0a\u7684\u9ad8\u6027\u80fd\u3001\u6781\u5177\u51b2\u51fb\u529b\u7684\u9ad8\u89c6\u89c9\u8868\u73b0\u529b\u56fe\u5f62\u5904\u7406\u8f6f\u4ef6\u7684\u5f00\u53d1\u3002<\/p>\n<p>OpenGL\uff08\u5168\u5199Open Graphics Library\uff09\u662f\u4e2a\u5b9a\u4e49\u4e86\u4e00\u4e2a\u8de8\u7f16\u7a0b\u8bed\u8a00\u3001\u8de8\u5e73\u53f0\u7684\u7f16\u7a0b\u63a5\u53e3\u7684\u89c4\u683c\uff0c\u5b83\u7528\u4e8e\u4e09\u7ef4\u56fe\u8c61\uff08\u4e8c\u7ef4\u7684\u4ea6\u53ef\uff09\u3002OpenGL\u662f\u4e2a\u4e13\u4e1a\u7684\u56fe\u5f62\u7a0b\u5e8f\u63a5\u53e3\uff0c\u662f\u4e00\u4e2a\u529f\u80fd\u5f3a\u5927\uff0c\u8c03\u7528\u65b9\u4fbf\u7684\u5e95\u5c42\u56fe\u5f62\u5e93\u3002OpenGL\u7684\u524d\u8eab\u662fSGI\u516c\u53f8\u4e3a\u5176\u56fe\u5f62\u5de5\u4f5c\u7ad9\u5f00\u53d1\u7684IRIS GL\u3002IRIS GL\u662f\u4e00\u4e2a\u5de5\u4e1a\u6807\u51c6\u76843D\u56fe\u5f62\u8f6f\u4ef6\u63a5\u53e3\uff0c\u529f\u80fd\u867d\u7136\u5f3a\u5927\u4f46\u662f\u79fb\u690d\u6027\u4e0d\u597d\uff0c\u4e8e\u662fSGI\u516c\u53f8\u4fbf\u5728IRIS GL\u7684\u57fa\u7840\u4e0a\u5f00\u53d1\u4e86OpenGL\u3002OpenGL\u7684\u82f1\u6587\u5168\u79f0\u662f\u201cOpen Graphics Library\u201d\uff0c\u987e\u540d\u601d\u4e49\uff0cOpenGL\u4fbf\u662f\u201c\u5f00\u653e\u7684\u56fe\u5f62\u7a0b\u5e8f\u63a5\u53e3\u201d\u3002\u867d\u7136DirectX\u5728\u5bb6\u7528\u5e02\u573a\u5168\u9762\u9886\u5148\uff0c\u4f46\u5728\u4e13\u4e1a\u9ad8\u7aef\u7ed8\u56fe\u9886\u57df\uff0cOpenGL\u662f\u4e0d\u80fd\u88ab\u53d6\u4ee3\u7684\u4e3b\u89d2\u3002<\/p>\n<h1>WebGL<\/h1>\n<p>WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 &lt;canvas&gt; elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.<\/p>\n<p>Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; however, the user's device must also have hardware that supports these features.<\/p>\n<p>The WebGL 2 API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the WebGL2RenderingContext interface.<\/p>\n<h2>WebGL 2<\/h2>\n<p>WebGL 2 is a major update to WebGL which is provided through the WebGL2RenderingContext interface. <\/p>\n<p>refer to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGL_API\/Tutorial\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGL_API\/Tutorial<\/a><\/p>\n<h1>Direct3D<\/h1>\n<p>Direct3D and OpenGL are competing application programming interfaces (APIs) which can be used in applications to render 2D and 3D computer graphics. <\/p>\n<p>As of 2005, graphics processing units (GPUs) almost always implement one version of both of these APIs. <\/p>\n<p>Examples include: DirectX 9 and OpenGL 2 circa 2004; DirectX 10 and OpenGL 3 circa 2008; and most recently, DirectX 11 and OpenGL 4 circa 2011. <\/p>\n<p>GPUs that support more recent versions of the standards are backward compatible with applications that use the older standards; for example, one can run older DirectX 9 games on a more recent DirectX 11-certified GPU.<\/p>\n<h1>ANGLE<\/h1>\n<p>ANGLE (Almost Native Graphics Layer Engine) is an open source, cross-platform graphics engine abstraction layer developed by Google.[1] ANGLE translates OpenGL ES 2\/3 calls to DirectX 9, 11, or OpenGL API calls.[2][3][4][5] It's a portable version of OpenGL but with limitations of OpenGL ES standard.[6][7]<\/p>\n<p>The API is mainly designed to bring up a high-performance OpenGL compatibility to MS Windows and to web browsers such as Chromium by translating OpenGL calls to Direct3D, which has much better driver support.[3][4][5] On Windows systems, there are two backend renderers for ANGLE: the oldest one uses Direct3D 9.0c, while the newer one uses Direct3D 11.[8]<\/p>\n<p>ANGLE is currently used by Google Chrome (it's embedded into Blink browser engine), Firefox,[9] Edge, WebKit, and the Qt Framework.[10] The engine is also used by Windows 10 for compatibility with apps ported from Android.[11] Throughout 2019 Apple team contributed a Metal API backend for the ANGLE so Apple devices could run on their native graphics APIs.[12]<\/p>\n<p>The ANGLE is distributed under BSD-license.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The main APIs we used are: drawIimage renderText GDI The Graphics Device Interface (GDI) is a legacy component of Microsoft Windows responsible for representing graphical objects and transmitting them to output devices such as monitors and printers. Windows apps use Windows API to interact with GDI, for such tasks as drawing lines and curves, rendering [&hellip;] <a class=\"read-more\" href=\"https:\/\/www.fanyamin.com\/wordpress\/?p=417\" title=\"Permanent Link to: GDI, OpenGL, WebGL and Direct3D\">&rarr;Read&nbsp;more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-417","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/417"}],"collection":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=417"}],"version-history":[{"count":7,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/417\/revisions"}],"predecessor-version":[{"id":424,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/417\/revisions\/424"}],"wp:attachment":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}