# WebGL

WebGL is an API with core specifications, extensions, IDL files, and related documentation maintained in the Khronos WebGL API Registry.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## 3D Graphics Without Writing Shaders: The Portable GPU API

DevFeed: [3D Graphics Without Writing Shaders: The Portable GPU API](<https://devfeed.tech/articles/3d-graphics-without-writing-shaders-the-portable-gpu-api-19440.md>)

Original publisher: [Read original article](<https://www.codenameone.com/blog/portable-3d-graphics-api/>)

Author: Shai Almog

Published: 2026-06-13T00:00:00Z

Content type: article

Language: en

Sources: [CodeName One](<https://devfeed.tech/sources/codename-one.md>)

Topics: [3D graphics](<https://devfeed.tech/topics/3d-graphics.md>), [API](<https://devfeed.tech/topics/api.md>), [Java](<https://devfeed.tech/topics/java.md>), [GPU](<https://devfeed.tech/topics/gpu.md>), [shaders](<https://devfeed.tech/topics/shaders.md>), [OpenGL](<https://devfeed.tech/topics/opengl.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [3d-graphics](<https://devfeed.tech/tags/3d-graphics.md>), [api](<https://devfeed.tech/tags/api.md>), [code](<https://devfeed.tech/tags/code.md>), [cross-platform](<https://devfeed.tech/tags/cross-platform.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [java](<https://devfeed.tech/tags/java.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [software](<https://devfeed.tech/tags/software.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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](<https://devfeed.tech/articles/native-java-win32-3d-gaming-printing-and-wallet-19393.md>)

Original publisher: [Read original article](<https://www.codenameone.com/blog/native-java-win32-3d-gaming-printing-and-wallet/>)

Author: Shai Almog

Published: 2026-06-12T00:00:00Z

Content type: release

Language: en

Sources: [CodeName One](<https://devfeed.tech/sources/codename-one.md>)

Topics: [Windows](<https://devfeed.tech/topics/windows.md>), [3D graphics](<https://devfeed.tech/topics/3d-graphics.md>), [Game Development](<https://devfeed.tech/topics/game-development.md>), [cross-platform](<https://devfeed.tech/topics/cross-platform.md>), [API](<https://devfeed.tech/topics/api.md>), [GPU](<https://devfeed.tech/topics/gpu.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [OpenGL](<https://devfeed.tech/topics/opengl.md>)

Tags: [3d-graphics](<https://devfeed.tech/tags/3d-graphics.md>), [api](<https://devfeed.tech/tags/api.md>), [core](<https://devfeed.tech/tags/core.md>), [cross-platform](<https://devfeed.tech/tags/cross-platform.md>), [game-development](<https://devfeed.tech/tags/game-development.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [java](<https://devfeed.tech/tags/java.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [win32](<https://devfeed.tech/tags/win32.md>)

### 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](<https://devfeed.tech/articles/code-generation-that-just-works-21576.md>)

Original publisher: [Read original article](<https://maryrosecook.com/blog/post/code-generation-that-just-works>)

Published: 2026-03-27T07:00:00Z

Content type: article

Language: en

Sources: [Mary Rose Cook](<https://devfeed.tech/sources/mary-rose-cook.md>)

Topics: [AI-assisted coding](<https://devfeed.tech/topics/ai-assisted-coding.md>), [Code](<https://devfeed.tech/topics/code.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [agent](<https://devfeed.tech/tags/agent.md>), [browser](<https://devfeed.tech/tags/browser.md>), [bugs](<https://devfeed.tech/tags/bugs.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [code](<https://devfeed.tech/tags/code.md>), [code-generation](<https://devfeed.tech/tags/code-generation.md>), [computer](<https://devfeed.tech/tags/computer.md>), [developer](<https://devfeed.tech/tags/developer.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [interface](<https://devfeed.tech/tags/interface.md>), [language](<https://devfeed.tech/tags/language.md>), [model](<https://devfeed.tech/tags/model.md>), [render](<https://devfeed.tech/tags/render.md>), [tool](<https://devfeed.tech/tags/tool.md>), [user-interface](<https://devfeed.tech/tags/user-interface.md>), [vector](<https://devfeed.tech/tags/vector.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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](<https://devfeed.tech/articles/fast-calculation-of-the-distance-to-cubic-bezier-curves-on-the-gpu-26120.md>)

Original publisher: [Read original article](<http://blog.pkh.me/p/46-fast-calculation-of-the-distance-to-cubic-bezier-curves-on-the-gpu.html>)

Published: 2025-10-18T09:21:56Z

Content type: article

Language: en

Sources: [The Last Static Blog RSS](<https://devfeed.tech/sources/the-last-static-blog-rss.md>)

Topics: [GPU](<https://devfeed.tech/topics/gpu.md>), [glsl](<https://devfeed.tech/topics/glsl.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [shaders](<https://devfeed.tech/topics/shaders.md>), [pixel](<https://devfeed.tech/topics/pixel.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [glsl](<https://devfeed.tech/tags/glsl.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [math](<https://devfeed.tech/tags/math.md>), [maths](<https://devfeed.tech/tags/maths.md>), [pixel](<https://devfeed.tech/tags/pixel.md>), [prog](<https://devfeed.tech/tags/prog.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [source](<https://devfeed.tech/tags/source.md>), [visualization](<https://devfeed.tech/tags/visualization.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgl-demo](<https://devfeed.tech/tags/webgl-demo.md>)

### 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](<https://devfeed.tech/articles/figma-rendering-powered-by-webgpu-9703.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/figma-rendering-powered-by-webgpu/>)

Author: Alex Ringlein; Luke Anderson

Published: 2025-09-18T00:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [webgpu](<https://devfeed.tech/topics/webgpu.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [Optimization](<https://devfeed.tech/topics/optimization.md>), [GPU](<https://devfeed.tech/topics/gpu.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Chromium](<https://devfeed.tech/topics/chromium.md>), [cpu](<https://devfeed.tech/topics/cpu.md>), [shaders](<https://devfeed.tech/topics/shaders.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [chromium](<https://devfeed.tech/tags/chromium.md>), [compatibility](<https://devfeed.tech/tags/compatibility.md>), [cpu](<https://devfeed.tech/tags/cpu.md>), [figma](<https://devfeed.tech/tags/figma.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [optimization](<https://devfeed.tech/tags/optimization.md>), [performance](<https://devfeed.tech/tags/performance.md>), [shaders](<https://devfeed.tech/tags/shaders.md>), [webgl](<https://devfeed.tech/tags/webgl.md>), [webgpu](<https://devfeed.tech/tags/webgpu.md>)

### 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?](<https://devfeed.tech/articles/how-did-we-build-3d-animations-in-mobile-apps-15453.md>)

Original publisher: [Read original article](<https://medium.com/wise-engineering/how-did-we-build-3d-animations-in-mobile-apps-515c3de87b74?source=rss----f2565bbe9c46---4>)

Author: Yağız Gürgül

Published: 2025-01-29T16:59:35Z

Content type: tutorial

Language: en

Sources: [Wise Engineering - Medium](<https://devfeed.tech/sources/wise-engineering-medium.md>)

Topics: [Three.js](<https://devfeed.tech/topics/threejs.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [HTML](<https://devfeed.tech/topics/html.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [animation](<https://devfeed.tech/tags/animation.md>), [gltf](<https://devfeed.tech/tags/gltf.md>), [html](<https://devfeed.tech/tags/html.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [optimisation](<https://devfeed.tech/tags/optimisation.md>), [optimization](<https://devfeed.tech/tags/optimization.md>), [three-js](<https://devfeed.tech/tags/three-js.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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](<https://devfeed.tech/articles/why-developers-should-embrace-creative-coding-again-10247.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/why-developers-should-embrace-creative-coding-again/>)

Author: Jake Albaugh

Published: 2025-01-09T00:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [creative coding](<https://devfeed.tech/topics/creative-coding.md>), [creative technology](<https://devfeed.tech/topics/creative-technology.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Web](<https://devfeed.tech/topics/web.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML5](<https://devfeed.tech/topics/html5.md>), [SVG](<https://devfeed.tech/topics/svg.md>), [GSAP](<https://devfeed.tech/topics/gsap.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [Figma plugin](<https://devfeed.tech/topics/figma-plugin.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [css](<https://devfeed.tech/tags/css.md>), [design](<https://devfeed.tech/tags/design.md>), [design-tools](<https://devfeed.tech/tags/design-tools.md>), [developers](<https://devfeed.tech/tags/developers.md>), [figma](<https://devfeed.tech/tags/figma.md>), [figma-plugin](<https://devfeed.tech/tags/figma-plugin.md>), [free](<https://devfeed.tech/tags/free.md>), [gsap](<https://devfeed.tech/tags/gsap.md>), [html5](<https://devfeed.tech/tags/html5.md>), [svg](<https://devfeed.tech/tags/svg.md>), [tools](<https://devfeed.tech/tags/tools.md>), [web](<https://devfeed.tech/tags/web.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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.

## Self-host Maps with Protomaps and Supabase Storage

DevFeed: [Self-host Maps with Protomaps and Supabase Storage](<https://devfeed.tech/articles/self-host-maps-with-protomaps-and-supabase-storage-548.md>)

Original publisher: [Read original article](<https://supabase.com/blog/self-host-maps-storage-protomaps>)

Author: Brandon Liu; Thor Schaeff

Published: 2024-06-19T07:00:00Z

Content type: tutorial

Language: en

Sources: [Supabase Blog](<https://devfeed.tech/sources/supabase-blog.md>)

Topics: [Supabase](<https://devfeed.tech/topics/supabase.md>), [Web](<https://devfeed.tech/topics/web.md>), [Vanilla JavaScript](<https://devfeed.tech/topics/vanilla-js.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [Authorization](<https://devfeed.tech/topics/authorization.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>)

Tags: [authorization](<https://devfeed.tech/tags/authorization.md>), [cli](<https://devfeed.tech/tags/cli.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [web](<https://devfeed.tech/tags/web.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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](<https://devfeed.tech/articles/launch-week-x-hackathon-winners-438.md>)

Original publisher: [Read original article](<https://supabase.com/blog/launch-week-x-hackathon-winners>)

Author: Andrew Smith; Tyler Shukert

Published: 2024-01-04T07:00:00Z

Content type: article

Language: en

Sources: [Supabase Blog](<https://devfeed.tech/sources/supabase-blog.md>)

Topics: [For the Love of Code](<https://devfeed.tech/topics/for-the-love-of-code.md>), [Supabase](<https://devfeed.tech/topics/supabase.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [Feathers](<https://devfeed.tech/topics/feathers.md>), [Retrieval Augmented Generation (RAG)](<https://devfeed.tech/topics/retrieval-augmented-generation-rag.md>), [Embeddings](<https://devfeed.tech/topics/embeddings.md>), [Visual Studio Code](<https://devfeed.tech/topics/visual-studio-code.md>), [Databases](<https://devfeed.tech/topics/databases.md>), [Rust](<https://devfeed.tech/topics/rust.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [agent](<https://devfeed.tech/tags/agent.md>), [ai](<https://devfeed.tech/tags/ai.md>), [cli](<https://devfeed.tech/tags/cli.md>), [code](<https://devfeed.tech/tags/code.md>), [data](<https://devfeed.tech/tags/data.md>), [embeddings](<https://devfeed.tech/tags/embeddings.md>), [extension](<https://devfeed.tech/tags/extension.md>), [hackathon](<https://devfeed.tech/tags/hackathon.md>), [launch](<https://devfeed.tech/tags/launch.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [postgresql](<https://devfeed.tech/tags/postgresql.md>), [rag](<https://devfeed.tech/tags/rag.md>), [rust](<https://devfeed.tech/tags/rust.md>), [vercel](<https://devfeed.tech/tags/vercel.md>), [web](<https://devfeed.tech/tags/web.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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](<https://devfeed.tech/articles/why-roles-are-not-rules-10254.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/why-roles-are-not-rules/>)

Author: Kris Rasmussen

Published: 2023-06-20T00:00:00Z

Content type: opinion

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [WebAssembly](<https://devfeed.tech/topics/web-assembly.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [collaboration](<https://devfeed.tech/tags/collaboration.md>), [development](<https://devfeed.tech/tags/development.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [figma](<https://devfeed.tech/tags/figma.md>), [web](<https://devfeed.tech/tags/web.md>), [web-browser](<https://devfeed.tech/tags/web-browser.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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](<https://devfeed.tech/articles/how-we-built-shopify-party-1429.md>)

Original publisher: [Read original article](<https://shopify.engineering/how-we-built-shopify-party>)

Author: Daniel Beauchamp

Published: 2022-06-14T14:00:00Z

Content type: article

Language: en

Sources: [Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering.md>), [Shopify Engineering - Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering-shopify-engineering.md>)

Topics: [Shopify](<https://devfeed.tech/topics/shopify.md>), [Unity](<https://devfeed.tech/topics/unity.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [3D](<https://devfeed.tech/topics/3d.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Web](<https://devfeed.tech/topics/web.md>), [Three.js](<https://devfeed.tech/topics/threejs.md>)

Tags: [3d](<https://devfeed.tech/tags/3d.md>), [browser](<https://devfeed.tech/tags/browser.md>), [games](<https://devfeed.tech/tags/games.md>), [shopify](<https://devfeed.tech/tags/shopify.md>), [tech-stack](<https://devfeed.tech/tags/tech-stack.md>), [unity](<https://devfeed.tech/tags/unity.md>), [web](<https://devfeed.tech/tags/web.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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](<https://devfeed.tech/articles/how-we-use-webgl-at-squarespace-30769.md>)

Original publisher: [Read original article](<https://engineering.squarespace.com/blog/2022/how-we-use-webgl-at-squarespace-877l9-8lyaw>)

Author: Szenia Zadvornykh

Published: 2022-04-08T14:25:33Z

Content type: article

Language: en

Sources: [Squarespace](<https://devfeed.tech/sources/squarespace.md>), [Squarespace Engineering Blog](<https://devfeed.tech/sources/squarespace-engineering-blog.md>)

Topics: [WebGL](<https://devfeed.tech/topics/webgl.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [web-development](<https://devfeed.tech/tags/web-development.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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.

## The perils of tensor.dataSync()

DevFeed: [The perils of tensor.dataSync()](<https://devfeed.tech/articles/the-perils-of-tensor-datasync-35532.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/on-tfjs-datasync/>)

Author: Monica Dinculescu

Published: 2019-02-22T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [Tensorflow](<https://devfeed.tech/topics/tensorflow.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>), [GPU](<https://devfeed.tech/topics/gpu.md>), [cpu](<https://devfeed.tech/topics/cpu.md>)

Tags: [cpu](<https://devfeed.tech/tags/cpu.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [tensorflow](<https://devfeed.tech/tags/tensorflow.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### 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

## 2015 Resolutions

DevFeed: [2015 Resolutions](<https://devfeed.tech/articles/2015-resolutions-28725.md>)

Original publisher: [Read original article](<https://una.im/2015-resolutions/>)

Published: 2014-12-31T00:00:00Z

Content type: article

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Node.js](<https://devfeed.tech/topics/node-js.md>), [Sass](<https://devfeed.tech/topics/sass.md>), [Gulp](<https://devfeed.tech/topics/gulp.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Command-line interface](<https://devfeed.tech/topics/cli.md>), [Express](<https://devfeed.tech/topics/express.md>), [Meteor](<https://devfeed.tech/topics/meteor.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Vim](<https://devfeed.tech/topics/vim.md>), [WebGL](<https://devfeed.tech/topics/webgl.md>)

Tags: [3d-graphics](<https://devfeed.tech/tags/3d-graphics.md>), [angular](<https://devfeed.tech/tags/angular.md>), [blog](<https://devfeed.tech/tags/blog.md>), [command-line](<https://devfeed.tech/tags/command-line.md>), [express](<https://devfeed.tech/tags/express.md>), [github](<https://devfeed.tech/tags/github.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [make](<https://devfeed.tech/tags/make.md>), [node-js](<https://devfeed.tech/tags/node-js.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [personal](<https://devfeed.tech/tags/personal.md>), [post](<https://devfeed.tech/tags/post.md>), [published](<https://devfeed.tech/tags/published.md>), [review](<https://devfeed.tech/tags/review.md>), [sass](<https://devfeed.tech/tags/sass.md>), [testing](<https://devfeed.tech/tags/testing.md>), [vim](<https://devfeed.tech/tags/vim.md>), [webgl](<https://devfeed.tech/tags/webgl.md>)

### AI overview

A personal review of 2014 and a set of goals for 2015. The author describes projects, travel, speaking, open-source contributions, and progress in JavaScript, Sass, Gulp, Meteor.js, Express.js, Angular, Node.js, testing, Vim, WebGL, and 3D graphics.

### Source excerpt

This is a personal post about my 2014 in review (because a lot happened) and my goals for 2015. Happy New Year!