We may earn an affiliate commission when you visit our partners.
PLEASE READ: This is a freemium course—the first hour and a half are free (you can watch right here on Udemy [or YouTube] with each video's "Preview" button), while the remaining 3 hours require course purchase. I've always been a big advocate of spreading the basics to as many people as possible, as I believe knowledge and personal growth are some of the best ways to better our world as a whole. Enjoy.
Read more
PLEASE READ: This is a freemium course—the first hour and a half are free (you can watch right here on Udemy [or YouTube] with each video's "Preview" button), while the remaining 3 hours require course purchase. I've always been a big advocate of spreading the basics to as many people as possible, as I believe knowledge and personal growth are some of the best ways to better our world as a whole. Enjoy.
Read more
PLEASE READ: This is a freemium course—the first hour and a half are free (you can watch right here on Udemy [or YouTube] with each video's "Preview" button), while the remaining 3 hours require course purchase. I've always been a big advocate of spreading the basics to as many people as possible, as I believe knowledge and personal growth are some of the best ways to better our world as a whole. Enjoy.
Welcome to the Intermediate ThreeJS with Shaders course, where you will learn how to create an interactive 3d globe with custom ThreeJS shaders.
My name is Christopher Lis, and I'm an award winning Full-Stack Engineer with over ten years of web development experience. I've directly worked with clients like Harvard University, The Basketball Tournament, and premium award winning agencies like Brave People.
The goal of this course is to get you writing your own custom ThreeJS shaders with GLSL, and to help you understand how to import these shaders into a practical ThreeJS scene. You'll also learn how to dynamically place data points on a globe based on the latitude and longitude of different countries. There are little to no videos out there that actually go into this topic in-depth so I figured I should tackle it.
In this course, you'll learn everything from:
- Vertex Shaders
- Fragment Shaders
- Import Shaders with Vite Plugins
- Normals
- Uniforms
- Attributes
- Varyings
- Point clouds and particles
- Bulk Data Imports
- Rectangular Mesh Animation
- Click and Drag Functionality
- Scene Responsiveness
- Touch Event Listeners
And so much more.
If you're serious about taking your ThreeJS skills to the next level, then shaders are logically the next step after become acquainted with the framework. Let me guide you through the full production of a 3d scene you can actually use for a real website.
Register for this course and see more details by visiting:
OpenCourser.com/course/dnxgc4/intermediate
12 deals to help you save
We found 12 deals and offers that may be relevant to this course.
Save money when you learn.
All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout.
Only 4 days left!
Get skills that impress
Learn from courses across popular topics and take big discounts during this 48-hour sale.
Up to
80%
off
ST20MT111124A
Use code at checkout.
Valid until December 1
For new customers
Save when you purchase top courses. For new customers only.
Special Offer
UDEAFNULP2024
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off
Good to know
Good to know
Know what's good ,
what to watch for , and
possible dealbreakers
Examines advanced concepts in ThreeJS via the lens of custom shaders, which is highly relevant to industry applications
Taught by Christopher Lis, an award winning Full-Stack Engineer with over ten years of web development experience
Develops advanced ThreeJS skills, which are becoming increasingly in demand in the web development industry
Features extensive coverage of topics such as vertex and fragment shaders, uniforms, attributes, varyings, and point clouds, providing a comprehensive foundation in these essential concepts
Provides practical examples and demonstrations of these concepts in action, empowering learners to apply their knowledge in real-world scenarios
Requires learners to have a familiarity with ThreeJS and GLSL, making it suitable for intermediate learners looking to enhance their skills
Save this course
Save Intermediate Three.js with Shaders to your list so you can find it easily later:
Save
Save
Activities
Be better prepared
before
your course. Deepen your understanding
during
and
after
it. Supplement your coursework and achieve mastery of the topics covered
in Intermediate Three.js with Shaders with these
activities:
Shaders Review
Show steps
Refresh your knowledge of shaders before starting the course.
Browse courses on
Shaders
Show steps
-
Review articles or documentation on shaders.
Assist Beginner Shader Developers
Show steps
Enhance your understanding by helping others learn the basics of ThreeJS shaders.
Show steps
-
Identify opportunities to mentor or assist beginner shader developers.
-
Provide guidance and support to help them overcome challenges.
WebGL Overview
Show steps
Review the basics of the WebGL graphics library, which is foundational to ThreeJS.
Browse courses on
WebGL
Show steps
-
Read an introduction to WebGL.
-
Complete a tutorial on basic WebGL concepts.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Shader Discussion Group
Show steps
Engage in discussions with peers to exchange knowledge and insights on ThreeJS shaders.
Show steps
-
Join or create a discussion group focused on ThreeJS shaders.
-
Participate in discussions, ask questions, and share your own experiences.
Interactive Globe Creation
Show steps
Apply the principles of ThreeJS shaders to the creation of an interactive 3D globe.
Show steps
-
Set up a ThreeJS project.
-
Create a basic 3D globe.
-
Implement shaders to add interactivity.
Shader Coding Exercises
Show steps
Improve your shader coding skills through regular practice and challenges.
Show steps
-
Find coding challenges or exercises related to ThreeJS shaders.
-
Attempt to solve the challenges and implement the solutions.
Additional ThreeJS Shader Examples
Show steps
Expand your knowledge of ThreeJS shaders by following additional tutorials and examples.
Show steps
-
Find tutorials or examples that cover advanced shader techniques.
-
Follow the tutorials and implement the techniques in your own projects.
ThreeJS Shaders Tutorial
Show steps
Reinforce your understanding of ThreeJS shaders by creating a tutorial for beginners.
Show steps
-
Plan the content and structure of the tutorial.
-
Write the tutorial, explaining the concepts of shaders in detail.
-
Create code examples to illustrate the concepts.
Shaders Review
Show steps
Refresh your knowledge of shaders before starting the course.
Browse courses on
Shaders
Show steps
Show steps
Show steps
- Review articles or documentation on shaders.
Assist Beginner Shader Developers
Show steps
Enhance your understanding by helping others learn the basics of ThreeJS shaders.
Show steps
Show steps
Show steps
- Identify opportunities to mentor or assist beginner shader developers.
- Provide guidance and support to help them overcome challenges.
WebGL Overview
Show steps
Review the basics of the WebGL graphics library, which is foundational to ThreeJS.
Browse courses on
WebGL
Show steps
Show steps
Show steps
- Read an introduction to WebGL.
- Complete a tutorial on basic WebGL concepts.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Shader Discussion Group
Show steps
Engage in discussions with peers to exchange knowledge and insights on ThreeJS shaders.
Show steps
Show steps
Show steps
- Join or create a discussion group focused on ThreeJS shaders.
- Participate in discussions, ask questions, and share your own experiences.
Interactive Globe Creation
Show steps
Apply the principles of ThreeJS shaders to the creation of an interactive 3D globe.
Show steps
Show steps
Show steps
- Set up a ThreeJS project.
- Create a basic 3D globe.
- Implement shaders to add interactivity.
Shader Coding Exercises
Show steps
Improve your shader coding skills through regular practice and challenges.
Show steps
Show steps
Show steps
- Find coding challenges or exercises related to ThreeJS shaders.
- Attempt to solve the challenges and implement the solutions.
Additional ThreeJS Shader Examples
Show steps
Expand your knowledge of ThreeJS shaders by following additional tutorials and examples.
Show steps
Show steps
Show steps
- Find tutorials or examples that cover advanced shader techniques.
- Follow the tutorials and implement the techniques in your own projects.
ThreeJS Shaders Tutorial
Show steps
Reinforce your understanding of ThreeJS shaders by creating a tutorial for beginners.
Show steps
Show steps
Show steps
- Plan the content and structure of the tutorial.
- Write the tutorial, explaining the concepts of shaders in detail.
- Create code examples to illustrate the concepts.
Career center
Learners who complete Intermediate Three.js with Shaders will develop knowledge and skills
that may be useful to these careers:
Web Developer
Web Developer
As a Web Developer, you will be responsible for coding the look and functionality of websites and applications. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D experiences for the web.
Game Developer
Game Developer
As a Game Developer, you will be responsible for designing, developing, and testing video games. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D games for the web.
Software Engineer
Software Engineer
As a Software Engineer, you will be responsible for designing, developing, and testing software applications. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D experiences for the web.
Data Scientist
Data Scientist
As a Data Scientist, you will be responsible for collecting, analyzing, and interpreting data. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D visualizations of data.
User Experience Designer
User Experience Designer
As a User Experience Designer, you will be responsible for designing the look and feel of websites and applications. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D experiences for users.
Technical Artist
Technical Artist
As a Technical Artist, you will be responsible for creating 3D models, textures, and animations for video games and other applications. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D experiences for the web.
Graphic designer
Graphic designer
As a Graphic Designer, you will be responsible for creating visual concepts for websites, applications, and other media. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D graphics for the web.
Animator
Animator
As an Animator, you will be responsible for creating animations for video games, movies, and other media. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D animations for the web.
Web Designer
Web Designer
As a Web Designer, you will be responsible for designing the layout and look of websites. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D experiences for the web.
Data Analyst
Data Analyst
As a Data Analyst, you will be responsible for collecting, analyzing, and interpreting data. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D visualizations of data.
Information Technology Specialist
Information Technology Specialist
As an Information Technology Specialist, you will be responsible for maintaining and troubleshooting computer systems. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D experiences for the web.
Systems Administrator
Systems Administrator
As a Systems Administrator, you will be responsible for managing and troubleshooting computer systems. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D experiences for the web.
Database Administrator
Database Administrator
As a Database Administrator, you will be responsible for managing and troubleshooting databases. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D visualizations of data.
Network Administrator
Network Administrator
As a Network Administrator, you will be responsible for managing and troubleshooting computer networks. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course will teach you how to use ThreeJS and shaders to create beautiful and interactive 3D experiences for the web.
Information Security Analyst
Information Security Analyst
As an Information Security Analyst, you will be responsible for protecting computer systems from cyberattacks. ThreeJS is a JavaScript library that allows you to create 3D graphics in a web browser, and shaders are a way to customize the appearance of these graphics. This course may be useful for learning how to create secure 3D applications.
For more career information including salaries, visit:
OpenCourser.com/course/dnxgc4/intermediate
Reading list
We've selected seven books
that we think will supplement your
learning. Use these to
develop background knowledge, enrich your coursework, and gain a
deeper understanding of the topics covered in
Intermediate Three.js with Shaders.
Provides a comprehensive overview of real-time rendering techniques and algorithms. Covers topics such as rasterization, shading, and post-processing, which can enhance the understanding of how shaders fit into the overall graphics pipeline.
Provides a comprehensive treatment of physically based rendering (PBR), which is becoming increasingly important in modern graphics pipelines. Covers the theoretical foundations and practical implementation techniques of PBR, which can enhance the understanding of how shaders can be used to simulate realistic materials.
Provides a comprehensive overview of graphics shaders, covering the mathematical and algorithmic foundations as well as practical implementation techniques. Suitable for readers with a strong interest in the theoretical underpinnings of shaders.
Provides a comprehensive foundation in computer graphics, covering the fundamentals of 3D graphics and shaders. Introduces key concepts such as vertices, fragments, and lighting models, which are essential for understanding shaders in Three.js.
Provides a comprehensive collection of shader recipes and techniques, covering various aspects of graphics programming. Serves as a valuable reference for exploring different shader effects and implementations.
Save
Provides a comprehensive introduction to JavaScript for artists and designers. Covers programming concepts such as variables, functions, and loops, which are essential for understanding the implementation of shaders in Three.js.
Focuses on the practical aspects of data visualization using web technologies. Includes chapters on using Three.js for creating interactive 3D visualizations, which can complement the course's focus on shader-based effects.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/dnxgc4/intermediate
Share
Similar courses
Here are nine courses similar to
Intermediate Three.js with Shaders.
Learn Three.Js and Shaders from scratch
OpenCourser.com/course/tutlqk/learn
Learn Three.Js and Shaders from scratch
Most relevant
Learn GLSL Shaders from Scratch
OpenCourser.com/course/gf4s2w/learn
Learn GLSL Shaders from Scratch
Most relevant
Lighting, Reflection, and Post Processing Effects
OpenCourser.com/course/qypd0m/lighting
Lighting, Reflection, and Post Processing Effects
Blender 4 Modeling and Geometry Node Workshop
OpenCourser.com/course/y8thtz/blender
Blender 4 Modeling and Geometry Node Workshop
Three.js and TypeScript
OpenCourser.com/course/1enmdu/three
Three.js and TypeScript
3D Reconstruction - Multiple Viewpoints
OpenCourser.com/course/gz3pet/3d
3D Reconstruction - Multiple Viewpoints
Practical OpenGL and GLSL shaders fundamentals with C++
OpenCourser.com/course/z2o240/practical
Practical OpenGL and GLSL shaders fundamentals with C++
Understanding Database Architecture with Oracle
OpenCourser.com/course/dacllq/understanding
Understanding Database Architecture with Oracle
3D Reconstruction - Single Viewpoint
OpenCourser.com/course/sggy0h/3d
3D Reconstruction - Single Viewpoint
Effort
4.5 total hours
Via
Udemy
Good to know
Examines advanced concepts in ThreeJS via the lens of custom shaders, which is highly relevant to industry applications
Taught by Christopher Lis, an award winning Full-Stack Engineer with over ten years of web development experience
Develops advanced ThreeJS skills, which are becoming increasingly in demand in the web development industry
Features extensive coverage of topics such as vertex and fragment shaders, uniforms, attributes, varyings, and point clouds, providing a comprehensive foundation in these essential concepts
Provides practical examples and demonstrations of these concepts in action, empowering learners to apply their knowledge in real-world scenarios
Requires learners to have a familiarity with ThreeJS and GLSL, making it suitable for intermediate learners looking to enhance their skills
Our mission
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
Affiliate disclosure
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
© 2016 - 2024 OpenCourser