How To Learn About WebGLs And Three.Js

How To Learn About WebGLs And Three.Js

WebGL technology has become popular over the last few years since it’s no longer exclusive to big projects such as storytelling-based narratives and 3D scenes. Its use extends to secondary elements in the small effects with filters and composition, which can’t be replicated with CSS or JavaScript outside the canvas.

WebGL technology features beautifully crafted webGL sites that provide great experiences when compared to some of the nicest CSS based pages. If you want to create exceptional awwwards.com-esque websites, here are some great sources for learning webGL and three.js.

  1. Codrops
    Codrops is a good starting point for learning webGL/three.js as they dissect code from existing sites. It features various tutorials for learning different shaders and webGL with the source code. However, it helps to have preexisting knowledge of coding or webGL when using this site for better understanding.

With Codrops, you can learn anything from hover effects, wave motion effects, playing with texture projection to 3D folding layout technique for HTML, and scroll and refraction effects. The beauty of Codrops is that it’s free of charge, and it features the latest web design trends.

  1. DesignCourse
    DesignCourse is a YouTube page that features some of the simplest and easiest tutorials on web development and design. You can get a three.js crash course on the page for beginners. This course teaches you how to use webGL/three.js as a design element using the 3D element. You can then apply this knowledge to introduce more complexity to your design and become a pro within no time.

Unfortunately, for more crash courses, you have to sign up on DesignCourse for a premium membership. You can find the link to this in the description box in the videos.

  1. Three.js Fundamentals
    Three.js Fundamentals is a website that has numerous articles on learning three.js and webGL from beginner to complex concepts. Some of the things you can learn include primitives, scenegraph, textures, lights, shadows, and fogs. But, the articles on Three.js Fundamentals assume you already know JavaScript. Therefore, it’s a great resource for people who know how to code. For more information click here https://www.reddit.com/r/web_design/comments/g49ezj/what_is_a_good_starting_point_to_learn_those/.

WebGLs Three.js Learn Codrops CSS Javascript