mapbox-gl-js
mapbox-gl-js copied to clipboard
mapbox
WebGPU support?
Question
With major browsers introducing WebGPU, is it possible for Mapbox Gl js to take advantage of this, improving performance for browsers which support it?
We are keeping a close eye on the progress of WebGPU. At this point in time, it's still too new and experimental for us to invest the resources into making the library support it. There's no timeline for us to support it but it's something we are interested in longer term.
hi is this still a thing? api is coming out in 3 months. i need to use this for a project asap because webgl is too slow on 100% of computers combined
Chrome will officially enable WebGPU in version 113 in three weeks. Is there a latest plan to support WebGPU?
You can pay attention to GEngine, the engine provides a Model class that can be used for mapbox rendering encapsulation example:
<script type="module">
import { Model, Context, Texture, RenderTarget, Attachment, Sampler } from "../../dist/index.js";
import { mat4, vec3 } from "../lib/esm/index.js";
import { cubeVertexArray, cubeVertexCount, uvs, colors, positions } from "../asset/cude.js";
const init = async () => {
const context = new Context({
canvas: null,
container: document.getElementById("app"),
pixelRatio: 1
});
const { canvas, presentationFormat } = context;
await context.init();
const { width, height, depth } = context.presentationSize;
const colorAttachment = new Attachment(
{ r: 0.0, g: 0.0, b: 0.0, a: 0 },
{
textureView: () => {
return context.context.getCurrentTexture().createView();
}
}
);
const response = await fetch(new URL("../textures/Di-3d.png", import.meta.url).toString());
const imageBitmap = await createImageBitmap(await response.blob());
const depthTexture = new Texture({
label: "resolveDepth",
size: { width, height, depth },
format: "depth24plus",
usage: GPUTextureUsage.RENDER_ATTACHMENT
});
const texture = new Texture({
size: {
width: imageBitmap.width,
height: imageBitmap.height,
depth: 1
},
format: "rgba8unorm",
usage:
GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
data: {
source: imageBitmap,
width: imageBitmap.width,
height: imageBitmap.height
}
});
const sampler = new Sampler({
magFilter: "linear",
minFilter: "linear"
// addressModeU: "repeat",
// addressModeV: "repeat"
});
const depthAttachment = new Attachment(1.0, { texture: depthTexture });
const canvasRenderTarget = new RenderTarget("render", [colorAttachment], depthAttachment);
const aspect = canvas.width / canvas.height;
const projectionMatrix = mat4.perspective([], (2 * Math.PI) / 5, aspect, 1, 100.0);
const modelViewProjectionMatrix = mat4.create();
const model = new Model({
shaderId: "model",
frag: `
@group(0) @binding(2) var mySampler: sampler;
@group(0) @binding(1) var myTexture: texture_2d<f32>;
@fragment
fn main(
@location(0) fragUV: vec2<f32>,
@location(1) fragPosition: vec4<f32>
) -> @location(0) vec4<f32> {
return textureSample(myTexture, mySampler, fragUV) * fragPosition;
}
`,
vert: `
struct Uniforms {
modelViewProjectionMatrix : mat4x4<f32>,
}
@binding(0) @group(0) var<uniform> uniforms : Uniforms;
struct VertexOutput {
@builtin(position) Position : vec4<f32>,
@location(0) fragUV : vec2<f32>,
@location(1) fragPosition: vec4<f32>,
}
@vertex
fn main(
@location(0) position : vec4<f32>,
@location(1) color : vec4<f32>,
@location(2) uv : vec2<f32>
) -> VertexOutput {
var output : VertexOutput;
output.Position = uniforms.modelViewProjectionMatrix * position;
output.fragUV = uv;
output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));
return output;
}
`,
vertexBuffers: [
{
stepMode: "vertex",
uid: "vertAttr",
attributes: {
interleaved: {
names: ["position", "color", "uv"],
value: cubeVertexArray,
itemSizes: [4, 4, 2]
} //interleaved buffer
}
}
],
uniformBuffers: [
{
type: "uniform",
uid: "systemMatrix",
uniforms: {
modelViewProjectionMatrix: {
type: "mat4x4<f32>",
value: () => {
let viewMatrix = mat4.identity([]);
mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, 0, -4));
const now = Date.now() / 1000;
mat4.rotate(
viewMatrix,
viewMatrix,
1,
vec3.fromValues(Math.sin(now), Math.cos(now), 0)
);
mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
return modelViewProjectionMatrix;
}
}
}
}
],
uniformTextureAndSampler: {
myTexture: { type: "texture", value: texture },
mySampler: { type: "sampler", value: sampler }
},
renderState: {
targets: [
{
format: presentationFormat
}
],
primitive: {
topology: "triangle-list",
cullMode: "back"
},
depthStencil: {
depthWriteEnabled: true,
depthCompare: "less",
format: "depth24plus"
}
},
draw: {
count: 36,
instanceCount: 1
}
});
const model1 = new Model({
shaderId: "model",
frag: `
@group(0) @binding(2) var mySampler: sampler;
@group(0) @binding(1) var myTexture: texture_2d<f32>;
@fragment
fn main(
@location(0) fragUV: vec2<f32>,
@location(1) fragPosition: vec4<f32>
) -> @location(0) vec4<f32> {
return textureSample(myTexture, mySampler, fragUV) * fragPosition;
}
`,
vert: `
struct Uniforms {
modelViewProjectionMatrix : mat4x4<f32>,
}
@binding(0) @group(0) var<uniform> uniforms : Uniforms;
struct VertexOutput {
@builtin(position) Position : vec4<f32>,
@location(0) fragUV : vec2<f32>,
@location(1) fragPosition: vec4<f32>,
}
@vertex
fn main(
@location(0) position : vec4<f32>,
@location(1) color : vec4<f32>,
@location(2) uv : vec2<f32>
) -> VertexOutput {
var output : VertexOutput;
output.Position = uniforms.modelViewProjectionMatrix * position;
output.fragUV = uv;
output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));
return output;
}
`,
vertexBuffers: [
{
stepMode: "vertex",
uid: "vertAttr",
attributes: {
interleaved: {
names: ["position", "color", "uv"],
value: cubeVertexArray,
itemSizes: [4, 4, 2]
} //interleaved buffer
}
}
],
uniformBuffers: [
{
type: "uniform",
uid: "systemMatrix",
uniforms: {
modelViewProjectionMatrix: {
type: "mat4x4<f32>",
value: () => {
let viewMatrix = mat4.identity([]);
mat4.translate(viewMatrix, viewMatrix, vec3.fromValues(0, -4, -8));
const now = Date.now() / 1000;
mat4.rotate(
viewMatrix,
viewMatrix,
1,
vec3.fromValues(Math.sin(now), Math.cos(now), 0)
);
mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
return modelViewProjectionMatrix;
}
}
}
}
],
uniformTextureAndSampler: {
myTexture: { type: "texture", value: texture },
mySampler: { type: "sampler", value: sampler }
},
renderState: {
targets: [
{
format: presentationFormat
}
],
primitive: {
topology: "triangle-list",
cullMode: "back"
},
depthStencil: {
depthWriteEnabled: true,
depthCompare: "less",
format: "depth24plus"
}
},
draw: {
count: 36,
instanceCount: 1
}
});
function animate() {
requestAnimationFrame(animate);
const passEncoder = canvasRenderTarget.beginRenderPass(context.device);
model.render({ device: context.device, passEncoder });
model1.render({ device: context.device, passEncoder });
canvasRenderTarget.endRenderPass();
}
animate();
};
init();
</script>
