Skip to content

Commit cb9142f

Browse files
DaLae37DaLae37
committed
Moving Sprite Example
1 parent 3bc7138 commit cb9142f

File tree

11 files changed

+516
-48
lines changed

11 files changed

+516
-48
lines changed

‎Framework/JavaScript/Camera.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1-
class Camera {
2-
1+
import {Vector4} from "./Tool.js"
2+
3+
export class Camera {
4+
constructor(isMainCamera = False){
5+
this.mainCamera = isMainCamera;
6+
7+
this.eye = 0;
8+
this.at = 0;
9+
this.up = 0;
10+
11+
this.forward = new Vector4();
12+
this.right = new Vector4();
13+
14+
this.fieldOfView = 0;
15+
}
316
}

‎Framework/JavaScript/Cube.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { Object, ObjectManager } from "./Object.js";
2+
import { canvas, device, shaderModule } from "./Core.js";
3+
4+
export class Cube extends Object {
5+
constructor(src, spriteName = "null") {
6+
super(spriteName);
7+
8+
this.image = null;
9+
this.texture = null;
10+
this.width = null;
11+
this.height = null;
12+
13+
this.src = src;
14+
15+
this.SetResource(src);
16+
}
17+
18+
Update(deltaTime) {
19+
super.Update(deltaTime);
20+
21+
let uniformValues = new Float32Array(this.uniformBufferSize / 4);
22+
23+
uniformValues.set([this.transform.position.x, this.transform.position.y], 0);
24+
uniformValues.set([this.transform.scale.x, this.transform.scale.y], 2);
25+
uniformValues.set([1, 1, 1, 1], 4);
26+
device.getDevice().queue.writeBuffer(this.uniformBuffer, 0, uniformValues);
27+
}
28+
29+
Render(deltaTime) {
30+
super.Render(deltaTime);
31+
32+
this.renderPassDescriptor.colorAttachments[0].view = device.getContext().getCurrentTexture().createView();
33+
34+
let encoder = device.getDevice().createCommandEncoder({ label: "sprite encoder" });
35+
let pass = encoder.beginRenderPass(this.renderPassDescriptor);
36+
pass.setPipeline(this.pipeline);
37+
pass.setBindGroup(0, this.group[0]);
38+
pass.draw(6, 1, 0 ,0);
39+
pass.end();
40+
41+
let commandBuffer = encoder.finish();
42+
device.getDevice().queue.submit([commandBuffer]);
43+
}
44+
45+
SetRender() {
46+
super.SetRender();
47+
48+
this.module = shaderModule.UseModule("texture");
49+
this.pipeline = device.getDevice().createRenderPipeline({
50+
label: "sprite",
51+
layout: "auto",
52+
vertex: {
53+
module: this.module,
54+
},
55+
fragment: {
56+
module: this.module,
57+
targets: [{ format: device.presentationFormat }],
58+
},
59+
});
60+
61+
this.uniformBufferSize =
62+
2 * 4 + //translate
63+
2 * 4 + //scale
64+
4 * 4; //color
65+
this.uniformBuffer = device.getDevice().createBuffer({
66+
label: "texture",
67+
size: this.uniformBufferSize,
68+
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
69+
});
70+
71+
for (let i = 0; i < 8; ++i) {
72+
this.sampler = device.getDevice().createSampler({
73+
addressModeU: (i & 1) ? "repeat" : "clamp-to-edge",
74+
addressModeV: (i & 2) ? "repeat" : "clamp-to-edge",
75+
magFilter: (i & 4) ? "linear" : "nearest",
76+
});
77+
78+
let binding = device.getDevice().createBindGroup({
79+
layout: this.pipeline.getBindGroupLayout(0),
80+
entries: [
81+
{ binding: 0, resource: this.sampler },
82+
{ binding: 1, resource: this.texture.createView() },
83+
{ binding: 2, resource: { buffer: this.uniformBuffer } }
84+
],
85+
});
86+
this.group.push(binding);
87+
}
88+
89+
this.renderPassDescriptor = {
90+
label: "texture",
91+
colorAttachments: [
92+
{
93+
clearValue: [0.3, 0.3, 0.3, 1],
94+
loadOp: "clear",
95+
storeOp: "store",
96+
},
97+
],
98+
};
99+
}
100+
101+
async SetResource(src) {
102+
super.SetResource();
103+
104+
this.image = await spriteManager.LoadImageToSrc(src);
105+
this.width = this.image.width;
106+
this.height = this.image.height;
107+
108+
this.texture = device.getDevice().createTexture({
109+
label: src,
110+
format: "rgba8unorm",
111+
size: [this.width, this.height],
112+
usage: GPUTextureUsage.TEXTURE_BINDING |
113+
GPUTextureUsage.COPY_DST |
114+
GPUTextureUsage.RENDER_ATTACHMENT,
115+
});
116+
device.getDevice().queue.copyExternalImageToTexture(
117+
{ source: this.image, flipY: true },
118+
{ texture: this.texture },
119+
{ width: this.width, height: this.height },
120+
);
121+
122+
this.SetRender();
123+
}
124+
125+
getSize() {
126+
return [this.width, this.height];
127+
}
128+
129+
setWidth(width) {
130+
this.width = width;
131+
}
132+
133+
setHeight(height) {
134+
this.height = height;
135+
}
136+
}

‎Framework/JavaScript/Engine.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { canvas, device, shaderModule } from "./Core.js"
22
import { sceneManager } from "./Scene.js";
3+
import { inputManager } from "./Input.js";
34

45
export class Engine {
56
constructor() {
@@ -23,8 +24,14 @@ export class Engine {
2324
sceneManager.ChangeScene(scene, scene.sceneName);
2425

2526
const mainLoop = setInterval(() => {
26-
sceneManager.UpdateScene(this.getDeltaTime());
27-
sceneManager.RenderScene(this.getDeltaTime());
27+
inputManager.UpdateKeyState();
28+
if(!sceneManager.currentScene.sceneLoading){
29+
sceneManager.LoadResource();
30+
}
31+
else {
32+
sceneManager.UpdateScene(this.getDeltaTime());
33+
sceneManager.RenderScene(this.getDeltaTime());
34+
}
2835
let quitMessage = sceneManager.CheckQuitMessage();
2936
if (quitMessage) {
3037
clearInterval(mainLoop);

‎Framework/JavaScript/Input.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
class InputManager {
2+
constructor() {
3+
this.beforeKeyState = {}; //Dictionary
4+
this.currentKeyState = {}; //Dictionary
5+
this.mouseState = false; // false : up, true : down
6+
this.Init();
7+
}
8+
9+
UpdateKeyState() {
10+
for(let key in this.currentKeyState){
11+
this.beforeKeyState[key] = this.currentKeyState[key];
12+
}
13+
}
14+
15+
Init() {
16+
for (let i = 0; i < 256; i++) {
17+
this.beforeKeyState[i] = false;
18+
this.currentKeyState[i] = false;
19+
}
20+
21+
document.addEventListener("keydown", (key) => {
22+
this.currentKeyState[key.code] = true;
23+
});
24+
25+
document.addEventListener("keyup", (key) => {
26+
this.currentKeyState[key.code] = false;
27+
});
28+
29+
document.addEventListener("mousedown", (mouse) => {
30+
this.mouseState = true;
31+
})
32+
33+
document.addEventListener("mouseup", (mouse) => {
34+
this.mouseState = false;
35+
})
36+
}
37+
38+
GetKeyDown(key) {
39+
if(key in this.currentKeyState) {
40+
return this.currentKeyState[key];
41+
}
42+
}
43+
44+
GetKeyUp(key) {
45+
if(key in this.currentKeyState) {
46+
return !this.currentKeyState[key];
47+
}
48+
}
49+
50+
GetKeyOn(key) {
51+
if(key in this.currentKeyState && key in this.beforeKeyState) {
52+
return (this.currentKeyState[key]) && (this.currentKeyState[key] == this.beforeKeyState[key]);
53+
}
54+
}
55+
56+
GetMouseDown(){
57+
return this.mouseState;
58+
}
59+
60+
GetMouseUp(){
61+
return !this.mouseState;
62+
}
63+
64+
GetMousePosition() {
65+
66+
}
67+
}
68+
69+
export const inputManager = new InputManager();

‎Framework/JavaScript/Mode.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { Object, ObjectManager } from "./Object.js";
2+
import { canvas, device, shaderModule } from "./Core.js";
3+
4+
export class Model extends Object {
5+
constructor(src, spriteName = "null") {
6+
super(spriteName);
7+
8+
this.image = null;
9+
this.texture = null;
10+
this.width = null;
11+
this.height = null;
12+
13+
this.src = src;
14+
15+
this.SetResource(src);
16+
}
17+
18+
Update(deltaTime) {
19+
super.Update(deltaTime);
20+
21+
let uniformValues = new Float32Array(this.uniformBufferSize / 4);
22+
23+
uniformValues.set([this.transform.position.x, this.transform.position.y], 0);
24+
uniformValues.set([this.transform.scale.x, this.transform.scale.y], 2);
25+
uniformValues.set([1, 1, 1, 1], 4);
26+
device.getDevice().queue.writeBuffer(this.uniformBuffer, 0, uniformValues);
27+
}
28+
29+
Render(deltaTime) {
30+
super.Render(deltaTime);
31+
32+
this.renderPassDescriptor.colorAttachments[0].view = device.getContext().getCurrentTexture().createView();
33+
34+
let encoder = device.getDevice().createCommandEncoder({ label: "sprite encoder" });
35+
let pass = encoder.beginRenderPass(this.renderPassDescriptor);
36+
pass.setPipeline(this.pipeline);
37+
pass.setBindGroup(0, this.group[0]);
38+
pass.draw(6, 1, 0 ,0);
39+
pass.end();
40+
41+
let commandBuffer = encoder.finish();
42+
device.getDevice().queue.submit([commandBuffer]);
43+
}
44+
45+
SetRender() {
46+
super.SetRender();
47+
48+
this.module = shaderModule.UseModule("texture");
49+
this.pipeline = device.getDevice().createRenderPipeline({
50+
label: "sprite",
51+
layout: "auto",
52+
vertex: {
53+
module: this.module,
54+
},
55+
fragment: {
56+
module: this.module,
57+
targets: [{ format: device.presentationFormat }],
58+
},
59+
});
60+
61+
this.uniformBufferSize =
62+
2 * 4 + //translate
63+
2 * 4 + //scale
64+
4 * 4; //color
65+
this.uniformBuffer = device.getDevice().createBuffer({
66+
label: "texture",
67+
size: this.uniformBufferSize,
68+
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
69+
});
70+
71+
for (let i = 0; i < 8; ++i) {
72+
this.sampler = device.getDevice().createSampler({
73+
addressModeU: (i & 1) ? "repeat" : "clamp-to-edge",
74+
addressModeV: (i & 2) ? "repeat" : "clamp-to-edge",
75+
magFilter: (i & 4) ? "linear" : "nearest",
76+
});
77+
78+
let binding = device.getDevice().createBindGroup({
79+
layout: this.pipeline.getBindGroupLayout(0),
80+
entries: [
81+
{ binding: 0, resource: this.sampler },
82+
{ binding: 1, resource: this.texture.createView() },
83+
{ binding: 2, resource: { buffer: this.uniformBuffer } }
84+
],
85+
});
86+
this.group.push(binding);
87+
}
88+
89+
this.renderPassDescriptor = {
90+
label: "texture",
91+
colorAttachments: [
92+
{
93+
clearValue: [0.3, 0.3, 0.3, 1],
94+
loadOp: "clear",
95+
storeOp: "store",
96+
},
97+
],
98+
};
99+
}
100+
101+
async SetResource(src) {
102+
super.SetResource();
103+
104+
this.image = await spriteManager.LoadImageToSrc(src);
105+
this.width = this.image.width;
106+
this.height = this.image.height;
107+
108+
this.texture = device.getDevice().createTexture({
109+
label: src,
110+
format: "rgba8unorm",
111+
size: [this.width, this.height],
112+
usage: GPUTextureUsage.TEXTURE_BINDING |
113+
GPUTextureUsage.COPY_DST |
114+
GPUTextureUsage.RENDER_ATTACHMENT,
115+
});
116+
device.getDevice().queue.copyExternalImageToTexture(
117+
{ source: this.image, flipY: true },
118+
{ texture: this.texture },
119+
{ width: this.width, height: this.height },
120+
);
121+
122+
this.SetRender();
123+
}
124+
125+
getSize() {
126+
return [this.width, this.height];
127+
}
128+
129+
setWidth(width) {
130+
this.width = width;
131+
}
132+
133+
setHeight(height) {
134+
this.height = height;
135+
}
136+
}

0 commit comments

Comments
 (0)