{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/computer-graphics-first-step","result":{"data":{"markdownRemark":{"id":"83596392-1523-5778-acb2-fd4e081a9960","html":"<p><a href=\"https://qiita.com/advent-calendar/2021/media-and-xr-lonely\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">画像・動画・音声処理および XR 一人アドベントカレンダー</a> 8 日目の記事です。</p>\n<p>CG (コンピュータグラフィックス) に興味を持って最初に調べたことをまとめます。</p>\n<h2 id=\"cg-コンピュータグラフィックス-とは\" style=\"position:relative;\"><a href=\"#cg-%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9-%E3%81%A8%E3%81%AF\" aria-label=\"cg コンピュータグラフィックス とは permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>CG (コンピュータグラフィックス) とは</h2>\n<p>まず最初に、そもそも CG とは？についてですが、Wikipedia から引用すると、</p>\n<blockquote>\n<p>コンピュータグラフィックス（英: computer graphics、略称: CG）は、コンピュータを用いて画像を生成する科学技術、及びその技術によって生成される画像のことである。</p>\n</blockquote>\n<p>とのことです。</p>\n<p>参考: <a href=\"https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">コンピュータグラフィックス - Wikipedia</a></p>\n<h2 id=\"cg-を学ぶ際に登場する要素\" style=\"position:relative;\"><a href=\"#cg-%E3%82%92%E5%AD%A6%E3%81%B6%E9%9A%9B%E3%81%AB%E7%99%BB%E5%A0%B4%E3%81%99%E3%82%8B%E8%A6%81%E7%B4%A0\" aria-label=\"cg を学ぶ際に登場する要素 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>CG を学ぶ際に登場する要素</h2>\n<p>CG といってもどのような要素があるのか全然想像もつかなかったので、参考になりそうな情報を探しました。</p>\n<h3 id=\"cg-エンジニア検定\" style=\"position:relative;\"><a href=\"#cg-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E6%A4%9C%E5%AE%9A\" aria-label=\"cg エンジニア検定 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>CG エンジニア検定</h3>\n<p>公益財団法人画像情報教育振興協会 (CG-ARGS) が運営する「CG-ARGS 検定」というものが、ゲームエンジニアなどが CG を学ぶ際によくおすすめされているようです。</p>\n<p>このカリキュラムを見てみると、「CG を学びたい」という際にどんな要素があるのか分かりやすかったです。</p>\n<p>具体的には、</p>\n<ul>\n<li>座標変換</li>\n<li>モデリング</li>\n<li>レンダリング</li>\n<li>アニメーション</li>\n<li>画像処理</li>\n</ul>\n<p>などの要素があるようです。</p>\n<p>参考: <a href=\"https://www.cgarts.or.jp/kentei/about/cg_engineer/index.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">CG-ARTS |  検定</a></p>\n<h3 id=\"各種カリキュラム\" style=\"position:relative;\"><a href=\"#%E5%90%84%E7%A8%AE%E3%82%AB%E3%83%AA%E3%82%AD%E3%83%A5%E3%83%A9%E3%83%A0\" aria-label=\"各種カリキュラム permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>各種カリキュラム</h3>\n<p>その他、検索してみるとカリキュラムや講義内容を公開している大学もあったりするので、そういった情報をとっかかりとして勉強してみても良いかもしれません。</p>\n<p>デジタルハリウッドスクールのカリキュラムなども参考になります。</p>\n<p>参考: <a href=\"https://school.dhw.co.jp/course/cgvfx/curriculum/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">カリキュラム｜本科 CG/VFX 専攻｜デジタルハリウッドの専門スクール（学校）</a></p>\n<h2 id=\"用語\" style=\"position:relative;\"><a href=\"#%E7%94%A8%E8%AA%9E\" aria-label=\"用語 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>用語</h2>\n<p>CG についてざっくり調べる中で出会った知らない言葉について書いていきます。</p>\n<h3 id=\"vfx\" style=\"position:relative;\"><a href=\"#vfx\" aria-label=\"vfx permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>VFX</h3>\n<p>VFX は visual effects の略で、映像作品における視覚効果のことを指すようです。</p>\n<p>参考: <a href=\"https://ja.wikipedia.org/wiki/VFX\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">VFX - Wikipedia</a></p>\n<h3 id=\"シェーダー\" style=\"position:relative;\"><a href=\"#%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC\" aria-label=\"シェーダー permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>シェーダー</h3>\n<p>なぜか「シェーダー」という用語だけ耳にしたことがあったので調べたところ、レンダリングの一部の、「陰影処理」のことだそうです。</p>\n<p>参考: <a href=\"https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">シェーダー - Wikipedia</a></p>\n<h2 id=\"ライブラリ・api\" style=\"position:relative;\"><a href=\"#%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%BBapi\" aria-label=\"ライブラリ・api permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ライブラリ・API</h2>\n<p>3DCG に関するライブラリを調べてみたところ、以下のページが見つかりました。</p>\n<ul>\n<li><a href=\"https://ja.wikipedia.org/wiki/3D%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">3D ライブラリ - Wikipedia</a></li>\n</ul>\n<p>非常に膨大な数があるようです。</p>\n<p>特に気になるものについて少し書いていきます。</p>\n<h3 id=\"opengl\" style=\"position:relative;\"><a href=\"#opengl\" aria-label=\"opengl permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>OpenGL</h3>\n<p>OpenGL は、ライブラリというよりは仕様書のようなもので、CG を学ぶ上でよく使われるようです。</p>\n<p>参考: <a href=\"http://www.den.t.u-tokyo.ac.jp/ad_prog/graphics/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">グラフィックスの基礎 - 東京大学工学部 精密工学科 プログラミング応用 I・II</a></p>\n<h3 id=\"webgl\" style=\"position:relative;\"><a href=\"#webgl\" aria-label=\"webgl permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>WebGL</h3>\n<p>WebGL は、ウェブブラウザ上で CG をレンダリングするための JavaScript API です。</p>\n<p>有名な Three.js も WebGL を使っているとのことです。</p>\n<p>参考: <a href=\"https://ja.wikipedia.org/wiki/WebGL\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">WebGL - Wikipedia</a></p>\n<h2 id=\"3dcg-制作ソフト\" style=\"position:relative;\"><a href=\"#3dcg-%E5%88%B6%E4%BD%9C%E3%82%BD%E3%83%95%E3%83%88\" aria-label=\"3dcg 制作ソフト permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>3DCG 制作ソフト</h2>\n<p>最後に、3DCG 制作ソフトについてです。</p>\n<p>無料の 3DCG 制作ソフトとして最も有名なのは Blender だと思いますが、他にもたくさんあるようでした。</p>\n<p>参考</p>\n<ul>\n<li><a href=\"https://vook.vc/n/2751\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Blender だけじゃない！CG ソフトの種類と選び方 | Vook(ヴック)</a></li>\n<li><a href=\"https://online.dhw.co.jp/kuritama/free-software-useful-for-creating-3dcg/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">3DCG 作成におすすめの無料ソフト 6 選！CG 作成初心者は必見 | デジハリ・オンラインスクール</a></li>\n<li><a href=\"https://qeee.jp/magazine/articles/13332\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">【3D グラフィックソフト 19 選】初心者でも利用しやすいソフトを紹介！ | QEEE</a></li>\n<li><a href=\"https://c3dpoly.com/3dcg-software\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">3DCG 初心者向けに主な CG ソフトについて紹介するよ！</a></li>\n<li><a href=\"https://ranking.goo.ne.jp/select/19788\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">【2021 年最新版】3DCG 制作ソフトの人気おすすめランキング 10 選｜セレクト - goo ランキング</a></li>\n</ul>","fields":{"slug":"/posts/computer-graphics-first-step","tagSlugs":["/tag/computer-graphics/"],"autoRecommendPosts":["audio-video-streaming-data-basics","image-file-format-basics","media-art-and-digital-art-overview","movie-processing-software"]},"frontmatter":{"date":"2021-12-08T10:20:55.669Z","description":"CG (コンピュータグラフィックス) に興味を持って最初に調べたことをまとめます。","tags":["computer-graphics"],"title":"CG (コンピュータグラフィックス) に興味を持って最初に調べたこと","socialImage":null,"recommendPosts":null}}},"pageContext":{"slug":"/posts/computer-graphics-first-step"}},"staticQueryHashes":["251939775","3942705351","401334301"]}