Skip to content

Commit

Permalink
docs(readme): add Model usage
Browse files Browse the repository at this point in the history
  • Loading branch information
junwei.gu committed Jul 9, 2023
1 parent 6e7bad8 commit b6beae8
Showing 1 changed file with 100 additions and 95 deletions.
195 changes: 100 additions & 95 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

## Usage

```
<script type="module">
import {
Mesh,PerspectiveCamera,Scene,
Expand Down Expand Up @@ -65,53 +66,52 @@
};
init();
</script>
```

## Native

```

<script type="module">
import { Model, Context, Texture, RenderTarget, Attachment } from "webgpu-gengine-js";
import { mat4, vec3 } from "gl-matrix";
<script type="module">
import { Model, Context, Texture, RenderTarget, Attachment } from "webgpu-gengine-js";
import { mat4, vec3 } from "gl-matrix";
const init = async () => {
//init context
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 depthTexture = new Texture({
label: "resolveDepth",
size: { width, height, depth },
format: "depth24plus",
usage: GPUTextureUsage.RENDER_ATTACHMENT
});
const depthAttachment = new Attachment(1.0, { texture: depthTexture });
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 depthTexture = new Texture({
label: "resolveDepth",
size: { width, height, depth },
format: "depth24plus",
usage: GPUTextureUsage.RENDER_ATTACHMENT
});
const depthAttachment = new Attachment(1.0, { texture: depthTexture });
//fbo
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: `
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: `
@fragment
fn main(@location(0) fragPosition: vec4<f32>) -> @location(0) vec4<f32> {
return fragPosition;
}
`,
vert: `
vert: `
struct Uniforms {
modelViewProjectionMatrix : mat4x4<f32>,
}
Expand All @@ -128,67 +128,71 @@
return output;
}
`,
vertexBuffers: [
{
stepMode: "vertex",//optional
uid: "vertAttr",//must
attributes: {
position: { size: 4, value: positions },
color: { size: 4, value: colors },
}
}
],
uniformBuffers: [
{
type: "uniform",
uid: "systemMatrix",
uniforms: {
modelViewProjectionMatrix: {
type: "mat4",
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;
}
}
}
}
],
renderState: {
targets: [
{
format: presentationFormat
}
],
primitive: {
topology: "triangle-list",
cullMode: "back"
},
depthStencil: {
depthWriteEnabled: true,
depthCompare: "less",
format: "depth24plus"
}
},
count: 36,
instances: 1
});

function animate() {
requestAnimationFrame(animate);
const passEncoder = canvasRenderTarget.beginRenderPass(context.device);
model.render({ device: context.device, passEncoder });
canvasRenderTarget.endRenderPass();
}
animate();
};
init();
vertexBuffers: [
{
stepMode: "vertex",//optional
uid: "vertAttr",//must
attributes: {
position: { size: 4, value: positions },
color: { size: 4, value: colors },
}
}
],
uniformBuffers: [
{
type: "uniform",
uid: "systemMatrix",
uniforms: {
modelViewProjectionMatrix: {
type: "mat4",
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;
}
}
}
}
],
renderState: {
targets: [
{
format: presentationFormat
}
],
primitive: {
topology: "triangle-list",
cullMode: "back"
},
depthStencil: {
depthWriteEnabled: true,
depthCompare: "less",
format: "depth24plus"
}
},
count: 36,
instances: 1
});

function animate() {
requestAnimationFrame(animate);
const passEncoder = canvasRenderTarget.beginRenderPass(context.device);
model.render({ device: context.device, passEncoder });
canvasRenderTarget.endRenderPass();
}
animate();
};
init();
</script>

<script type="module">

</script>

```
```
## feature
Expand Down Expand Up @@ -226,3 +230,4 @@
2. Complete core glTF 2.0
3. Text and Sprite
4. Pick
```

0 comments on commit b6beae8

Please sign in to comment.