# WebGL Published articles for WebGL. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Building Depth: Designing and Developing a 3D Renderer Inside Figma DevFeed: [Building Depth: Designing and Developing a 3D Renderer Inside Figma]() Original publisher: [Read original article]() Author: Aleksei Kipin Published: 2026-09-13T11:34:39Z Content type: article Language: en Sources: [Codrops]() Topics: [Figma 3D renderer](), [Figma]() Tags: [3d](), [3d-design](), [3d-modeling](), [3d-renderer-for-figma](), [3d-rendering](), [3d-visualization](), [3d-workflow](), [articles](), [case-study](), [creative-development](), [depth-3d-renderer](), [depth-figma](), [depth-figma-plugin](), [design-engineering](), [design-tools](), [figma](), [figma-3d](), [figma-3d-renderer](), [figma-plugin](), [figma-plugin-design](), [interactive-3d](), [plugin-development](), [product-design](), [product-design-case-study](), [real-time-rendering](), [three-js](), [ui-design](), [ux-design](), [visualization](), [webgl](), [workflow]() ### AI overview An article about building Depth, a Figma plugin for quickly rendering 3D models during design work. It describes the workflow, plugin architecture, rendering behavior, and export approach. ### Source excerpt A look at how Depth came together, from building a 3D renderer inside Figma to designing a website that explores what it can do. ## Update Chrome now to protect against an actively exploited vulnerability DevFeed: [Update Chrome now to protect against an actively exploited vulnerability]() Original publisher: [Read original article]() Author: Pieter Arntz Published: 2026-09-10T10:52:08Z Content type: news Language: en Sources: [Malwarebytes]() Topics: [Vulnerabilities](), [bug]() Tags: [browser](), [bugs](), [chrome](), [javascript](), [memory](), [news](), [sandbox](), [security](), [stable-channel](), [update](), [vulnerability](), [webgl]() ### AI overview Chrome's desktop update fixes 230 security issues, including CVE-2026-87491, an actively exploited V8 out-of-bounds write flaw. The article explains how to update Chrome and describes the vulnerability's potential impact within the browser sandbox. ### Source excerpt Chrome issues another monster update, fixing an actively exploited V8 vulnerability and 229 other flaws. ## 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 Liquid Glass Grid with Three.js, WebGPU, and TSL DevFeed: [Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL]() Original publisher: [Read original article]() Author: Filip Kantedal Published: 2026-09-08T13:09:48Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [webgpu](), [Three.js custom shaders](), [refraction shader](), [signed distance functions]() Tags: [3d-web-experiences](), [chromatic-dispersion](), [creative-coding](), [custom-shaders](), [glass](), [glass-shader](), [glassmorphism](), [gpu-rendering](), [infinite](), [infinite-carousel](), [infinite-grid](), [interactive-3d](), [liquid-glass](), [next-js](), [r3f](), [react-three-fiber](), [refraction-shader](), [sdf](), [shader-effects](), [signed-distance-functions](), [three-js](), [three-js-shading-language](), [three-js-webgpu](), [tsl](), [tsl-shaders](), [tutorials](), [video](), [webgl](), [webgpu](), [webgpu-shaders]() ### AI overview A tutorial on building an infinite liquid-glass grid in the browser with Three.js, WebGPU, TSL, custom shaders, and video textures. ### Source excerpt An exploration of infinite grids, liquid glass, and video refraction using Three.js, WebGPU, TSL, and custom shaders. ## Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js DevFeed: [Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js]() Original publisher: [Read original article]() Author: Marek Jóźwiak Published: 2026-09-06T13:09:52Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [Three.js webcam]() Tags: [3d](), [3d-face-mask](), [canonical-face-model](), [creative-coding](), [face-landmarks](), [face-mesh](), [face-tracking](), [facial-landmarks](), [generative-graphics](), [gpu](), [inference](), [interactive-3d](), [javascript-3d](), [mediapipe](), [mediapipe-face-landmarker](), [mesh](), [real-time](), [real-time-3d](), [real-time-face-tracking](), [svelte](), [three-js](), [three-js-face-mask](), [three-js-webcam](), [threlte](), [threlte-three-js](), [tutorial](), [tutorials](), [video](), [vision](), [wasm](), [webcam](), [webcam-effects](), [webcam-face-tracking](), [webgl](), [webgl-face-tracking]() ### AI overview Tutorial on building a real-time textured 3D face mask by mapping MediaPipe face landmarks onto a Three.js mesh with Threlte. ### Source excerpt Learn how MediaPipe's face landmarks, Google's canonical face model, and Three.js come together to create a real-time textured 3D face mask. ## 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. ## 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. ## Native Java Win32, 3D Gaming, Printing and Wallet DevFeed: [Native Java Win32, 3D Gaming, Printing and Wallet]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-06-12T00:00:00Z Content type: release Language: en Sources: [CodeName One]() Topics: [Windows](), [3D graphics](), [Game Development](), [cross-platform](), [API](), [GPU](), [WebGL](), [OpenGL]() Tags: [3d-graphics](), [api](), [core](), [cross-platform](), [game-development](), [gpu](), [graphics](), [java](), [webgl](), [win32]() ### AI overview Codename One version 7.0.251 adds native Windows executables without a JVM, a portable GPU-accelerated 3D graphics API, a game development API with Box2D physics, cross-platform printing, and Apple Wallet support. The 3D API targets Metal, OpenGL ES, WebGL, Direct3D 11, and a simulator rasterizer from shared Java code. ### Source excerpt This week brings native Windows executables with no JVM, a portable 3D graphics API, a gaming API with Box2D physics, cross-platform printing, and Apple Wallet support, in what is probably our biggest update ever. ## How Fountain keeps code generation on track for browser-based mobile games DevFeed: [How Fountain keeps code generation on track for browser-based mobile games]() Original publisher: [Read original article]() Published: 2026-03-27T07:00:00Z Content type: article Language: en Sources: [Mary Rose Cook]() Topics: [AI-assisted coding](), [Code](), [Mobile](), [WebGL](), [ui](), [Canvas](), [browser]() Tags: [agent](), [browser](), [bugs](), [canvas](), [code](), [code-generation](), [computer](), [developer](), [graphics](), [interface](), [language](), [model](), [render](), [tool](), [user-interface](), [vector](), [webgl]() ### AI overview The author describes Fountain, a game-making tool that uses a predefined framework, built-in systems, manipulable user interfaces, and a constrained target domain to keep generated code aligned while creating simple mobile arcade games. ### Source excerpt About nine months ago, my son said he wanted to make a video game. He said it was called Exploding Kitties. We made it together on my computer. He described the gameplay and drew the graphics. I vibed the code. The game basically worked. But we had to build it in small pieces. And, periodically, I had to spend time in the guts of the code, getting it back on the rails. Unifying two ways of doing the same thing. Fixing gnarlier bugs. Disentangling the game code from the engine. Today, I know that we'd be able to one-shot Exploding Kitties. The first reason: models and agent harnesses produce much higher intelligence. But, the second reason, the one I want to talk about, is the supporting techniques and environment. I've built a new game-making tool called Fountain. You can one-shot any simple mobile arcade game. Or, you can iterate your way to a more complex game and the code stays on the rails over many turns. Here's why it works - A framework that supplies decisions and built-ins Every game is given a game framework upfront. This framework encodes many decisions. That game entities have a certain data shape. That behavior abstraction is done with prototypal inheritance. That the coordinates of an entity represent its top left. This keeps the code generation aligned. And this framework includes generally useful built-ins. An update/event/draw loop. A WebGL canvas render surface. A collision detection and resolution system. A particle system. A system to detect input. This reduces the amount of code that must be generated. A manipulable artifact Prompting can be tiresome. Language is ambiguous. The model can interpret a prompt in a way the game designer didn't intend, and make the wrong change. Language is clumsy. It's hard to precisely indicate any point in a continuum. A color. A point. An amount. But there's a solution. Do it the old way. Give the game developer a user interface through which to express their intent. A color picker to choose the color of the water ## 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. ## How did we build 3D animations in mobile apps? DevFeed: [How did we build 3D animations in mobile apps?]() Original publisher: [Read original article]() Author: Yağız Gürgül Published: 2025-01-29T16:59:35Z Content type: tutorial Language: en Sources: [Wise Engineering - Medium]() Topics: [Three.js](), [Mobile](), [WebGL](), [HTML]() Tags: [3d](), [animation](), [gltf](), [html](), [mobile](), [optimisation](), [optimization](), [three-js](), [webgl]() ### AI overview Wise describes how it brought its 3D illustrations to life as interactive real-time animations in mobile apps. The team chose three.js scenes rendered in local HTML files inside mobile app web views, using WebGL for both iOS and Android, and then optimized large glTF assets for mobile delivery. ### Source excerpt In March 2023, Wise launched its new brand -- as part of it, we introduced a collection of bold new 3D illustrations. While visually stunning, our brand team had bigger ambitions to bring them to life and elevate Wise further. This took us on a journey to understand the technical landscape and challenges around creating a seamless multi-platform solution for interactive 3D animations. interactive 3D intro on Wise iOS appThe new illustration set in Wise Our new illustration set took inspiration from icons, allowing us to communicate with a global audience. They're unique, bold and dynamic, even when still. They give us opportunities to share moments of delight with our customers and help our brand stand out from billboard to button. check out https://wise.design/ for more! What sets illustrations at Wise apart is that they're not static. Each one is paired with a crafted 3D model, featuring detailed UV maps, precise shading, and carefully designed lighting. This raises an exciting question: What if we rendered these illustrations dynamically in real time, making them interactive on mobile apps? Native or web view? To render illustrations in real time, we explored several technical solutions: Native Filament three.js We opted to create 3D scenes using three.js, one of the most popular open-source web projects. Some of the reasons behind this include: Managing native solutions for iOS and Android platforms would demand extra engineering effort. The support and documentation available for three.js surpass others. The web view solution delivers native-like performance by using WebGL on both platforms. As a result, we consistently achieve 60/120 FPS across all scenes on both devices. The plan was simple. Build simple HTML files that render 3D scenes and load these files locally in mobile apps 🚀 But we had a "huge" problem... The 3D models were specifically designed for static illustrations, resulting in a high polygon count that contributes to larger file sizes. For instance ## Why developers should embrace creative coding again DevFeed: [Why developers should embrace creative coding again]() Original publisher: [Read original article]() Author: Jake Albaugh Published: 2025-01-09T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [creative coding](), [creative technology](), [browsers](), [Web](), [CSS](), [HTML5](), [SVG](), [GSAP](), [modern web development](), [WebGL](), [Figma plugin]() Tags: [animation](), [browsers](), [creative-coding](), [css](), [design](), [design-tools](), [developers](), [figma](), [figma-plugin](), [free](), [gsap](), [html5](), [svg](), [tools](), [web](), [webgl]() ### AI overview The article argues that developers should revive creative coding by using modern browser capabilities beyond templates and conventional design tools. It highlights HTML5, inline SVG, GSAP animations, WebGL, advanced CSS, responsive features, and newer color spaces such as HSL and OKLCH, along with the CSS color-mix() Figma plugin. ### Source excerpt Modern browsers have evolved beyond what most design tools can do. It's up to us to break free from templates and tap into the web's true creative potential. ## Transformers.js v3: WebGPU Support, New Models & Tasks, and More... DevFeed: [Transformers.js v3: WebGPU Support, New Models & Tasks, and More...]() Original publisher: [Read original article]() Author: Joshua Published: 2024-10-22T00:00:00Z Content type: article Language: en Sources: [Hugging Face - Blog]() Topics: [transformers.js](), [webgpu](), [AI Inference](), [quantization](), [Whisper](), [asr]() Tags: [announcement](), [artificial-intelligence](), [javascript](), [npm](), [onnx](), [open-source](), [quantization](), [transformers](), [transformers-js](), [webgl](), [webgpu]() ### AI overview Transformers.js v3 adds WebGPU acceleration for browser-based machine learning, support for more quantization options and per-module data types, and 120 supported model architectures. The release includes examples for text embeddings, speech recognition with Whisper, image classification, and other models and tasks. ### Source excerpt We're on a journey to advance and democratize artificial intelligence through open source and open science. ## Self-host Maps with Protomaps and Supabase Storage DevFeed: [Self-host Maps with Protomaps and Supabase Storage]() Original publisher: [Read original article]() Author: Brandon Liu; Thor Schaeff Published: 2024-06-19T07:00:00Z Content type: tutorial Language: en Sources: [Supabase Blog]() Topics: [Supabase](), [Web](), [Vanilla JavaScript](), [TypeScript](), [WebGL](), [Authorization](), [Command-line interface]() Tags: [authorization](), [cli](), [open-source](), [tutorial](), [typescript](), [web](), [webgl]() ### AI overview This tutorial explains how to self-host Protomaps PMTiles on Supabase Storage, render the map with MapLibre GL in a browser, and restrict access using Supabase Edge Functions and authentication. ### Source excerpt Host Protomaps PMTiles on Supabase Storage and render them with MapLibre GL. ## Launch Week X Hackathon Winners DevFeed: [Launch Week X Hackathon Winners]() Original publisher: [Read original article]() Author: Andrew Smith; Tyler Shukert Published: 2024-01-04T07:00:00Z Content type: article Language: en Sources: [Supabase Blog]() Topics: [For the Love of Code](), [Supabase](), [Open Source](), [Feathers](), [Retrieval Augmented Generation (RAG)](), [Embeddings](), [Visual Studio Code](), [Databases](), [Rust](), [WebGL](), [Web Development]() Tags: [agent](), [ai](), [cli](), [code](), [data](), [embeddings](), [extension](), [hackathon](), [launch](), [open-source](), [postgresql](), [rag](), [rust](), [vercel](), [web](), [web-development](), [webgl]() ### AI overview Supabase announces the winners of its Launch Week X Hackathon, covering 64 submitted projects. The winners include tools for cloning and self-hosting Supabase projects, authenticated Fastify integrations, AI video search using transcription embeddings, a voice-activated RAG system, a documentation quiz generator, a Supabase CLI extension for Visual Studio Code, a PostgreSQL extension written with Rust, and a WebGL experience. ### Source excerpt Announcing the winners of the Launch Week X Hackathon! ## Why roles are not rules DevFeed: [Why roles are not rules]() Original publisher: [Read original article]() Author: Kris Rasmussen Published: 2023-06-20T00:00:00Z Content type: opinion Language: en Sources: [Figma Blog]() Topics: [Figma](), [web applications](), [WebAssembly](), [WebGL](), [Code]() Tags: [code](), [collaboration](), [development](), [engineering](), [figma](), [web](), [web-browser](), [webgl]() ### AI overview This article explains how engineering roles at Figma can remain collaborative without becoming rigid rules. It discusses working across code boundaries, balancing independent work with feedback and iteration, and the technical and cultural changes that enabled Figma's collaborative web-based tool, including WebGL and WebAssembly. ### Source excerpt Product development is increasingly collaborative. But what does it mean to be collaborative as an engineer? It starts with thinking across code boundaries, and beyond the limits of our roles and responsibilities. Here's how we've found our own collaborative sweet spot on the engineering team at Figma, and the principles and processes that help define our work. ## How We Built Shopify Party DevFeed: [How We Built Shopify Party]() Original publisher: [Read original article]() Author: Daniel Beauchamp Published: 2022-06-14T14:00:00Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Shopify](), [Unity](), [WebGL](), [3D](), [browser](), [Web](), [Three.js]() Tags: [3d](), [browser](), [games](), [shopify](), [tech-stack](), [unity](), [web](), [webgl]() ### AI overview This article explains how Shopify Party, a browser-based internal tool for remote social interaction, was designed and built. It covers the project's 3D avatar-based spaces, non-prescriptive gameplay, easy joining and leaving, simple controls, and browser delivery using Unity WebGL. ### Source excerpt Shopify Party is a browser-based internal tool that we built to make our virtual hangouts more fun. With Shopify's move to remote, we wanted to explore how to give people a break from video fatigue and create a new space designed for social interaction. Here's how we built it. ## How we use WebGL at Squarespace DevFeed: [How we use WebGL at Squarespace]() Original publisher: [Read original article]() Author: Szenia Zadvornykh Published: 2022-04-08T14:25:33Z Content type: article Language: en Sources: [Squarespace](), [Squarespace Engineering Blog]() Topics: [WebGL](), [Web Development](), [browser](), [Canvas]() Tags: [browser](), [canvas](), [graphics](), [web-development](), [webgl]() ### AI overview Squarespace describes using WebGL to generate customizable animated Background Art graphics client side for website section backgrounds. The article introduces the WebGL canvas and rendering-context model and discusses integration challenges in the Squarespace website editor. ### Source excerpt Recently, we introduced Background Art as a new way for customers to add graphics to their websites. This feature leverages WebGL to generate abstract animated graphics client side. These graphics can be seamlessly added to a web page, offering an alternative to images and videos for section backgrounds. ## How We Built Size.link DevFeed: [How We Built Size.link]() Original publisher: [Read original article]() Author: Daniel Beauchamp Published: 2020-07-13T17:00:00Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Shopify](), [immersive web](), [3D](), [Android](), [iOS](), [Quick Look](), [JavaScript](), [Three.js](), [browser](), [Web]() Tags: [3d](), [android](), [browser](), [covid](), [free](), [hack](), [ios](), [javascript](), [shopify](), [smartphone](), [three-js](), [web](), [webgl]() ### AI overview Shopify explains how it built Size.link, a free web-based augmented reality tool that helps shoppers visualize a product's physical size using a smartphone camera. The solution uses platform-native AR viewers on iOS and Android to avoid requiring a dedicated app. ### Source excerpt On July 20, 2020 we held ShipIt! Presents: AR/VR at Shopify. Daniel talked about what we're doing with AR/VR at Shopify. The video of the event is available. Size.link is a free tool built by Shopify's Augmented Reality (AR) team that lets anyone view the size of a product in the space around them using their smartphone camera. The tool came out of our April Hack Days focused on helping retailers impacted by Covid-19. ## The perils of tensor.dataSync() DevFeed: [The perils of tensor.dataSync()]() Original publisher: [Read original article]() Author: Monica Dinculescu Published: 2019-02-22T00:00:00Z Content type: tutorial Language: en Sources: [Monica Dinculescu]() Topics: [Tensorflow](), [WebGL](), [GPU](), [cpu]() Tags: [cpu](), [gpu](), [javascript](), [tensorflow](), [webgl]() ### AI overview This TensorFlow.js post explains why synchronously converting tensors to JavaScript values with tensor.dataSync() can block the UI and cause janky rendering. It describes how tensor data moves between CPU memory and GPU-backed WebGL textures, and why repeated transfers are costly. ### Source excerpt One of the first things you stumble on when you start using TensorFlow.js is that sometimes you need your data as a Tensor, and sometimes you need it as a JavaScript number. Maybe it's for logging it, maybe it's for displaying it somewhere during training, maybe it's because you don't trust the robots to be better than you at math. This is a quick post that tries to clarify why doing this synchronously is probably bad and will leave your UI really janky. Nikhil (who like, birthed TensorFlow.js, bless) was kind enough to explain this to me recently, so I figured I'd return the favour, with fewer meeps and more mistakes. Downloading and Uploading When you create a Tensor, it lives on the CPU. The mere fact that it's a Tensor doesn't automatically move that data into its GPU mansion - it needs to be used in a WebGL program. (I'm playing fast and loose here with the words GPU and CPU btw, so hold back the pedantics: when I say "it lives on the CPU" I mean "in main memory, where the CPU processes stuff"; the GPU has it's own memory, that's where it processes stuff, and that's where that data has to get transferred to. It's fine. You know I know.) You upload the tensor to the GPU when you call one of the tf. operations on it. Tensor operations are matrix math, and matrix math is really fast on the GPU, so every time you call something like sum or sqrt on a Tensor, TensorFlow.js creates a little WebGL operation, and sends it to the backend. Whatever data lived on the CPU is now "uploaded" to the GPU (to a WebGL texture). You download a Tensor when you want to get that data from the GPU back onto the CPU. The data now lives in a WebGL texture, so TensorFlow.js needs to call readPixels to ... read... those pixels... from the texture and convert them back into something you can use. Here's the problem: calling readPixels is fundamentally a blocking operation: when you ask the GPU to give you data, you have to wait for it to respond; this means you can't really do anything else on t ## CloudFormation vs. Terraform DevFeed: [CloudFormation vs. Terraform]() Original publisher: [Read original article]() Author: Wojtek Gawroński (afronski) Published: 2017-04-11T08:00:00Z Content type: comparison Language: en Sources: [Wojtek Gawroński]() Topics: [Terraform](), [AWS CloudFormation](), [Amazon Web Services](), [Infrastructure as code](), [vendor lock-in](), [Disaster Recovery]() Tags: [aws](), [aws-cloudformation](), [c-sharp](), [canvas](), [clojure](), [css](), [css3](), [disaster-recovery](), [erlang](), [html](), [html5](), [infrastructure-as-code](), [javascript](), [mono](), [net](), [node-js](), [sicp](), [terraform](), [vagrant](), [vendor-lock-in](), [webgl]() ### AI overview This comparison examines Terraform and AWS CloudFormation for automating cloud infrastructure. The author explains the decision to use a pure CloudFormation setup, choose AWS, and drop Terraform, while discussing provider dependence, vendor lock-in, and disaster recovery considerations. ### Source excerpt CloudFormation vs. Terraform. a There is a time when every project that uses a cloud computing service has a difficult choice to make - should we automate the infrastructure or not? Immediately after, another question pops up - how should we do it? Should we use a dedicated tool (AWS CloudFormation, Azure Resource Templates, OpenStack Heat or Google Cloud Deployment Manager) or a provider-agnostic solution? And then - immediately after a surprise comes in - at first glance, there is no other tool like Terraform available on the market (but there is - it is called Foreman :wink:). So we have a good tool, built by amazing people (HashiCorp) which does not rely on any particular cloud - problem solved? Not entirely. As a grown up, you know that like the ORM does not let you change database on the fly, Terraform will not let you automatically switch your cloud provider for your entire system. From the other hand - you fear vendor lock-in, and for sure you are considering how to design and prepare disaster recovery scenarios. A lot of unknowns, isn't it? I would like to show my rationale for a new project and infrastructure for which I, among others, was responsible. The motivation which drove us towards a pure CloudFormation setup, the reason behind our bet on AWS, and the motivation behind the decision to drop Terraform. Keep in mind that all remarks and comments pointed in this article are constructive criticism - it does not change my opinion about companies that created those tools at all. I have huge respect for both for AWS and HashiCorp - the work they have done, especially in tooling and cloud computing landscape is outstanding. As a user of AWS Services and HashiCorp tools I am grateful for the work they did. If you do not have experience with CloudFormation or Terraform - please read either amazing documentation or any other introductory article. I will assume your basic knowledge about these two. Terraform is not a silver bullet. When I evaluated Terraform, i [Next page]()