A React Three Fiber starter kit to &nbsp;to get you started!

r3f-drei starter

What is the OpenGL Tutorial?The OpenGL Tutorial by Paroj is a structured resource aimed at teaching the fundamentals of modern OpenGL programming. Covering everything from the basics of rendering pipelines to advanced shader techniques, this guide is designed for developers and enthusiasts interested in building a solid foundation in OpenGL for graphics programming. With step-by-step explanations and hands-on examples, the tutorial makes it easier to understand key concepts essential for 3D rendering and real-time graphics.Key Features:<ul><li>Comprehensive Curriculum: Covers a wide range of topics, including rendering pipelines, vertex and fragment shaders, and 3D transformations.</li><li>Hands-On Approach: Provides practical examples and code snippets to reinforce each concept, making it suitable for learners who prefer a hands-on style.</li><li>Beginner-Friendly Explanations: Each topic is broken down into simple explanations, making complex graphics concepts accessible to newcomers.</li><li>Shader Programming: Introduces shader development, giving users a strong grasp of OpenGL’s programmable pipeline.</li><li>Open Source Access: The tutorial is freely available, allowing learners to experiment and build on the examples provided.</li></ul>Why Choose the OpenGL Tutorial?This tutorial is ideal for developers seeking a thorough and structured introduction to modern OpenGL. By working through the guide, you’ll gain practical knowledge and skills to create your own 3D graphics projects. Whether you’re a beginner or looking to refresh your OpenGL skills, this resource provides a comprehensive foundation for 3D graphics programming.

Learning Modern 3D Graphics Programming

OpenGL Tutorial – Foundational Guide to Modern OpenGL Programming

The Codrops Three.js demos page presents an extensive collection of visually captivating, interactive web experiments crafted with Three.js, focusing on innovative use of WebGL and shaders. This resource combines technical depth with artistic exploration, featuring projects ranging from immersive 3D scenes to animated visuals that push the boundaries of web-based graphics. Each demo includes unique visual effects or interactivity elements, providing inspiration for designers, developers, and artists interested in harnessing Three.js for advanced web design.

Codrops

This page showcases interactive Three.js demos, highlighting creative 3D web effects and animations.

<h4>Mastering Three.js Instancing – Learn Advanced Instancing Techniques for Three.js Resources</h4>What is Mastering Three.js Instancing?Mastering Three.js Instancing is a comprehensive course designed to teach developers how to use instancing techniques in three.js to create optimized, visually stunning 3D projects. With over 4 hours of project-based lessons, the course covers everything from the basics of instancing to advanced interactive 3D scenes, making it an invaluable resource for developers who want to push the boundaries of three.js performance and creativity.Key Features:<ul><li>4+ Hours of Lessons: The course offers more than 4 hours of project-based lessons, teaching you how to implement instancing and shaders in three.js.</li><li>Comprehensive Instancing Curriculum: Learn everything from the basics of instancing to creating complex 3D scenes with projects like the "Infinite Tunnel."</li><li>Shaders and Gradients: Explore shader creation and gradient effects with detailed lessons on adding rich visual elements to your instanced 3D scenes.</li><li>Exclusive Projects: Get access to the exclusive source code for the "Infinite Tunnel" project, a visually engaging 3D scene designed to enhance your understanding of instancing.</li><li>Mouse Interactive InstancedMesh: Master how to make interactive 3D scenes using three.js's InstancedMesh feature, allowing you to create mouse-responsive animations and effects.</li><li>Bonus Lessons: Delve deeper into shader exploration and advanced instancing techniques with bonus lessons, cheat sheets, and practical next steps.</li><li>Free Updates: Stay up-to-date with the latest versions of three.js as the course content is continually updated to reflect changes in the library.</li><li>Community Support: Gain access to an exclusive Discord community where you can share progress, ask questions, and get feedback.</li></ul> Who is this Course for?This course is suitable for developers who have a basic understanding of how to render objects using three.js but want to dive deeper into instancing and shader techniques. Whether you’re building 3D games, interactive websites, or data visualizations, this course is a valuable resource for expanding your skill set and pushing your three.js projects to new levels of performance and visual complexity.

Mastering threejs Instancing

Mastering Three.js Instancing teaches instancing techniques for creating advanced three.js.

The First Arabic Spoken Course for Three.jsUnlock the potential of 3D web development with the first-ever Arabic spoken course on Three.js. Whether you're a complete beginner or have some experience in web development, this course will guide you step by step through the fascinating world of 3D graphics. <h3>What You Will Learn:</h3><ul><li>Introduction to Three.js: Understand the basics of 3D modeling and rendering in the browser using this powerful JavaScript library.</li><li>Setting Up Your First Scene: Learn how to create objects, apply textures, and manage lighting in your 3D environment.</li><li>Animations and Interactions: Master the art of making dynamic and interactive 3D scenes that respond to user input.</li><li>Advanced Topics: Explore particle systems, shaders, and post-processing effects to bring your 3D creations to life.</li><li>Real-World Projects: Apply your skills to build immersive 3D web experiences with real-world examples and hands-on projects.</li></ul><h3>Why This Course?</h3><ul><li>First-of-its-kind in Arabic: This is the first course tailored specifically for Arabic speakers, breaking down complex concepts in a clear and accessible way.</li><li>Practical Approach: We focus on real-world applications to ensure you can implement everything you learn.</li><li>Step-by-Step Guidance: No prior experience with 3D graphics is needed. We’ll start from the basics and progressively build up your skills.</li><li>Complete Learning Package: From setting up your development environment to deploying your final 3D projects, we’ve got you covered.</li></ul><h3>Who Is This Course For?</h3><ul><li>Web developers looking to expand their skill set into 3D graphics.</li><li>Designers interested in creating interactive 3D experiences for the web.</li><li>Students and enthusiasts eager to dive into the world of 3D development.</li></ul>Join us in this groundbreaking course and become a pioneer in 3D web development using Three.js, all while learning in your native language!

Code with Posidoon

"The First Arabic Spoken Course for Three.js" Discover the power of Three.js and begin your journey 

Course Length: ~9 hours In this 10 part tutorial series, you'll learn how to code your very own Minecraft clone with JavaScript and Three.js! Video Topics<ol><li>Introduction</li><li>World Generation</li><li>Block Types</li><li>Player Controller</li><li>Collision Detection</li><li>Infinite Terrain</li><li>Add/Remove Blocks</li><li>Trees, Water &amp; Clouds</li><li>Tool Animations, UI and Save/Load Functionality</li><li>Biomes</li></ol>

Learn to Code a Minecraft Clone

Learn to code a MInecraft clone with Three.js in this 10 part video series!

Create 3D games and experiences for web, mobile, and VR using Hology Engine web technologies. Suitable for designers, web developers, artists, creators, educators, and game developers who wish to use front-end web technologies such as React and TypeScript, and no-code solutions for features such as VFX. Use case: Building web, mobile, PC games/applications, 3D/VR websites, personal portfolios online, and more. Efficiency: Hot reloading, fast asset import, automatic collision shapes, plus easy mobile and web distribution. Minimalistic: Our minimalistic UI is inspired to help designers, artists, and developers to a fast prototyping experience. Available to use on Windows, Linux, macOS, and we will build a version for iPads in the future.

Hology Engine

Create 3D games and experiences for web, mobile and VR by using web technologies with Hology Engine.

Awesome Generative Art is a repository specifically dedicated to creating, learning and dropping generative art, as well as providing links that help you engage with the community! Below you'll find curated lists of tutorials, frameworks, libraries, and platforms to get you started and to advance your skills.

Awesome Generative Art

Carefully curated list of awesome resources to create, learn and, drop generative art

<h4>LSL Shaders from Scratch – Master Shader Programming for Three.js Resources</h4> What is GLSL Shaders from Scratch?GLSL Shaders from Scratch is a comprehensive course designed by SimonDev to teach developers how to create custom GLSL shaders from the ground up. Shaders are essential for controlling the appearance of 3D objects and effects in real-time 3D rendering, and this course is a perfect resource for those looking to enhance their three.js projects with custom visual effects. The course breaks down complex shader concepts, making them accessible even to beginners. Key Features:<ul><li>Complete Shader Programming Guide: Learn the fundamentals of GLSL (OpenGL Shading Language), including vertex and fragment shaders, and apply them to three.js.</li><li>Hands-On Projects: The course provides practical examples and projects that focus on creating real-time visual effects like lighting, shadows, and reflections.</li><li>From Basics to Advanced: Whether you're a beginner or have some experience with shaders, this course will help you understand and master shader programming step-by-step.</li><li>Three.js Integration: Specifically designed for developers working with three.js, this course shows how to integrate custom shaders into your 3D scenes.</li><li>Lifetime Access: Once enrolled, you receive lifetime access to the course materials, updates, and the ability to revisit the content anytime.</li></ul> Why Choose GLSL Shaders from Scratch?If you’re looking to add unique and creative visual effects to your three.js resources, this course is the perfect way to deepen your understanding of GLSL shaders. From creating dynamic lighting effects to custom water shaders, the course gives you all the tools needed to enhance your three.js projects with custom shaders.

Glsl Shaders from scratch

GLSL Shaders from Scratch teaches you to create custom shaders, enhancing three.js resources.

<h4>Three.js Journey – The Ultimate Learning Resource for Three.js</h4> What is Three.js Journey?Three.js Journey is a comprehensive, step-by-step course designed to teach developers the essentials of three.js and 3D web development. Created by Bruno Simon, it is widely recognized as one of the most complete learning resources available for three.js, offering an in-depth curriculum that covers everything from the basics to advanced 3D techniques. The course is structured to help you build interactive and visually stunning web experiences.Key Features:<ul><li>Step-by-Step Learning Path: The course guides you through each topic in a structured way, making it suitable for beginners and experienced developers alike.</li><li>Hands-On Projects: Apply what you learn by building real-world 3D projects, enhancing your understanding of three.js concepts.</li><li>Comprehensive Coverage: Covers a wide range of topics, including shaders, animations, lighting, physics, and particle systems.</li><li>Regular Updates: The content is continually updated with new techniques and resources, ensuring you stay up-to-date with the latest in 3D web development.</li><li>Community Access: Gain access to a private community of learners, where you can share your progress, ask questions, and get feedback.</li></ul> Why Choose Three.js Journey?Three.js Journey is perfect for developers who want a thorough and organized learning experience to master three.js. The course not only teaches you how to use the library but also dives into the underlying principles of 3D graphics. By the end of the course, you will have a deep understanding of three.js resources, enabling you to create professional-grade 3D web experiences.

Threejs Journey

Three.js Journey is a comprehensive course to master three.js and 3D web development.

Three js Educational