If you buy through a <strong>BGR</strong> link, we may earn an affiliate commission, helping support our expert product labs.

It might be time for NASA to bail on Boeing's Starliner

Get the most recent info and news about BGR on HackerNoon, where 10k+ technologists publish stories for 4M+ monthly readers.

BGR: The leading mobile and technology news source for breaking news, reviews, insights and opinions

Weather Image Recognition with AI: Dataset Labeling, Model Training, and Real-world Usecases

Want to Search for Something With an Image and a Text Description? Try a Multimodal RAG

¿Mä Imagen ukat Texto Descripción ukampi kuns thaqhañ munasmati? Mä RAG Multimodal ukamp yant’aña

¿Quieres buscar algo con una imagen y una descripción de texto? Prueba un RAG multimodal

آیا می خواهید چیزی را با یک تصویر و یک توضیح متنی جستجو کنید؟ یک RAG Multimodal را امتحان کنید

Vous souhaitez rechercher quelque chose avec une image et une description textuelle ? Essayez un RAG multimodal

画像とテキストの説明を使って何かを検索したいですか? マルチモーダル RAG をお試しください

ចង់ស្វែងរកអ្វីមួយដែលមានរូបភាព និងការពិពណ៌នាអត្ថបទ? សាកល្បងប្រើ Multimodal RAG

Зураг болон текстийн тайлбартай ямар нэг зүйл хайхыг хүсч байна уу? Multimodal RAG-г туршаад үзээрэй

Ingin Mencari Sesuatu Dengan Imej dan Penerangan Teks? Cuba RAG Multimodal

غواړئ د عکس او متن توضیحاتو سره یو څه وپلټئ؟ د ملټي موډل RAG هڅه وکړئ

රූපයක් සහ පෙළ විස්තරයක් සමඟ යමක් සෙවීමට අවශ්‍යද? Multimodal RAG එකක් උත්සාහ කරන්න

ต้องการค้นหาบางสิ่งที่มีรูปภาพและคำอธิบายหรือไม่ ลองใช้ RAG แบบหลายโหมด

Surat we tekst beýany bilen bir zat gözlemek isleýärsiňizmi? Multimodal RAG synap görüň

How I Created AI Photocraft: An AI SaaS Tool Using Open Source Projects on GitHub

The vast majority of modern systems are built on a microservice architecture. This means that you can be the maintainer of about a hundred services, which are being worked on by several teams of software engineers. As the person responsible for the system, it is important for you to monitor the relevance of the master branch of all projects. One of the easiest and fastest ways to do this is to check how much your main project branch lags behind the test branch after the release. Thanks to this simple check, you will be sure that the teams have brought all the services to production. Also, a quick report on the lag of the master branch from dev will be useful for understanding the state of development. If more than a few hundred commits have accumulated in the dev branch, then this is a red flag and you, as a team lead, should raise this issue at the sprint retro, because it is obvious that there were interruptions in the process of delivering improvements to production. To solve the problem of quickly viewing ahead/behind my projects, I use the rest API for GitLab (https://docs.gitlab.com/ee/api/rest/), which provides me with all the necessary capabilities. As a language, I chose JavaScript without frameworks, because we have a fast development for ourselves, which should not require a special environment. As a result of the script's work, I want to see a table with columns in the console: group_id - gitlab project group id
group_name - the name of the project group
id - project id
name - project name
behind - how many commits is the master branch ahead of the dev
ahead - how many commits is the dev branch ahead of the master To access the data, I will use a personal access token, which can be obtained in the settings of my GitLab profile. First, I'll get a list of groups using the/api/v4/groups method. After that, I need to get a list of project repositories using the /api/v4/groups/${group.id}/projects method. All that remains is to get the number of commits using the /api/v4/projects/${project.id}/repository/compare method. Next, I collect the data in a table, perform a sorting that is convenient for me, and highlight problematic lines. To perform REST requests, I use axios, and to output a table with data, I use the console-table-printer project. As a result, I got the following script. const { Table } = require('console-table-printer');
const axios = require('axios');

const token = token';
const baseUrl = 'https://git.my-company.net';
const from = 'master';
const to = 'dev';

(async () => {
    let data = [];
    const groups = await axios
        .get(`${baseUrl}/api/v4/groups?private_token=${token}`)
        .then(res => res.data);

    await Promise.all(groups.map(async (group) => {
        const projects = await axios
            .get(`${baseUrl}/api/v4/groups/${group.id}/projects?per_page=100&private_token=${token}`)
            .then(res => res.data);

        await Promise.all(projects.map(async (project) => {
            const behind = await axios
                .get(`${baseUrl}/api/v4/projects/${project.id}/repository/compare?from=${from}&to=${to}&private_token=${token}`)
                .then(res => res.data)
                .catch(err => {});
            const ahead = await axios
                .get(`${baseUrl}/api/v4/projects/${project.id}/repository/compare?from=${to}&to=${from}&private_token=${token}`)
                .then(res => res.data)
                .catch(err => {});
            if (behind && behind.commits && ahead && ahead.commits){
                data.push({
                    group_id: group.id,
                    group_name: group.name,
                    id: project.id,
                    name: project.name,
                    behind: behind.commits.length,
                    ahead: ahead.commits.length,
                });
            }
        }));
    }))

    data = data
        .sort((a,b) =>
            (a.group_name > b.group_name)
                ? 1
                : ((b.group_name > a.group_name) ? -1
                    : (a.name > b.name)
                        ? 1
                        : ((b.name > a.name) ? -1 : 0)));

    const table = new Table();
    data.forEach((row) => {
        table.addRow(row, {
            color: row.behind ? 'red' : undefined,
        });
    });
    table.printTable();
})(); After its execution, the following table is output to the console: group_id

group_name

id

name

behind

ahead



235

common

34

common_service

5

2



235

common

455

master_data

0

0



379

core

453

core_service

7

0



379

core

344

core_tasks

3

1 The vast majority of modern systems are built on a microservice architecture. This means that you can be the maintainer of about a hundred services, which are being worked on by several teams of software engineers. As the person responsible for the system, it is important for you to monitor the relevance of the master branch of all projects. One of the easiest and fastest ways to do this is to check how much your main project branch lags behind the test branch after the release. Thanks to this simple check, you will be sure that the teams have brought all the services to production. Also, a quick report on the lag of the master branch from dev will be useful for understanding the state of development. If more than a few hundred commits have accumulated in the dev branch, then this is a red flag and you, as a team lead, should raise this issue at the sprint retro, because it is obvious that there were interruptions in the process of delivering improvements to production. To solve the problem of quickly viewing ahead/behind my projects, I use the rest API for GitLab ( https://docs.gitlab.com/ee/api/rest/ ), which provides me with all the necessary capabilities. https://docs.gitlab.com/ee/api/rest/ As a language, I chose JavaScript without frameworks, because we have a fast development for ourselves, which should not require a special environment. As a result of the script's work, I want to see a table with columns in the console: group_id - gitlab project group id group_name - the name of the project group id - project id name - project name behind - how many commits is the master branch ahead of the dev ahead - how many commits is the dev branch ahead of the master group_id - gitlab project group id group_name - the name of the project group id - project id name - project name behind - how many commits is the master branch ahead of the dev ahead - how many commits is the dev branch ahead of the master To access the data, I will use a personal access token, which can be obtained in the settings of my GitLab profile. First, I'll get a list of groups using the /api/v4/groups method. /api/v4/groups After that, I need to get a list of project repositories using the /api/v4/groups/${group.id}/projects method. /api/v4/groups/${group.id}/projects All that remains is to get the number of commits using the /api/v4/projects/${project.id}/repository/compare method. /api/v4/projects/${project.id}/repository/compare Next, I collect the data in a table, perform a sorting that is convenient for me, and highlight problematic lines. To perform REST requests, I use axios , and to output a table with data, I use the console-table-printer project. As a result, I got the following script. axios console-table-printer const { Table } = require('console-table-printer');
const axios = require('axios');

const token = token';
const baseUrl = 'https://git.my-company.net';
const from = 'master';
const to = 'dev';

(async () => {
    let data = [];
    const groups = await axios
        .get(`${baseUrl}/api/v4/groups?private_token=${token}`)
        .then(res => res.data);

    await Promise.all(groups.map(async (group) => {
        const projects = await axios
            .get(`${baseUrl}/api/v4/groups/${group.id}/projects?per_page=100&private_token=${token}`)
            .then(res => res.data);

        await Promise.all(projects.map(async (project) => {
            const behind = await axios
                .get(`${baseUrl}/api/v4/projects/${project.id}/repository/compare?from=${from}&to=${to}&private_token=${token}`)
                .then(res => res.data)
                .catch(err => {});
            const ahead = await axios
                .get(`${baseUrl}/api/v4/projects/${project.id}/repository/compare?from=${to}&to=${from}&private_token=${token}`)
                .then(res => res.data)
                .catch(err => {});
            if (behind && behind.commits && ahead && ahead.commits){
                data.push({
                    group_id: group.id,
                    group_name: group.name,
                    id: project.id,
                    name: project.name,
                    behind: behind.commits.length,
                    ahead: ahead.commits.length,
                });
            }
        }));
    }))

    data = data
        .sort((a,b) =>
            (a.group_name > b.group_name)
                ? 1
                : ((b.group_name > a.group_name) ? -1
                    : (a.name > b.name)
                        ? 1
                        : ((b.name > a.name) ? -1 : 0)));

    const table = new Table();
    data.forEach((row) => {
        table.addRow(row, {
            color: row.behind ? 'red' : undefined,
        });
    });
    table.printTable();
})(); const { Table } = require('console-table-printer');
const axios = require('axios');

const token = token';
const baseUrl = 'https://git.my-company.net';
const from = 'master';
const to = 'dev';

(async () => {
    let data = [];
    const groups = await axios
        .get(`${baseUrl}/api/v4/groups?private_token=${token}`)
        .then(res => res.data);

    await Promise.all(groups.map(async (group) => {
        const projects = await axios
            .get(`${baseUrl}/api/v4/groups/${group.id}/projects?per_page=100&private_token=${token}`)
            .then(res => res.data);

        await Promise.all(projects.map(async (project) => {
            const behind = await axios
                .get(`${baseUrl}/api/v4/projects/${project.id}/repository/compare?from=${from}&to=${to}&private_token=${token}`)
                .then(res => res.data)
                .catch(err => {});
            const ahead = await axios
                .get(`${baseUrl}/api/v4/projects/${project.id}/repository/compare?from=${to}&to=${from}&private_token=${token}`)
                .then(res => res.data)
                .catch(err => {});
            if (behind && behind.commits && ahead && ahead.commits){
                data.push({
                    group_id: group.id,
                    group_name: group.name,
                    id: project.id,
                    name: project.name,
                    behind: behind.commits.length,
                    ahead: ahead.commits.length,
                });
            }
        }));
    }))

    data = data
        .sort((a,b) =>
            (a.group_name > b.group_name)
                ? 1
                : ((b.group_name > a.group_name) ? -1
                    : (a.name > b.name)
                        ? 1
                        : ((b.name > a.name) ? -1 : 0)));

    const table = new Table();
    data.forEach((row) => {
        table.addRow(row, {
            color: row.behind ? 'red' : undefined,
        });
    });
    table.printTable();
})(); After its execution, the following table is output to the console: group_id

group_name

id

name

behind

ahead



235

common

34

common_service

5

2



235

common

455

master_data

0

0



379

core

453

core_service

7

0



379

core

344

core_tasks

3

1 group_id

group_name

id

name

behind

ahead 235

common

34

common_service

5

2 235

common

455

master_data

0

0 379

core

453

core_service

7

0 379

core

344

core_tasks

3

1 group_id group_name id name behind ahead group_id group_id group_name group_name id id name name behind behind ahead ahead 235 common 34 common_service 5 2 235 235 common common 34 34 common_service common_service 5 5 2 2 235 common 455 master_data 0 0 235 235 common common 455 455 master_data master_data 0 0 0 0 379 core 453 core_service 7 0 379 379 core core 453 453 core_service core_service 7 7 0 0 379 core 344 core_tasks 3 1 379 379 core core 344 344 core_tasks core_tasks 3 3 1 1

Git Ahead Dashboard: A Quick Guide

Building a Logo Creation App with Next.js, Shadcn/ui, and Lucide React

Building Advanced Video Search: Frame Search Versus Multi-Modal Embeddings

উন্নত ভিডিও অনুসন্ধান তৈরি করা: ফ্রেম অনুসন্ধান বনাম মাল্টি-মোডাল এম্বেডিং

Erstellen einer erweiterten Videosuche: Frame-Suche im Vergleich zu multimodalen Einbettungen

Creación de búsqueda de vídeo avanzada: búsqueda de fotogramas frente a incrustaciones multimodales

Création d'une recherche vidéo avancée : recherche de trames et intégrations multimodales

उन्नत वीडियो खोज का निर्माण: फ़्रेम खोज बनाम मल्टी-मोडल एम्बेडिंग

高度なビデオ検索の構築: フレーム検索とマルチモーダル埋め込み

고급 비디오 검색 구축: 프레임 검색과 다중 모드 임베딩 비교

Construindo pesquisa avançada de vídeo: pesquisa de quadros versus incorporações multimodais

Создание расширенного поиска видео: поиск кадров в сравнении с мультимодальными встраиваниями

Gelişmiş Video Arama Oluşturma: Çerçeve Aramaya Karşı Çok Modlu Yerleştirmeler

Xây dựng Tìm kiếm video nâng cao: Tìm kiếm khung so với nhúng đa phương thức

构建高级视频搜索：帧搜索与多模态嵌入

Video Scene Location Recognition Using AI: Methodology

Moving to the upcoming WebGPU means more than just switching graphics APIs. It's also a step towards the future of web graphics. But this migration will turn out better with preparation and understanding — and this article will get you ready. Hello everyone, my name is Dmitrii Ivashchenko and I'm a software engineer at MY.GAMES. In this article, we'll discuss the differences between WebGL and the upcoming WebGPU, and we'll lay out how to prepare your project for migration. Content Overview Timeline of WebGL and WebGPU The current state of WebGPU, and what's to come High-level Conceptual Differences Initialization • WebGL: The Context Model • WebGPU: The Device Model Programs and Pipelines • WebGL: Program • WebGPU: Pipeline Uniforms • Uniforms in WebGL 1 • Uniforms in WebGL 2 • Uniforms in WebGPU Shaders • Shader Language: GLSL vs WGSL • Comparison of Data Types • Structures • Function Declarations • Built-in functions • Shader Conversion Convention Differences Textures • Viewport Space • Clip Spaces WebGPU Tips & Tricks • Minimize the number of pipelines you use. • Create pipelines in advance • Use RenderBundles Summary Timeline of WebGL and WebGPU , like many other web technologies, has roots that stretch back quite far into the past. To understand the dynamics and motivation behind the move towards WebGPU, it's helpful to first take a quick look at the history of WebGL development: WebGL The desktop version of OpenGL debuts. OpenGL desktop (1993) : This was the first stable release of WebGL, based on OpenGL ES 2.0, which was itself introduced in 2007. It provided web developers with the ability to use 3D graphics directly in browsers, without the need for additional plugins. WebGL 1.0 (2011) : Introduced six years after the first version, WebGL 2.0 was based on OpenGL ES 3.0 (2012). This version brought with it a number of improvements and new capabilities, making 3D graphics on the web even more powerful. WebGL 2.0 (2017) In recent years, there has been a surge of interest in new graphics APIs that provide developers with more control and flexibility: : Created by the Khronos group, this cross-platform API is the "successor" to OpenGL. Vulkan provides lower-level access to graphics hardware resources, allowing for high-performance applications with better control over graphics hardware. Vulkan (2016) : This API was created by Microsoft and is exclusively for Windows and Xbox. D3D12 is the successor to D3D10/11 and provides developers with deeper control over graphics resources. D3D12 (2015) : Created by Apple, Metal is an exclusive API for Apple devices. It was designed with maximum performance on Apple hardware in mind. Metal (2014) The current state of WebGPU, and what's to come Today, WebGPU is available on multiple platforms such as Windows, Mac, and ChromeOS through the Google Chrome and Microsoft Edge browsers, starting with version 113. Support for Linux and Android is expected in the near future. Here are some of the engines that already support (or offer experimental support) for WebGPU: : Full support for WebGPU. Babylon JS : Experimental support at the moment. ThreeJS : In development, but with very promising prospects. PlayCanvas : Very early and experimental WebGPU support was announced in version 2023.2 alpha. Unity : Officially supports WebGPU, making it one of the pioneers in this area. Cocos Creator 3.6.2 : currently supported in v113+ for Windows, macOS, and ChromeOS only. Construct Considering this, transitioning to WebGPU or at least preparing projects for such a transition appears to be a timely step in the near future. High-level Conceptual Differences Let's zoom out and take a look at some of the high-level conceptual differences between WebGL and WebGPU, starting with initialization. Initialization When starting to work with graphics APIs, one of the first steps is to initialize the main object for interaction. This process differs between WebGL and WebGPU, with some peculiarities for both systems. WebGL: The Context Model In WebGL, this object is known as "context", which essentially represents an interface for drawing on an HTML5 canvas element. Obtaining this context is quite simple: const gl = canvas.getContext('webgl'); The context of WebGL is actually tied to a specific canvas. This means that if you need to render on multiple canvases, you will need multiple contexts. WebGPU: The Device Model WebGPU introduces a new concept called "device". This device represents a GPU abstraction that you will interact with. The initialization process is a bit more complex than in WebGL, but it provides more flexibility: const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const context = canvas.getContext('webgpu');
context.configure({
   device,
   format: 'bgra8unorm',
}); One of the advantages of this model is that one device can render on multiple canvases or even none. This provides additional flexibility; for example, one device may control rendering in multiple windows or contexts. Programs and Pipelines WebGL and WebGPU represent different approaches to managing and organizing the graphics pipeline. WebGL: Program In WebGL, the main focus is on the shader program. The program combines vertex and fragment shaders, defining how vertices should be transformed and how each pixel should be colored. const program = gl.createProgram();
gl.attachShader(program, vertShader);
gl.attachShader(program, fragShader);
gl.bindAttribLocation(program, 'position', 0);
gl.linkProgram(program); Steps for creating a program in WebGL: : The source code for shaders is written and compiled. Creating Shaders : Compiled shaders are attached to the program and then linked. Creating Program : The program is activated before rendering. Using Program : Data is transmitted to the activated program. Data Transmission This process allows for flexible graphics control, but can also be complex and prone to errors, especially for large and complex projects. WebGPU: Pipeline WebGPU introduces the concept of a "pipeline" instead of a separate program. This pipeline combines not only shaders but also other information, which in WebGL, is established as states. So, creating a pipeline in WebGPU looks more complex: const pipeline = device.createRenderPipeline({
 layout: 'auto',
 vertex: {
   module: shaderModule, entryPoint: 'vertexMain',
   buffers: [{
     arrayStride: 12,
     attributes: [{
       shaderLocation: 0, offset: 0, format: 'float32x3'
     }]
   }],
 },
 fragment: {
   module: shaderModule, entryPoint: 'fragmentMain',
   targets: [{ format, }],
 },
}); Steps to create a pipeline in WebGPU: : The shader source code is written and compiled, similar to how it's done in WebGL. Shader definition : Shaders and other rendering parameters are combined into a pipeline. Pipeline creation : The pipeline is activated before rendering. Pipeline usage While WebGL separates each aspect of rendering, WebGPU tries to encapsulate more aspects into a single object, making the system more modular and flexible. Instead of separately managing shaders and rendering states, as is done in WebGL, WebGPU combines everything into one pipeline object. This makes the process more predictable and less prone to errors: Uniforms Uniform variables provide constant data that is available to all shader instances. Uniforms in WebGL 1 In basic WebGL, we have the ability to set variables directly through API calls. uniform : GLSL uniform vec3 u_LightPos;
uniform vec3 u_LightDir;
uniform vec3 u_LightColor; : JavaScript const location = gl.getUniformLocation(p, "u_LightPos");
gl.uniform3fv(location, [100, 300, 500]); This method is simple, but requires multiple API calls for each variable. uniform Uniforms in WebGL 2 With the arrival of WebGL 2, we now have the ability to group variables into buffers. Although you can still use separate uniform shaders, a better option is to group different uniforms into a larger structure using uniform buffers. Then you send all this uniform data to the GPU at once, similar to how you can load a vertex buffer in WebGL 1. This has several performance advantages, such as reducing API calls and being closer to how modern GPUs work. uniform : GLSL layout(std140) uniform ub_Params {
   vec4 u_LightPos;
   vec4 u_LightDir;
   vec4 u_LightColor;
}; : JavaScript gl.bindBufferBase(gl.UNIFORM_BUFFER, 1, gl.createBuffer()); To bind subsets of a large uniform buffer in WebGL 2, you can use a special API call known as . In WebGPU, there is something similar called dynamic uniform buffer offsets where you can pass a list of offsets when calling the API. bindBufferRange setBindGroup Uniforms in WebGPU WebGPU offers us an even better method. In this context, individual variables are no longer supported, and work is done exclusively through buffers. uniform uniform : WGSL [[block]] struct Params {
   u_LightPos : vec4<f32>;
   u_LightColor : vec4<f32>;
   u_LightDirection : vec4<f32>;
};
[[group(0), binding(0)]] var<uniform> ub_Params : Params; : JavaScript const buffer = device.createBuffer({
  usage: GPUBufferUsage.UNIFORM,
  size: 8
}); Modern GPUs prefer data to be loaded in one large block, rather than many small ones. Instead of recreating and rebinding small buffers each time, consider creating one large buffer and using different parts of it for different draw calls. This approach can significantly increase performance. WebGL is more imperative, resetting global state with each call, and striving to be as simple as possible. WebGPU, on the other hand, aims to be more object-oriented and focused on resource reuse, which leads to efficiency. Transitioning from WebGL to WebGPU may seem difficult due to differences in methods. However, starting with a transition to WebGL 2 as an intermediate step can simplify your life. Shaders Migrating from WebGL to WebGPU requires changes not only in the API, but also in shaders. The WGSL specification is designed to make this transition smooth and intuitive, while maintaining efficiency and performance for modern GPUs. Shader Language: GLSL vs WGSL WGSL is designed to be a bridge between WebGPU and native graphics APIs. Compared to GLSL, WGSL looks a bit more verbose, but the structure remains familiar. Here's an example shader for texture: : GLSL sampler2D myTexture;
varying vec2 vTexCoord;
void main() {
  return texture(myTexture, vTexCoord);
} : WGSL [[group(0), binding(0)]] var mySampler: sampler;
[[group(0), binding(1)]] var myTexture: texture_2d<f32>;
[[stage(fragment)]]
fn main([[location(0)]] vTexCoord: vec2<f32>) -> [[location(0)]] vec4<f32> {
  return textureSample(myTexture, mySampler, vTexCoord);
} Comparison of Data Types The table below shows a comparison of the basic and matrix data types in GLSL and WGSL: Transitioning from GLSL to WGSL demonstrates a desire for stricter typing and explicit definition of data sizes, which can improve code readability and reduce the likelihood of errors. Structures The syntax for declaring structures has also changed: GLSL: struct Light {
  vec3 position;
  vec4 color;
  float attenuation;
  vec3 direction;
  float innerAngle;
  float angle;
  float range;
}; WGSL: struct Light {
  position: vec3<f32>,
  color: vec4<f32>,
  attenuation: f32,
  direction: vec3<f32>,
  innerAngle: f32,
  angle: f32,
  range: f32,
}; Introducing explicit syntax for declaring fields in WGSL structures emphasizes the desire for greater clarity and simplifies understanding of data structures in shaders. Function Declarations : GLSL float saturate(float x) {
	return clamp(x, 0.0, 1.0);
} : WGSL fn saturate(x: f32) -> f32 {
  return clamp(x, 0.0, 1.0);
} Changing the syntax of functions in WGSL reflects the unification of the approach to declarations and return values, making the code more consistent and predictable. Built-in functions In WGSL, many built-in GLSL functions have been renamed or replaced. For example: Renaming built-in functions in WGSL not only simplifies their names, but also makes them more intuitive, which can facilitate the transition process for developers familiar with other graphics APIs. Shader Conversion For those who are planning to convert their projects from WebGL to WebGPU, it's important to know that there are tools for automatically converting GLSL to WGSL, such as **[Naga](https://github.com/gfx-rs/naga/)**, which is a Rust library for converting GLSL to WGSL. It can even work right in your browser with the help of WebAssembly. Here are Naga supported end-points: Convention Differences Textures After migration, you may encounter a surprise in the form of flipped images. Those who have ever ported applications from OpenGL to Direct3D (or vice versa) have already faced this classic problem. In the context of OpenGL and WebGL, textures are usually loaded in such a way that the starting pixel corresponds to the bottom left corner. However, in practice, many developers load images starting from the top left corner, which leads to the flipped image error. Nevertheless, this error can be compensated by other factors, ultimately leveling out the problem. Unlike OpenGL, systems such as Direct3D and Metal traditionally use the upper-left corner as the starting point for textures. Considering that this approach seems to be the most intuitive for many developers, the creators of WebGPU decided to follow this practice. Viewport Space If your WebGL code selects pixels from the frame buffer, be prepared for the fact that WebGPU uses a different coordinate system. You may need to apply a simple "y = 1.0 - y" operation to correct the coordinates. Clip Spaces When a developer faces a problem where objects are clipped or disappear earlier than expected, this is often related to differences in the depth domain. There's a difference between WebGL and WebGPU in how they define the depth range of the clip space. While WebGL uses a range from -1 to 1, WebGPU uses a range from 0 to 1, similar to other graphics APIs such as Direct3D, Metal, and Vulkan. This decision was made due to several advantages of using a range from 0 to 1 that were identified while working with other graphics APIs. The main responsibility for transforming your model's positions into clip space lies with the projection matrix. The simplest way to adapt your code is to ensure that your projection matrix outputs results in the range of 0 to 1. For those using libraries such as gl-matrix, there is a simple solution: instead of using the function, you can use ; similar functions are available for other matrix operations. perspective perspectiveZO if (webGPU) {
	// Creates a matrix for a symetric perspective-view frustum
  // using left-handed coordinates
  mat4.perspectiveZO(out, Math.PI / 4, ...);
} else {
  // Creates a matrix for a symetric perspective-view frustum
  // based on the default handedness and default near
  // and far clip planes definition.
  mat4.perspective(out, Math.PI / 4, …);
} However, sometimes you may have an existing projection matrix and you can't change its source. In this case, to transform it into a range from 0 to 1, you can pre-multiply your projection matrix by another matrix that corrects the depth range. WebGPU Tips & Tricks Now, let's discuss some tips and tricks for working with WebGPU. Minimize the number of pipelines you use. The more pipelines you use, the more state switching you have, and the less performance; this may not be trivial, depending on where your assets come from. Create pipelines in advance Creating a pipeline and using it immediately may work, but this is not recommended. Instead, create functions that return immediately and start working on a different thread. When you use the pipeline, the execution queue needs to wait for pending pipeline creations to finish. This can result in significant performance issues. To avoid this, make sure to leave some time between creating the pipeline and first using it. Or, even better, use the variants! The promise resolves when the pipeline is ready to use, without any stalling. create*PipelineAsync device.createComputePipelineAsync({
 compute: {
   module: shaderModule,
   entryPoint: 'computeMain'
 }
}).then((pipeline) => {
  const commandEncoder = device.createCommandEncoder();
  const passEncoder = commandEncoder.beginComputePass();
  passEncoder.setPipeline(pipeline);
  passEncoder.setBindGroup(0, bindGroup);
  passEncoder.dispatchWorkgroups(128);
  passEncoder.end();
  device.queue.submit([commandEncoder.finish()]);
}); Use RenderBundles Render bundles are pre-recorded, partial, reusable render passes. They can contain most rendering commands (except for things like setting the viewport) and can be "replayed" as part of an actual render pass later on. const renderPass = encoder.beginRenderPass(descriptor);

renderPass.setPipeline(renderPipeline);
renderPass.draw(3);

renderPass.executeBundles([renderBundle]);

renderPass.setPipeline(renderPipeline);
renderPass.draw(3);

renderPass.end(); Render bundles can be executed alongside regular render pass commands. The render pass state is reset to defaults before and after every bundle execution. This is primarily done to reduce the JavaScript overhead of drawing. GPU performance remains the same regardless of the approach. Summary Transitioning to WebGPU means more than just switching graphics APIs. It's also a step towards the future of web graphics, combining successful features and practices from various graphics APIs. This migration requires a thorough understanding of technical and philosophical changes, but the benefits are significant. Useful Resources & Links: WebGPU — All of the cores, none of the canvas From WebGL to WebGPU in Construct by Alain Galvan Raw WebGPU tutorial by Brandon Jones WebGPU Best Practices WebGL + WebGPU Meetup - July 2023 Link

Migrating from WebGL to WebGPU

WebGL থেকে WebGPU-তে স্থানান্তরিত হচ্ছে

Migration von WebGL zu WebGPU

Migrando de WebGL a WebGPU

Migration de WebGL vers WebGPU

WebGL से WebGPU पर माइग्रेट किया जा रहा है

BGR

bgr.com

1-10 employees

Since 2006

COMPANY RANKING

BGR

EVERGREEN INDEX #4181

Representing this company? Click here to claim and customize this page!

BGR WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

BGR