{"id":1988,"date":"2022-04-04T10:57:59","date_gmt":"2022-04-04T14:57:59","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/?p=1988"},"modified":"2022-04-09T12:31:34","modified_gmt":"2022-04-09T16:31:34","slug":"merlerker-finalphase1","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/merlerker\/04\/04\/merlerker-finalphase1\/","title":{"rendered":"merlerker-FinalPhase1"},"content":{"rendered":"<p>My goal is to get a working understanding of three.js\/WebGL and shaders. I want to learn some basics (geometries, textures\/materials, lighting, camera) &#8211; just enough to understand what&#8217;s involved and how to control it, I know I could go really deep into any of those &#8220;basics.&#8221; And then learn how to make scroll-based animations and use shaders.<\/p>\n<p>I still need to come up with an actual project to apply all this to &#8211; maybe since I&#8217;m interested in product repair I could find an exploded model of a Fairphone\/iPhone and have it assemble\/rotate as you scroll.<\/p>\n<ul>\n<li>geometry: three.js Geometry classes, how to load models<\/li>\n<li>materials: three.js Material classes, how to load shader materials<\/li>\n<li>lights<\/li>\n<li>cameras &amp; controls: three.js Camera classes, controls,<\/li>\n<li>making my own shaders: shaderpark, GLSL<\/li>\n<\/ul>\n<p><strong>three.js resources<\/strong><\/p>\n<ul>\n<li>https:\/\/threejs.org\/manual\/<\/li>\n<li>https:\/\/threejs-journey.com\/<\/li>\n<\/ul>\n<p><strong>three.js animation resources<\/strong><\/p>\n<ul>\n<li>https:\/\/tympanus.net\/codrops\/2022\/01\/05\/crafting-scroll-based-animations-in-three-js\/<\/li>\n<li>https:\/\/sbcode.net\/threejs\/animate-on-scroll\/<\/li>\n<\/ul>\n<p><strong>demos &amp; guides<\/strong><\/p>\n<ul>\n<li>https:\/\/rd.nytimes.com\/research\/3d-web-technology<\/li>\n<li>https:\/\/rd.nytimes.com\/research\/spatial-journalism<\/li>\n<\/ul>\n<p><strong>Shader resources<\/strong><\/p>\n<ul>\n<li>https:\/\/shaderpark.com\/<\/li>\n<li>https:\/\/www.shadertoy.com\/<\/li>\n<li>https:\/\/shaderbooth.com\/<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>My goal is to get a working understanding of three.js\/WebGL and shaders. I want to learn some basics (geometries, textures\/materials, lighting, camera) &#8211; just enough to understand what&#8217;s involved and how to control it, I know I could go really deep into any of those &#8220;basics.&#8221; And then learn how to make scroll-based animations and &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/merlerker\/04\/04\/merlerker-finalphase1\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;merlerker-FinalPhase1&#8221;<\/span><\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/1988"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/comments?post=1988"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/1988\/revisions"}],"predecessor-version":[{"id":2062,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/1988\/revisions\/2062"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/media?parent=1988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/categories?post=1988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/tags?post=1988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}