{"id":25892,"date":"2020-11-10T20:15:42","date_gmt":"2020-11-10T11:15:42","guid":{"rendered":"https:\/\/its-more.jp\/ja_jp\/?p=25892"},"modified":"2020-11-11T06:08:42","modified_gmt":"2020-11-10T21:08:42","slug":"its-more-rofl","status":"publish","type":"post","link":"https:\/\/its-more.jp\/ja_jp\/?p=25892","title":{"rendered":"3D : Canvas vs SVG"},"content":{"rendered":"\n<p>\u793e\u9577\uff1a\u3055\u3066\u3001\u5f53\u793e\u88fdROFL\u3067\u3059\u304c\u3002<\/p>\n\n\n\n<p>\u57fa\u76e4\uff1a3D\u3067\u5b9a\u7fa9\u3059\u308b\u3068\u3044\u3046\u3053\u3068\u306f\u6c7a\u5b9a\u4e8b\u9805\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<p>\u958b\u767a\uff1a\u305d\u308c\u3067\u3001<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Client-side_web_APIs\/Drawing_graphics\">canvas<\/a> \u3067\u3084\u308b\u304b SVG \u304b\u3068\u3044\u3046\u9078\u629e\u306a\u3093\u3067\u3059\u304c\u3002\u524d\u63d0\u3068\u3057\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u4f9d\u5b58\u3067\u306a\u3044\u3068\u3044\u3046\u3053\u3068\u304c\u5fc5\u9808\u3067\u3059\u3002\u3067\u3001canvas\u3067\u3084\u308b\u5834\u5408\u3001\u3069\u3046\u3084\u3089\u30ad\u30e2\u306f <a href=\"https:\/\/www.khronos.org\/webgl\/\">WebGL<\/a> \u306e\u3088\u3046\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-4.34.13.png\" alt=\"\" class=\"wp-image-25895\" width=\"668\" height=\"407\" srcset=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-4.34.13.png 890w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-4.34.13-300x183.png 300w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-4.34.13-768x468.png 768w\" sizes=\"(max-width: 668px) 100vw, 668px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGL_API\/Tutorial\"><img loading=\"lazy\" src=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-4.38.14.png\" alt=\"\" class=\"wp-image-25897\" width=\"659\" height=\"395\" srcset=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-4.38.14.png 879w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-4.38.14-300x180.png 300w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-4.38.14-768x460.png 768w\" sizes=\"(max-width: 659px) 100vw, 659px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>\u793e\u9577\uff1aGPU\u3092\u4f7f\u3044\u5012\u305d\u3046\u3063\u3066\u611f\u3058\u3067\u3059\u304b\u306d\u3002<\/p>\n\n\n\n<p>\u958b\u767a\uff1a\u305f\u3068\u3048\u3070<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGL_API\/Tutorial\/Using_textures_in_WebGL\">\u7acb\u65b9\u4f53\u306e\u9762\u306b\u7d75\u3092\u8cbc\u308a\u4ed8\u3051\u3066\u56de\u8ee2\u3055\u305b\u308b<\/a>\u3002<\/p>\n\n\n\n<iframe width=100% height=300px src=\"https:\/\/mdn.github.io\/webgl-examples\/tutorial\/sample6\/\"><\/iframe>\n\n\n\n<p>\u57fa\u76e4\uff1a\u3069\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u3082OK\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"576\" src=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.05.32-1024x576.png\" alt=\"\" class=\"wp-image-25905\" srcset=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.05.32-1024x576.png 1024w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.05.32-300x169.png 300w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.05.32-768x432.png 768w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.05.32-1536x864.png 1536w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.05.32-2048x1152.png 2048w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>\u793e\u9577\uff1aChromium\u306f\u75db\u3005\u3057\u3059\u304e\u308b\u306e\u3067\u3084\u3081\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>\u57fa\u76e4\uff1a\u3060\u3044\u305f\u3044\u3001CPU\u306e\u307b\u3046\u306f10%\u3001GPU\u306e\u307b\u3046\u306f7\uff05\u3068\u3044\u3046\u3068\u3053\u308d\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1024\" height=\"412\" src=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.12.14-1024x412.png\" alt=\"\" class=\"wp-image-25906\" srcset=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.12.14-1024x412.png 1024w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.12.14-300x121.png 300w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.12.14-768x309.png 768w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2020-11-11-5.12.14.png 1486w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>\u958b\u767a\uff1a\u4e00\u65b9 SVG \u306b\u304a\u3051\u308b\u3001<a href=\"https:\/\/www.x3dom.org\">X3DOM<\/a>\u3067\u3059\u304c\u3002\u30d7\u30e9\u30b0\u30a4\u30f3\u4e0d\u8981\u3068\u4e3b\u5f35\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u306f\u540c\u3058\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.18.38.png\" alt=\"\" class=\"wp-image-25908\" width=\"656\" height=\"366\" srcset=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.18.38.png 875w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.18.38-300x167.png 300w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.18.38-768x428.png 768w\" sizes=\"(max-width: 656px) 100vw, 656px\" \/><\/figure><\/div>\n\n\n\n<p>\u958b\u767a\uff1a<a href=\"https:\/\/www.x3dom.org\/news\/\">WebGL 2.0 \u3082\u30b5\u30dd\u30fc\u30c8<\/a>\u3057\u3066\u3044\u308b\u3068\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u958b\u767a\uff1a\u305f\u3060\u3057\u3001X3DOM\u306e\u4eba\u3005\u304c\u5f37\u8abf\u3057\u3066\u3044\u308b\u70b9\u306f\u300cdeclarative\u300d\u3067\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/www.x3dom.org\"><img loading=\"lazy\" src=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.28.36.png\" alt=\"\" class=\"wp-image-25912\" width=\"656\" height=\"449\" srcset=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.28.36.png 875w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.28.36-300x205.png 300w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.28.36-768x526.png 768w\" sizes=\"(max-width: 656px) 100vw, 656px\" \/><\/a><\/figure>\n\n\n\n<p>\u793e\u9577\uff1a\u305d\u306e\u70b9\u306f\u3001SVG\u306a\u3089 2D\u3067\u30823D\u3067\u3082\u5171\u901a\u3068\u3044\u3046\u304b\u9023\u7d9a\u7684\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<p>\u958b\u767a\uff1a\u307e\u3042\u3001\u5ba3\u8a00\u7684\u306b\u66f8\u3051\u308b\u306a\u3089\u305d\u308c\u306b\u8d8a\u3057\u305f\u3053\u3068\u306f\u7121\u3044\u3068\u601d\u3046\u308f\u3051\u3067\u3059\u3002\u305d\u3082\u305d\u3082JavaScript\u304c\u5acc\u3044\u3060\u3063\u305f\u306e\u306f\u3001HTML\u3084CSS\u3067\u5ba3\u8a00\u7684\u306b\u66f8\u3051\u308b\u3079\u304d\u3068\u3053\u308d\u3092\u3044\u3061\u3044\u3061\u624b\u7d9a\u304d\u3067\u66f8\u304f\u3068\u3044\u3046\u306e\u304c\u6c17\u6301\u3061\u60aa\u304b\u3063\u305f\u304b\u3089\u3067\u3059\u3002\u305d\u308c\u306f\u3082\u3046HTML5\u3067\u306f\u307b\u307c\u89e3\u6c7a\u6e08\u307f\u3068\u601d\u308f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u793e\u9577\uff1aSVG\u306f\u500b\u3005\u306e\u30d1\u30fc\u30c4\u304c\u3044\u3061\u3044\u3061DOM\u306e\u8981\u7d20\u3067\u3042\u3063\u3066CSS\u3067\u5236\u5fa1\u3067\u304d\u3066\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3067\u304d\u308b\u306e\u306f\u9b45\u529b\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<p>\u958b\u767a\uff1a\u307e\u3042\u5ba3\u8a00\u7684\u3068\u3044\u3046\u306e\u306f\u3001WebGL\u3082\u4f3c\u305f\u3088\u3046\u306a\u3068\u3053\u308d\u306f\u3042\u308b\u3093\u3067\u3059\u3051\u3069\u3002<\/p>\n\n\n\n<p>\u793e\u9577\uff1a\u3046\u3061\u306f\u3061\u3087\u3063\u3068\u3060\u30513D\u3057\u3066\u307f\u305f\u3044\u3060\u3051\u306a\u306e\u3067\u3001\u3084\u3063\u3071SVG\u3067\u3059\u304b\u306d\u3002<\/p>\n\n\n\n<p>\u958b\u767a\uff1a\u5b9f\u88c5\u4e0a\u306f\u304b\u306a\u308a\u304b\u3076\u3063\u3066\u308b\u3068\u601d\u3046\u3093\u3067\u3059\u3088\u306d\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.w3.org\/community\/declarative3d\/#\"><img loading=\"lazy\" src=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.40.23.png\" alt=\"\" class=\"wp-image-25917\" width=\"662\" height=\"571\" srcset=\"https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.40.23.png 882w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.40.23-300x259.png 300w, https:\/\/its-more.jp\/ja_jp\/wp-content\/uploads\/2020\/11\/Screen-Shot-2020-11-11-at-5.40.23-768x663.png 768w\" sizes=\"(max-width: 662px) 100vw, 662px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>\u958b\u767a\uff1a\u307b\u3068\u3093\u3069\u306e\u5834\u5408\u306f2D\u3067\u3059\u3057\u3001WirtualBrowser\u306e\u8a18\u8ff0\u306b\u3082SVG\u304c\u9069\u5f53\u3060\u308d\u3046\u3068\u601d\u308f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u793e\u9577\uff1a\u3058\u3083\u307e\u3001\u3057\u3070\u3089\u304fX3DOM\u3067\u3084\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>-- 2020-1110 SatoxITS<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u793e\u9577\uff1a\u3055\u3066\u3001\u5f53\u793e\u88fdROFL\u3067\u3059\u304c\u3002 \u57fa\u76e4\uff1a3D\u3067\u5b9a\u7fa9\u3059\u308b\u3068\u3044\u3046\u3053\u3068\u306f\u6c7a\u5b9a\u4e8b\u9805\u3067\u3059\u306d\u3002 \u958b\u767a\uff1a\u305d\u308c\u3067\u3001canvas \u3067\u3084\u308b\u304b SVG \u304b\u3068\u3044\u3046\u9078\u629e\u306a\u3093\u3067\u3059\u304c\u3002\u524d\u63d0\u3068\u3057\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u4f9d\u5b58\u3067\u306a\u3044\u3068\u3044\u3046\u3053\u3068\u304c\u5fc5\u9808\u3067\u3059\u3002\u3067\u3001canv &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/its-more.jp\/ja_jp\/?p=25892\" class=\"more-link\"><span class=\"screen-reader-text\">\"3D : Canvas vs SVG\" \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=\/wp\/v2\/posts\/25892"}],"collection":[{"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25892"}],"version-history":[{"count":30,"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=\/wp\/v2\/posts\/25892\/revisions"}],"predecessor-version":[{"id":25930,"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=\/wp\/v2\/posts\/25892\/revisions\/25930"}],"wp:attachment":[{"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/its-more.jp\/ja_jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}