Open bryanrideshark opened 4 years ago
ryanhamley
commented
4 years ago 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.
adnanwahab
commented
1 year ago 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
Lilac-Orange
commented
1 year ago Me also waiting for the webgpu
codingmiao
commented
1 year ago Chrome will officially enable WebGPU in version 113 in three weeks. Is there a latest plan to support WebGPU?
ruofeng618
commented
1 year ago 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>
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?