A series of articles introducing TSL.

Get to grips with ThreeJS Shading Language (TSL)

JSDev Space is a comprehensive platform dedicated to JavaScript developers. Whether you're a beginner or an expert, it offers insightful tutorials, the latest JavaScript news, and in-depth guides to modern frameworks and tools. From mastering ES6 features to exploring cutting-edge web technologies, JSDev Space helps you stay ahead in the fast-evolving world of web development. Join a vibrant community of developers and take your JavaScript skills to the next level!

JSDev Space

JSDev Space delivers JavaScript tutorials, news, and tools to elevate your web development skills.

In this article, Dive into WebGPU - Part 3, OkayDev continues its in-depth exploration of the WebGPU API, focusing on how developers can leverage the new graphics technology to build high-performance, low-level 3D applications directly in the browser. The series provides valuable insights and practical examples for developers interested in working with WebGPU. <h3>Key Highlights:</h3><ul><li>Detailed explanations of WebGPU’s architecture and how to interact with it.</li><li>Practical examples to guide developers through the process of creating 3D scenes and rendering techniques.</li><li>Covers optimization tips for improving performance with WebGPU.</li></ul>This article is a great resource for developers who want to get a deeper understanding of WebGPU and harness its power for building cutting-edge graphics applications in the browser.

Into WebGPU

Franky Arkon shares a detailed guide on creating realistic yet performant water wave effects in Three.js. The blog covers a step-by-step process to achieve visually stunning water surfaces optimized for real-time applications. <h3>Key Highlights:</h3><ul><li>Shader Techniques: Explanation of custom vertex and fragment shaders for simulating dynamic wave motion.</li><li>Performance Optimization: Strategies to balance visual quality with rendering speed, ensuring smooth performance.</li><li>Practical Examples: Clear code snippets and visuals to help developers integrate the effect into their projects.</li></ul>This tutorial is an excellent resource for anyone looking to add lifelike water simulations to their 3D applications while keeping performance in check.

Realistic and Fast Water Waves

Shader Techniques: Explanation of custom vertex and fragment shaders for simulating dynamic wave mot

Have you ever experienced a sense of disorientation while watching a movie, especially during moments of high tension or panic? As if the space around the protagonist starts to twist and turn, creating an almost vertiginous effect? This is the famous Dolly Zoom, also known as the Vertigo Effect. First appearing in Alfred Hitchcock’s masterpiece “Vertigo,” this cinematic technique continues to be widely used today in films, animations, advertisements, and video games due to its power to convey strong emotions. What is the Dolly Zoom?

From Perspective to Orthographic Camera in Three.js with Dolly Zoom — Vertigo Effect

A short article showing how to implement a Dolly Zoom effect in three.js

What is the Glossy Spheres in Three.js Tutorial?The Glossy Spheres in Three.js tutorial by Pierfrancesco Soffritti provides a comprehensive guide for creating highly realistic, glossy sphere effects in Three.js. This tutorial walks developers through the techniques for achieving reflective, polished surfaces on 3D objects, making it an invaluable resource for those aiming to add a touch of realism to their 3D scenes. It covers practical steps and shader adjustments, allowing you to produce eye-catching visuals with ease.Key Features:<ul><li>Step-by-Step Guidance: The tutorial breaks down each stage of the process, making it easy to follow for beginners and intermediate users.</li><li>Realistic Reflections: Learn to create glossy surfaces with accurate reflections, ideal for adding depth and realism to your 3D projects.</li><li>Shader Techniques: Delve into shader programming, gaining insights into the underlying techniques that produce realistic lighting and reflections.</li><li>Customizable Parameters: Easily adjust parameters to achieve different levels of glossiness and reflection, giving you creative control over the final look.</li><li>Applicable to Other Shapes: Although the tutorial focuses on spheres, the techniques can be adapted for other objects in Three.js.</li></ul>Why Choose the Glossy Spheres Tutorial?This tutorial is perfect for developers and 3D artists looking to bring a professional, polished look to their web-based 3D scenes. By following the guide, you’ll learn practical methods for achieving realistic reflections, making your Three.js projects more visually engaging and immersive. It’s a great resource to deepen your understanding of shaders and lighting in Three.js.

Glossy spheres 

Glossy Spheres in Three.js – Tutorial for Realistic 3D Reflections

Three js blog