# shaders Published articles for shaders. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Optimizing CPU-side Rendering Code DevFeed: [Optimizing CPU-side Rendering Code]() Original publisher: [Read original article]() Author: Clay John Published: 2026-09-15T17:00:00Z Content type: tutorial Language: en Sources: [Godot Engine Official]() Topics: [Godot](), [Optimization](), [cpu](), [GPU](), [shaders]() Tags: [batching](), [bug](), [cpu](), [gpu](), [optimization](), [performance](), [performance-optimization](), [progress-report](), [shaders]() ### AI overview This article explains how Godot optimizes CPU-side rendering code. It describes balancing CPU and GPU workloads, identifying performance bottlenecks, investigating solutions, measuring results, and repeating the process. ### Source excerpt Optimizing CPU code is a lot of fun. Here's how we do it ## Figma Is Turning Designers Into Plugin Makers DevFeed: [Figma Is Turning Designers Into Plugin Makers]() Original publisher: [Read original article]() Author: Alex Harper Published: 2026-09-14T15:30:00Z Content type: article Language: en Sources: [Web Designer Depot]() Topics: [Figma](), [Figma plugin](), [Artificial Intelligence](), [shaders](), [shader programming](), [Programming]() Tags: [ai](), [ai-design-tools](), [ai-for-designers](), [ai-plugins](), [artificial-intelligence](), [creative-software](), [design-automation](), [design-tools](), [figma](), [figma-agent](), [figma-ai](), [figma-community](), [figma-plugin](), [figma-plugins](), [figma-shaders](), [future-of-design](), [generate](), [generative-ai](), [generative-plugins](), [no-code-tools](), [procedural](), [shader-programming](), [shaders](), [ui-design](), [ux-design](), [web-design](), [web-development]() ### AI overview Figma is enabling designers to describe and generate coded plugins with AI instead of searching for existing tools. The article explains that these plugins can solve highly specific workflow problems, be published to the Figma Community or shared privately, and include features such as bulk restyling, type-ramp generation, layer renaming, and prototype-flow checking. Figma also offers AI-generated shaders for procedural and interactive visual effects, with code inspection available for shaders and self-created generative plugins. ### Source excerpt Figma is turning a wild idea into reality: instead of searching for the perfect plugin, you can just ask AI to build it. If this catches on, designers may stop choosing the tools in their software--and start inventing them on demand. ## Inside the First Three.js Conference in Paris DevFeed: [Inside the First Three.js Conference in Paris]() Original publisher: [Read original article]() Author: Manoela Ilic Published: 2026-09-10T08:30:11Z Content type: news Language: en Sources: [Codrops]() Topics: [Three.js community](), [webgpu]() Tags: [3d-web-development](), [ai](), [articles](), [browser](), [coding](), [codrops](), [community](), [conference](), [creative-coding](), [creative-development](), [creative-technology](), [creativity](), [creators](), [developers](), [digital-experiences](), [event](), [experiments](), [frontend-development](), [generative-art](), [immersive-web](), [interactive-web-experiences](), [javascript-3d](), [shaders](), [three-js](), [three-js-community](), [three-js-conference](), [three-js-conference-paris](), [three-js-demos](), [three-js-developers](), [three-js-projects](), [three-js-talks](), [three-js-web-development](), [three-js-workshops](), [web-3d](), [web-design](), [webgl](), [webgpu]() ### AI overview A live look at the first Three.js Conference in Paris, covering community moments, opening talks, a Zelda rebuild moving from WebGL to WebGPU, and a discussion about AI and coding. ### Source excerpt A look inside the first-ever Three.js Conference, straight from Paris. ## Building an Infinite Loom: Unravelling Images into Threads with Three.js DevFeed: [Building an Infinite Loom: Unravelling Images into Threads with Three.js]() Original publisher: [Read original article]() Author: Clément Grellier Published: 2026-09-05T12:50:25Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [Web Development]() Tags: [creative-coding](), [creative-web-experiments](), [digital-art](), [frontend-animation](), [generative-art](), [glsl-shaders](), [gsap](), [html](), [image-animation](), [image-distortion](), [image-effects](), [image-slider](), [images](), [infinite-slider](), [interactive-images](), [interactive-web-design](), [javascript-animation](), [marquee](), [playground](), [ribbon-animation](), [shader-effects](), [shaders](), [thread-animation](), [three-js](), [three-js-demo](), [three-js-shaders](), [unraveling-effect](), [webgl](), [webgl-animation](), [webgl-demo]() ### AI overview A Three.js tutorial for an infinite image strip whose cards are split into independently animated horizontal ribbons. It explains how separate geometry and shaders create weaving, unraveling, gaps, fading, and varied thread motion. ### Source excerpt An experimental Three.js demo that transforms images into flowing ribbons, weaving them together and unraveling them as they move across the screen. ## Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js DevFeed: [Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js]() Original publisher: [Read original article]() Author: Edoardo Lunardi Published: 2026-09-04T15:01:38Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [shape-aware rendering](), [ASCII art shader](), [Three.js shaders](), [Three.js custom shaders]() Tags: [3d](), [ascii](), [ascii-art-shader](), [ascii-dithering](), [ascii-shader](), [atlas](), [browser-based-ascii-renderer](), [creative-coding-three-js](), [custom-element-webgl](), [draggable](), [draggable-3d-logo](), [glsl-ascii-shader](), [glyph-atlas-rendering](), [glyph-matching-algorithm](), [gpu](), [gpu-ascii-rendering](), [gpu-glyph-search](), [interactive-ascii-art](), [luminance-ramp-alternative](), [procedural-ascii-art](), [real-time-ascii-rendering](), [shaders](), [shape-aware-ascii-renderer](), [shape-aware-rendering](), [three-js](), [three-js-ascii-renderer](), [three-js-custom-shaders](), [three-js-shader-tutorial](), [three-js-webgl](), [tutorials](), [webgl](), [webgl-ascii-art](), [webgl-post-processing](), [webgl-shader-tutorial]() ### AI overview A Three.js ASCII renderer improves on luminance-only glyph selection by sampling each character cell's shape and matching it against printable glyphs on the GPU. ### Source excerpt The Codrops mark, rebuilt as a draggable solid and printed in ASCII on the GPU, where every character cell searches 95 glyphs for its own. ## From Rays to Meshes: Building Vercel's Prism with vgpu DevFeed: [From Rays to Meshes: Building Vercel's Prism with vgpu]() Original publisher: [Read original article]() Author: Matias Gonzalez Fernandez Published: 2026-09-03T16:01:06Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [GPU]() Tags: [3d](), [3d-graphics](), [adaptive-rendering](), [articles](), [creative-coding](), [glass](), [glass-shader](), [glsl](), [glsl-shaders](), [gpu](), [gpu-optimization](), [gpu-rendering](), [interactive-web-graphics](), [javascript-graphics](), [light-refraction](), [mesh](), [prism-shader](), [ray-tracing](), [real-time-rendering](), [real-time-shaders](), [shader-performance](), [shader-programming](), [shaders](), [vercel](), [vercel-prism](), [vercel-vgpu](), [vgpu](), [web-graphics](), [web-shaders](), [webgl](), [webgl-shaders]() ### AI overview A tutorial on creating Vercel's prism visual with vgpu shaders. It replaces costly ray-based light simulation with refracted paths connected into a 3D mesh, then adds an environment-mapped glass shader, bloom, and particles. ### Source excerpt A look at how Vercel's vgpu creates a performant prism effect using shaders, geometry, glass, and adaptive rendering. ## Behind the build: Generative plugins and shaders at Figma DevFeed: [Behind the build: Generative plugins and shaders at Figma]() Original publisher: [Read original article]() Author: Rogie King Published: 2026-09-01T14:39:43.296000Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Artificial Intelligence](), [Model Context Protocol](), [GPU](), [webgpu](), [Large Language Model](), [Code](), [React Native]() Tags: [agent](), [ai](), [code](), [collaboration](), [community](), [design](), [figma](), [generative](), [gpu](), [llms](), [mcp](), [mcp-server](), [product](), [react](), [shaders](), [tools](), [webgpu]() ### AI overview Figma describes how generative plugins and shaders expand creative control through prompting, custom tools, richer context, animated effects, code access, community publishing, and MCP integration. The article connects GPU-based real-time pixel manipulation with AI-assisted movement between design and code. ### Source excerpt Starting today, you'll have more creative control over generative plugins and shaders, and a way to share what you've made with the community. Product Designer Rogie King tells the story of how we got here. ## Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI DevFeed: [Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI]() Original publisher: [Read original article]() Author: Nico Martin; Joshua Published: 2026-09-01T00:00:00Z Content type: release Language: en Sources: [Hugging Face - Blog]() Topics: [webgpu](), [Local AI](), [Machine learning](), [Inference](), [benchmarking](), [GPU](), [Optimization]() Tags: [benchmark](), [gpu](), [hub](), [inference](), [javascript](), [kernels](), [local-ai](), [open-source](), [optimization](), [shaders](), [testing](), [webgpu]() ### AI overview Hugging Face releases @huggingface/kernels, a JavaScript library and collection of 207 versioned WebGPU kernel packages for browser-based local AI. It also introduces Fleet, a browser benchmarking and testing suite that gathers opted-in performance and correctness evidence across hardware. ### Source excerpt We're on a journey to advance and democratize artificial intelligence through open source and open science. ## MiniDXNN v0.4.0: Interactive neural texture compression on DirectX 12 DevFeed: [MiniDXNN v0.4.0: Interactive neural texture compression on DirectX 12]() Original publisher: [Read original article]() Author: Takahiro Harada; Sho Ikeda Published: 2026-08-13T14:30:00Z Content type: release Language: en Sources: [AMD GPUOpen]() Topics: [Compression](), [GPU](), [Inference](), [mlp](), [Machine learning](), [GUI](), [shaders](), [Open Source]() Tags: [agility-sdk](), [announcement](), [compression](), [directx](), [driver](), [getting-started](), [gpu](), [gpu-open-sdks](), [gpu-open-tools](), [gpuopen-sdks](), [gpuopen-tools](), [graphics-apis](), [gui](), [inference](), [maths](), [memory](), [microsoft](), [microsoft-agility-sdk](), [microsoft-directx](), [ml](), [mlp](), [neural](), [open-source](), [product-release](), [quick-start](), [real-time](), [shaders](), [technical-article](), [technical-articles](), [tools]() ### AI overview MiniDXNN v0.4.0 is an open-source library for GPU-accelerated MLP inference and training on DirectX 12. The release adds D3D12 Linear Algebra support, input encoding for neural texture compression, and a real-time GUI application for training and visualizing texture representations. ### Source excerpt MiniDXNN v0.4.0 introduces D3D12 Linear Algebra (SM 6.10) support, input encodings and neural texture compression, plus a real-time GUI app that trains and visualizes GPU-accelerated MLPs on DirectX® 12. ## What's new in the Jetpack Compose August '26 release DevFeed: [What's new in the Jetpack Compose August '26 release]() Original publisher: [Read original article]() Author: Android Developers (noreply@blogger.com) Published: 2026-08-12T16:00:00Z Content type: release Language: en Sources: [Android Developers Blog]() Topics: [Compose](), [Jetpack Compose](), [Android](), [API](), [upgrade](), [Documentation]() Tags: [2026](), [android](), [compose](), [graphics](), [jetpack-compose](), [layout](), [performance](), [release](), [sdk](), [shaders](), [update](), [upgrade]() ### AI overview The Jetpack Compose August 2026 release is stable and brings version 1.12 to core Compose modules. It adds Mesh Gradients, Wide Color Gamut and HDR rendering support, named areas in Grid, Credential Manager integration, and testing and performance improvements. The release also includes breaking changes, including a requirement for API 37 and AGP 9.1.1. ### Source excerpt Posted by Nick Butcher, Product Manager, Jetpack Compose Today, the Jetpack Compose August '26 release is stable! This release brings version 1.12 across core Compose modules (see the full BOM mapping), introducing rich visual APIs like Mesh Gradients and Wide Color Gamut (WCG) support, structural layout features like named areas in Grid, seamless integration with Android's Credential Manager, and significant testing and performance improvements. To update your project to today's release, upgrade your Compose BOM version to 2026.08.00: implementation(platform("androidx.compose:compose-bom:2026.08.00")) Breaking Changes AGP & Compile SDK: Compose 1.12 updates compileSdk to API 37, requiring a minimum AGP 9.1.1. As a reminder, Compose will always target the latest compileSdk. Learn more about this change here. Modifier.onFirstVisible() is deprecated: Migrate to Modifier.onVisibilityChanged(), which provides more precise visibility threshold tracking. Graphics Mesh Gradients Compose 1.12 introduces MeshGradientPainter to help you create multi-point, organic color gradients. val rows = 1 val columns = 1 val gradientPainter = remember { MeshGradientPainter(rows, columns) { // Parameters: row, column, position, color setVertex(0, 0, Offset(0f, 0f), Color.Red) // Top-Left setVertex(0, 1, Offset(1f, 0f), Color.Blue) // Top-Right setVertex(1, 0, Offset(0f, 1f), Color.Green) // Bottom-Left setVertex(1, 1, Offset(1f, 1f), Color.Yellow) // Bottom-Right } } Box( modifier = modifier .aspectRatio(16/9f) .fillMaxWidth() .paint(gradientPainter) ) For more information and examples, see the documentation. Wide Color Gamut & HDR Support Modern displays offer extended color fidelity and higher dynamic range. In Compose 1.12, full pipeline support for Wide Color Gamut (P3) and HDR rendering has been enabled across Compose graphics, paint, and shaders. Colors defined in non-sRGB color spaces (such as Display P3) are preserved through to platform rendering without color clamping. Colors wi ## Digital tools, human expression: The visual identity behind Config 2026 DevFeed: [Digital tools, human expression: The visual identity behind Config 2026]() Original publisher: [Read original article]() Author: Matt Alagiah Published: 2026-07-27T16:30:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Artificial Intelligence](), [shaders](), [Code]() Tags: [ai](), [ai-tools](), [conference](), [design](), [figma](), [images](), [shaders](), [tools]() ### AI overview Figma's Brand Studio explains the visual identity for Config 2026, combining expressive glyphs, prompted textures, generative tools, shaders, and Figma Make to balance digital experimentation with human craft and imperfection. ### Source excerpt Here's how Figma's Brand Studio designed a conference that captured the very human ways we remix and reinvent when working with AI tools. ## Config 2026: New materials, new tools and a more expressive canvas DevFeed: [Config 2026: New materials, new tools and a more expressive canvas]() Original publisher: [Read original article]() Author: Dylan Field Published: 2026-06-24T15:00:00Z Content type: release Language: en Sources: [Figma Blog]() Topics: [Figma](), [Canvas](), [Code](), [shaders](), [generative plugins]() Tags: [announcements](), [canvas](), [code](), [figma](), [generative-plugins](), [shaders](), [updates]() ### AI overview Figma's Config 2026 announcements introduce new materials and canvas tools, including code layers, Figma Motion, shaders, generative plugins, and Weave tools. The article explains how code layers can become interactive, be duplicated for exploration, and be iterated on collaboratively alongside design layers. ### Source excerpt Push past what you thought was possible with code layers, Figma Motion, shaders, generative plugins and Weave tools, all on the canvas. ## What's New in WebGPU (Chrome 149-150) DevFeed: [What's New in WebGPU (Chrome 149-150)]() Original publisher: [Read original article]() Author: François Beaufort GitHub Published: 2026-06-17T07:00:00Z Content type: article Language: en Sources: [developer.chrome.com: Blog]() Topics: [webgpu](), [Chrome](), [GPU](), [shaders]() Tags: [chrome](), [gpu](), [shaders](), [validation](), [webgpu]() ### AI overview WebGPU updates in Chrome 149-150 introduce immediates for passing small, frequently changing values directly to shaders and refine validation rules for transient render attachments. ### Source excerpt Immediates and stricter validation for transient attachments. ## 3D Graphics Without Writing Shaders: The Portable GPU API DevFeed: [3D Graphics Without Writing Shaders: The Portable GPU API]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-06-13T00:00:00Z Content type: article Language: en Sources: [CodeName One]() Topics: [3D graphics](), [API](), [Java](), [GPU](), [shaders](), [OpenGL](), [WebGL]() Tags: [3d](), [3d-graphics](), [api](), [code](), [cross-platform](), [gpu](), [java](), [shaders](), [software](), [webgl]() ### AI overview The article describes Codename One's com.codename1.gpu API, which lets applications render portable 3D graphics from one Java codebase across Metal, OpenGL ES, WebGL, Direct3D 11, and a software rasterizer. Developers describe materials while platform-specific generators produce the shader code. ### Source excerpt The new com.codename1.gpu API renders the same Java code through Metal, OpenGL ES, WebGL, Direct3D 11, and a software rasterizer. You describe materials and the engine generates the shaders for each platform. ## New AMD Radeon Developer Tool Suite update brings shader source code, Extended PIX Markers, and command-line capture DevFeed: [New AMD Radeon Developer Tool Suite update brings shader source code, Extended PIX Markers, and command-line capture]() Original publisher: [Read original article]() Author: Chris Hesik Published: 2026-06-11T16:26:00Z Content type: release Language: en Sources: [AMD GPUOpen]() Topics: [GPU](), [shaders](), [Ray Tracing](), [Command-line interface](), [Software](), [Hardware]() Tags: [agility-sdk](), [amd](), [announcement](), [command-line](), [developer](), [directx](), [driver](), [gpu](), [gpu-open-tools](), [gpuopen-other-amd](), [gpuopen-tools](), [graphics-apis](), [hardware](), [memory](), [microsoft](), [microsoft-agility-sdk](), [microsoft-directx](), [news](), [optimization](), [other-amd](), [performance](), [product-blogs](), [product-release](), [profiling](), [radeon-developer-panel](), [radeon-developer-tool-suite](), [radeon-gpu-analyzer](), [radeon-gpu-detective](), [radeon-gpu-profiler](), [radeon-memory-visualizer](), [radeon-raytracing-analyzer](), [ray-tracing](), [raytracing](), [rdp](), [rdts](), [release](), [rga](), [rgd](), [rgp](), [rmv](), [rra](), [shaders](), [source](), [technical-articles](), [tool](), [tools]() ### AI overview AMD's Radeon Developer Tool Suite update adds shader source code viewing, instruction-level divergence metrics, and Extended PIX Marker support in RGP 2.7. It also expands hardware compatibility and updates other tools in the suite. ### Source excerpt The new AMD Radeon Developer Tool Suite release delivers RGP 2.7 with shader source code viewing, instruction-level divergence metrics, and Extended PIX Marker support, expanded hardware compatibility, and updates across RGD, RRA, RMV, RGA, and RDP. ## Video Encoding and Decoding with Vulkan Compute Shaders in FFmpeg DevFeed: [Video Encoding and Decoding with Vulkan Compute Shaders in FFmpeg]() Original publisher: [Read original article]() Author: jphilips (jeff@khronosgroup.org) Published: 2026-03-16T17:04:00Z Content type: article Language: en Sources: [Blogs Khronos Blog]() Topics: [FFmpeg (Fast Forward Moving Picture Experts Group)](), [GPU](), [shaders](), [Compression](), [coding]() Tags: [api](), [blog-vulkan-vulkan-vide](), [compression](), [ffmpeg](), [gpu](), [performance](), [shaders](), [video](), [vulkan]() ### AI overview This article explains how FFmpeg uses Vulkan Compute shaders to accelerate encoding and decoding of professional-grade video on consumer GPUs. It describes the parallel and serial stages of codec pipelines and how this approach complements Vulkan Video's fixed-function support. ### Source excerpt In this blog we explore how FFmpeg uses Vulkan Compute to seamlessly accelerate encoding and decoding of even professional-grade video on consumer GPUs -- unlocking GPU compute parallelism at scale, without specialized hardware. This approach complements Vulkan Video's fixed-function codec support, extending acceleration to formats and workflows it doesn't cover. ## Finger Shadows in Compose DevFeed: [Finger Shadows in Compose]() Original publisher: [Read original article]() Author: Romain Guy Published: 2025-11-29T00:00:00Z Content type: tutorial Language: en Sources: [Posts on Romain Guy]() Topics: [Compose](), [Android](), [GPU](), [shaders](), [ui](), [Programming]() Tags: [android](), [compose](), [developer](), [gpu](), [graphics](), [kotlin](), [programming](), [shaders](), [ui]() ### AI overview A tutorial on using Android 13's RuntimeShader API in Jetpack Compose to simulate soft shadows cast by a user's finger, stylus, or pointing device. It models the finger as an oriented capsule in 3D space and computes light visibility using cone and spherical-cap intersections. ### Source excerpt I recently realized that I have never discussed graphics programming on this blog, and decided it was time to correct this. A few years ago, Android 13 introduced the RuntimeShader API that allows you to write custom GPU shaders and apply them to UI elements. In this blog post I will show you how this API can be used to simulate shadows projected by the user's finger (or stylus/pointing device) onto your UI. ## Fast calculation of the distance to cubic Bezier curves on the GPU DevFeed: [Fast calculation of the distance to cubic Bezier curves on the GPU]() Original publisher: [Read original article]() Published: 2025-10-18T09:21:56Z Content type: article Language: en Sources: [The Last Static Blog RSS]() Topics: [GPU](), [glsl](), [WebGL](), [shaders](), [pixel](), [Code]() Tags: [glsl](), [gpu](), [graphics](), [math](), [maths](), [pixel](), [prog](), [shaders](), [source](), [visualization](), [webgl](), [webgl-demo]() ### AI overview This article explains how to calculate the distance from a point to a cubic Bézier curve on the GPU. It derives the distance function and its derivative, reducing the problem to solving a fifth-degree polynomial, and demonstrates the method with self-contained GLSL fragment shaders and WebGL visualizations. ### Source excerpt Bézier curves are a core building block of text and 2D shapes rendering. There are several approaches to rendering them, but one especially challenging problem, both mathematically and technically, is computing the distance to a Bézier curve. For quadratic curves (one control point), this is fairly accessible, but for cubic (two control points) we're going to see why it is so hard. A glyph from the Virgil font, composed of multiple Bézier curves Having this distance field opens up many rendering possibilities. It's hard, but it's possible; here is a live proof: Distance to a cubic Bézier curve In this visualization, I'm borrowing your device resources to compute the distance to the curve for every single pixel. The yellow points are the control points of the curve (in white) and the blue zone is a representation of the distance field. Note All the demos and code in this article are self-contained GLSL fragment shaders. Most of the code can be found in the article, but feel free to inspect the source code of any of these WebGL demo for the complete code. They can be run verbatim using ShaderWorkshop. The basic maths In a previous article, we explained that a Bézier curve can be expressed as a polynomial. In our case, a cubic polynomial: B_3(t) = \textbf{a}t^3 + \textbf{b}t^2 + \textbf{c}t + \textbf{d} Where a, b, c and d are the vector coefficients derived from the start (P_0), end (P_3), and control points (P_1, P_2) using the following formulas (you can refer to the previous article for details): \begin{aligned} \textbf{a} &= -P_0 + 3(P_1-P_2) + P_3 \\ \textbf{b} &= 3P_0 - 6P_1 + 3P_2 \\ \textbf{c} &= -3P_0 + 3P_1 \\ \textbf{d} &= P_0 \end{aligned} For a given point p in 2D space, the distance to that Bézier curve can be expressed as a length between our curve and p: \begin{aligned} d(t) &= ||B_3(t) - \textbf{p}|| \\ &= ||\textbf{a}t^3 + \textbf{b}t^2 + \textbf{c}t + \textbf{d} - \textbf{p}|| \end{aligned} Our goal is to find the t value where d(t) is the smallest. ## Figma rendering: Powered by WebGPU DevFeed: [Figma rendering: Powered by WebGPU]() Original publisher: [Read original article]() Author: Alex Ringlein; Luke Anderson Published: 2025-09-18T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [webgpu](), [WebGL](), [Optimization](), [GPU](), [browser](), [Chromium](), [cpu](), [shaders]() Tags: [browser](), [chromium](), [compatibility](), [cpu](), [figma](), [gpu](), [graphics](), [optimization](), [performance](), [shaders](), [webgl](), [webgpu]() ### AI overview Figma explains its migration from WebGL to WebGPU to improve rendering performance. The article describes compute shaders, moving work from the CPU to the GPU, reducing reliance on global state, modernizing the rendering interface, and maintaining WebGL compatibility during the rollout. ### Source excerpt We've updated our renderer to use WebGPU, unlocking new performance optimization opportunities. Here's how we did it. ## Zed for Windows Progress Update DevFeed: [Zed for Windows Progress Update]() Original publisher: [Read original article]() Author: Max Brunsfeld Published: 2025-08-19T00:00:00Z Content type: article Language: en Sources: [Zed Industries - Blog]() Topics: [Windows](), [DirectX](), [GPU](), [shaders]() Tags: [directx](), [gpu](), [shaders](), [windows](), [zed]() ### AI overview Zed's Windows team reports progress on a DirectX 11 rendering backend intended to avoid Vulkan compatibility issues and reduce memory use. The work also involved shader debugging, a switch from Direct2D to DirectWrite for glyph rasterization, and investigation of GPU-memory allocation failures. ### Source excerpt An update on what the Zed for Windows team has been doing in July and August. ## Introducing Skia Graphite: Chrome's rasterization backend for the future DevFeed: [Introducing Skia Graphite: Chrome's rasterization backend for the future]() Original publisher: [Read original article]() Author: Chromium Blog (noreply@blogger.com) Published: 2025-07-08T17:46:00Z Content type: article Language: en Sources: [Chromium Blog]() Topics: [Chrome](), [GPU](), [Interaction to Next Paint](), [browser](), [OpenGL](), [shaders](), [Web](), [glsl]() Tags: [chrome](), [gpu](), [graphics](), [graphics-apis](), [interaction-to-next-paint](), [multithreading](), [none](), [performance](), [render](), [screen](), [shaders](), [the-fast-and-the-curious](), [vulkan](), [web]() ### AI overview The article introduces Skia Graphite, a new GPU rasterization backend for Chrome on Apple Silicon Macs. Graphite uses fewer code paths, supports modern graphics APIs such as Metal, Vulkan, and D3D12, and is multithreaded by default. It improved Motionmark 1.3 scores by almost 15% on a MacBook Pro M3 and improved several real-world performance metrics. ### Source excerpt Today's The Fast and the Curious post covers the launch of Skia's new rasterization backend, Graphite, in Chrome on Apple Silicon Macs. Graphite is instrumental in helping Chrome achieve exceptional scores on Motionmark 1.3 and is key to unlocking a ton of future improvements in Chrome Graphics. A brief history of Skia in Chrome In Chrome, Skia is used to render paint commands from Blink and the browser UI into pixels on your screen, a process called rasterization. Skia has powered Chrome Graphics since the very beginning. Skia eventually ran into performance issues as the web evolved and became more complex, which led Chrome and Skia to invest in a GPU accelerated rasterization backend called Ganesh. Over the years, Ganesh matured into a solid highly performant rasterization backend and GPU rasterization launched on all platforms in Chrome on top of GL (via ANGLE on Windows D3D9/11). However, Ganesh always had a GL-centric design with too many specialized code paths and the team was hitting a wall when trying to implement optimizations that took advantage of modern graphics APIs in a principled manner. This set the stage for the team to rethink GPU rasterization from the ground up in the form of a new rasterization backend, Graphite. Graphite was developed from the start to be principled by having fewer and more comprehensible code paths. This forward looking design helps take advantage of modern graphics APIs like Metal, Vulkan and D3D12 and paradigms like compute based path rasterization, and is multithreaded by default. Results With Graphite in Chrome, we increased our Motionmark 1.3 scores by almost 15% on a Macbook Pro M3. At the same time, we improved real world metrics like INP (interaction to next paint time), LCP (time to largest contentful paint), graphics smoothness (percent dropped frames), GPU process malloc memory usage, and others. This all means substantially smoother interactions, less stutter when scrolling, and less time waiting for sites to show ## Make your site interactive with code layers DevFeed: [Make your site interactive with code layers]() Original publisher: [Read original article]() Author: Alex Mullans Published: 2025-06-17T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Code](), [React](), [AI Chat](), [Canvas](), [Web](), [shaders](), [draggable]() Tags: [ai](), [code](), [component](), [design](), [developer](), [draggable](), [features](), [figma](), [generate](), [react](), [shaders](), [tool](), [web](), [website-design](), [workflow]() ### AI overview Figma introduces code layers for Figma Sites, enabling users to add custom React-powered interactions and motion to website designs. Users can create or convert components into code layers, use Figma's AI chat to build and refine behavior, edit code directly, and generate variations for comparison on the canvas. ### Source excerpt Today we're launching code layers--a new way to build custom interactions in Figma Sites. ## Doom GPU Flame Graphs DevFeed: [Doom GPU Flame Graphs]() Original publisher: [Read original article]() Published: 2025-04-30T14:00:00Z Content type: article Language: en Sources: [Brendan Gregg's Blog]() Topics: [GPU](), [shaders](), [intel](), [Open Source](), [Code]() Tags: [blog](), [doom](), [dust](), [flame-graph](), [games](), [gaming](), [gpu](), [intel](), [open-source](), [performance](), [plugin](), [profile](), [shaders](), [svg]() ### AI overview The article demonstrates full-stack GPU flame graphs and GPU FlameScope using GZDoom, including Intel Battlemage GPU support. It shows how synchronized CPU and GPU profiling can correlate workload periods and identify GPU shader compilation and NIR preprocessing as sources of CPU activity. ### Source excerpt AI Flame Graphs are now open source and include Intel Battlemage GPU support, which means it can also generate full-stack GPU flame graphs for providing new insights into gaming performance, especially when coupled with FlameScope (an older open source project of mine). Here's an example of GZDoom, and I'll start with flame scopes for both CPU and GPU utilization, with details annotated: (Here are the raw CPU and GPU versions.) FlameScope shows a subsecond-offset heatmap of profile samples, where each column is one second (in this example, made up of 50 x 20ms blocks) and the color depth represents the number of samples, revealing variance and perturbation that you can select to generate a flame graph just for that time range. Update: the row size can be ajusted (it is limited by the sample rate captured in the profile), e.g., you could generate 60 rows to match 60fps games. Putting these CPU and GPU flame scopes side by side has enabled your eyes to do pattern matching to solve what would otherwise be a time-consuming task of performance correlation. The gaps in the GPU flame scope on the right - where the GPU was not doing much work - match the heavier periods of CPU work on the left. CPU Analysis FlameScope lets us click on the interesting periods. By selecting one of the CPU shader compilation stripes we get the flame graph just for that range: This is brilliant, and we can see exactly why the CPUs were busy for about 180 ms (the vertical length of the red stripe): it's doing compilation of GPU shaders and some NIR preprocessing (optimizations to the NIR intermediate representation that Mesa uses internally). If you are new to flame graphs, you look for the widest towers and optimize them first. Here is the interactive SVG. CPU flame graphs and CPU flame scope aren't new (from 2011 and 2018, both open source). What is new is full-stack GPU flame graphs and GPU flame scope. GPU Analysis Interesting details can also be selected in the GPU FlameScope for generating ## Vibecoding a Totoro tribute with Junie DevFeed: [Vibecoding a Totoro tribute with Junie]() Original publisher: [Read original article]() Published: 2025-03-02T21:02:23Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [junie](), [Compose](), [Kotlin Multiplatform](), [Canvas](), [shaders]() Tags: [animate](), [canvas](), [code](), [compose](), [junie](), [kotlin](), [kotlin-multiplatform](), [screen](), [shaders]() ### AI overview The article describes using Junie to experiment with visual drawing techniques in a Kotlin Multiplatform Compose desktop project. The project combines canvases, gradients, paths, shapes, text, shaders, animations, and interaction to create a Totoro tribute, without aiming for production readiness. ### Source excerpt Sunday afternoon. Perfect time to hang out with Junie. I want to refresh my memory on some Compose drawing techniques. I am not really in the mood for Googling. I don't need a production ready app. I really just want to mess around. How far can I vibe code this. I'll start off by setting Junie to brave mode. I added an image and some colours to the repo of a blank compose desktop project. I also put a copy of an older blogpost of mine with some drawing techniques. I set some ground rules with the first prompt and then just keep asking Junie to add things. Create a guidelines file with the following information and update the README.md file. Let's explore some visual techniques in this Kotlin multiplatform project. The aim is to go for variety of techniques. Feel free to use the canvas, brush, paint, gradient, lines, paths, rounded polygons, skia shaders, text, colours, shapes. Or anything that will create an interesting visual effect. Animations are not necessary but can be added. The project does not have a practical application other than to demonstrate how to create interesting visual elements and to have some fun. It is a visual tribute to the Studio Ghibli film, [My Neighbor Totoro](https://en.wikipedia.org/wiki/My_Neighbor_Totoro). * It does not need any tests * Layer all the visual techniques on the main composable screen. * Find the suggested fonts in the resources folder * Find inspiration in the docs/looks folder and in the docs/blogpost folder I think Junie got what I wanted to do, I never explained what Totoro looks like but it figured out something from the included inspiration image. The early experiments needed some tweaking The only time the project didn't run was when Junie didn't download the new fonts but I found the instructions on where to get the fonts added to the README.md. I had no real expectations so I'm pretty happy with the final result. Animating rain and clickable wobbling Totoro. No explanations really what can I say I didn't read the [Next page]()