Wow, you mentioned multiplayer and now I realized I'd love to see your take on websockets and p2p netcode. Simple, just the basics, no big external libraries...
1:33:35 There’s no reason to be afraid of many function arguments except for readability. Many compiled languages pass structs by value via splatting the struct members out into individual parameters behind the scenes.
The way we render the scene makes it irrelevant actually. We render pixel by pixel into a separate ImageData and then just slap that ImageData onto the 2D canvas. Sure the "slap" part is probably hardware accelerated, but the rest of the 90% of the work is not.
Depends on whether you want to call it "rendering" or not. I personally do not see any problems in calling this process "rendering" because literally the same process of raycasting and assembling pixels was called "rendering" in the past. I don't see any reasons to not use the same word today for the same process but in a modern browser.
@@ivanjermakovyeah, it is a problem that is will increase to become slower the bigger the user resolution is. Since each width of pixels makes a new bar of height pixels. Not sure if he has it capped in this case I don't believe he's implemented an algorithm for drawing pixels keeping unchanged yet
Sorry I’m late to this conversation but it’s likely that the browser canvas API can copy ImageDatas into the canvas on the GPU very fast using a blit compute shader pass, but that’s not really “acceletating” this rendering engine beyond what would have been possible in the 90s (except for raw CPU speed) because back in those days a game would have just written pixels directly to the display buffer and there would be no need to blit it onto a separate canvas (and then into the window buffer, display buffer etc etc).
Apparently there's a "Limit Capture Framerate" setting in OBS. Maybe it hurts your performance if it's turned on. But then again I have no idea what will happen to your streaming framerate or a/v sync if you turned it off xD
I thought you were going to optimize this game since the fps count was low.(While streaming) I quickly opened the end of the video and saw '20 fps' part again... Turns out it was your hardware. Okay. I've just watched the whole video and you mentioned FPS counter is not working correctly or not giving real numbers it supposed to give. I think the way you calculate FPS is correct, but I dunno where do you think you found a flaw for it. I tried opening the game in my machine and it works fantastically well for me. Thank you for the videos you make, it was interesting seeing profiler used on a pure js game.
In JS constructors are functions and can be passed around as value: Example: ``` const createPool = (klass: { new(...args: Args): T }, ...args: Args): Pool => ({ items: [], length: 0, klass, // default arguments, i.e. allocPool(RGBA, 255, 0, 0, 255) would always create pixels initialised to 0xff0000ff args, }); const allocPool = (pool: Pool): T => { .... const instance = new pool.klass(...pool.args); .... }; createPool(Vector2); ```
ow ma gaaawd, even though they are pool allocated youre creating so much garbage in the pool itself haha, for example allocating in loops even though the object will die before next iteration. smh my head azozin
I think you need to define an interface with the types (including null or undefined), check this out: interface MyTypes { image: number | undefined garbage: number | null woot: number } const poolboi: MyTypes = { image: undefined, garbage: null, woot: 777 }
Garbage collector is the worst idea ever. It's slow, complicated, unpredictable and doesn't even prevent most of the memory leaks. It creates more problems than it solves
@@lengors7327 in theory you could write an entire rendering system in TS in Node.js, an environment that doesn't include the entire browser functions, then use IPC to stream rendered output in a WebGPU buffer that will render the pixels in a canvas. By doing so, you are using the same engine for all browser, meaning that you get the same performance. You could even add shaders which could increase a lot the rendering performance.
Oh man, using `Object.assign(Object.create(Object.getPrototypeOf(init)), pool.init)` to create clones is very wrong. This just gets the prototype, makes a new object of the static prototype, and then assigns to the prototype, which means it assigns to the prototype of Object, which would be global if not a funct construct. Very bad. Should be using `Object.assign(new Reflect.getPrototypeOf(init), pool.init)` for use-case.
@@miko007??? Who told you this loool, and why does it matter?? I can assure you while true does work, but you need to break the loop or it probably will crash. Still works just fine properly used Not sure how that relates to Reflect API but you do you
I don't understand what you talking about, isn't Object.getPrototypeOf and Reflect.getPrototypeOf basically the same 'The only difference with Object.getPrototypeOf() is how non-object targets are handled.'? And how are you using 'new' with Reflect.getPrototypeOf? TypeError: Reflect.getPrototypeOf is not a constructor. I'm not that experienced with JS though!
а теперь откопайте старый ie, там директ-икс напрямую браузером поддерживается, но естественно через майкрософтовский active-x и фильтры, и не парьте мозги, в ie всё работало 20 лет назад без никому не нужных свистопирделок типа бесполезных блазоров и прочей нынешней глючной забагованной тормозной трышнины
для тех кто не понял, всё что сделано зозиным - ранее делалось в 150 строчек кода, но через active-x и фильтры, и работало оно на древних видеокартах (200мгц 64озу) и древних процах (1ггц, 128озу) и запросто выдавало мноооого фпс-ов, оно же работало напрямую на директ-иксе, это вменяемый майкрософт который смог, а вы - нет
Ну-у-у, ты сейчас в целом можешь и WebGPU использовать, который по факту является прослойкой над Metal\Vulkan\DirectX. API в целом хорошее и не нагруженное, по крайней мере, оно приятней чем OpenGL... Ну а блейзер, да, рак тот ещё как не посуди, который ещё и свой рантайм тащит
![🔴 ฟุตบอลแชมป์กีฬา 7HD แชมเปียน คัพ 2024 [รอบ 8 ทีมสุดท้าย] - ช่วงบ่าย](http://i.ytimg.com/vi/M0S_ReCIkxg/mqdefault.jpg)
Mista Azozing
Traditionel Russian Sosig by Mista Azozing
Your laptop is dying, your mouse is dying, your earphones is dying, are you ok a Mr. a Zozin?
More streaming dollars needed for new pc
"At the time.of implementing I didn't really know any better." Story of my life.😂😂😂
Despite my hatred of JavaScript, I must admit that your content is very enjoyable.
Maybe it helps that his programming style is very much like his C style. Nevertheless it may prove his point that language ≠ programming.
How cool
If you’re a newer viewer. Rest assured, as his content is mostly C programming
@@psteven5 thank you friend. By the way, I am not new viewer. I love his every video. I don’t watch his streams but I always watch his TH-cam video.
TypeScript is cool
Rawdogging a 2D canvas in Javascript is crazy
Wow, you mentioned multiplayer and now I realized I'd love to see your take on websockets and p2p netcode. Simple, just the basics, no big external libraries...
Can someone give this man a new computer?
No. If we gave everyone new computers we end up with more electron apps
abundance is the killer of art
I think he enjoys having a slow computer
@@yes-ni1odBased
slow computer forces him to create efficient programs
I think I need to make it a daily routine to watch one of your videos every morning before work, it is inspiring.
Best way to get max performance from JS is to not use it.
1:33:35 There’s no reason to be afraid of many function arguments except for readability. Many compiled languages pass structs by value via splatting the struct members out into individual parameters behind the scenes.
1:22:03 I love how you run from the bomb out of instinct before it explodes 😂 There's no damage brah, you didn't implement that yet 😊
'writing code, not a poem' damn, my man ain't playing
1:10 I'm pretty sure both Chrome and FF use hardware acceleration for their 2D canvas API.
The way we render the scene makes it irrelevant actually. We render pixel by pixel into a separate ImageData and then just slap that ImageData onto the 2D canvas. Sure the "slap" part is probably hardware accelerated, but the rest of the 90% of the work is not.
@@TsodingDaily I guess the slow part is actually assembling buffer pixel by pixel, not actual rendering
Depends on whether you want to call it "rendering" or not. I personally do not see any problems in calling this process "rendering" because literally the same process of raycasting and assembling pixels was called "rendering" in the past. I don't see any reasons to not use the same word today for the same process but in a modern browser.
@@ivanjermakovyeah, it is a problem that is will increase to become slower the bigger the user resolution is. Since each width of pixels makes a new bar of height pixels. Not sure if he has it capped in this case
I don't believe he's implemented an algorithm for drawing pixels keeping unchanged yet
Sorry I’m late to this conversation but it’s likely that the browser canvas API can copy ImageDatas into the canvas on the GPU very fast using a blit compute shader pass, but that’s not really “acceletating” this rendering engine beyond what would have been possible in the 90s (except for raw CPU speed) because back in those days a game would have just written pixels directly to the display buffer and there would be no need to blit it onto a separate canvas (and then into the window buffer, display buffer etc etc).
Apparently there's a "Limit Capture Framerate" setting in OBS. Maybe it hurts your performance if it's turned on. But then again I have no idea what will happen to your streaming framerate or a/v sync if you turned it off xD
Why not just memoization or using WeakSet or WeakMap for vector caching?
That's what I was thinking too
both set and map use hashing which is pretty slow
@@mykytasmirnov220 I don't think he has any experience in many of the JS APIs that come bundled on both ends.
@@BRO-sr1vj ah, good point
Great session. How about implementing spatial audio with Web Audio API?
the coding style in Cesium js
this runs at consistent 144 fps on my computer. holy fuck this is amazing
I thought you were going to optimize this game since the fps count was low.(While streaming) I quickly opened the end of the video and saw '20 fps' part again... Turns out it was your hardware.
Okay. I've just watched the whole video and you mentioned FPS counter is not working correctly or not giving real numbers it supposed to give. I think the way you calculate FPS is correct, but I dunno where do you think you found a flaw for it.
I tried opening the game in my machine and it works fantastically well for me.
Thank you for the videos you make, it was interesting seeing profiler used on a pure js game.
Request for next video topic?: Squirrel programming language
That would be nuts
In JS constructors are functions and can be passed around as value:
Example:
```
const createPool = (klass: { new(...args: Args): T }, ...args: Args): Pool => ({
items: [],
length: 0,
klass,
// default arguments, i.e. allocPool(RGBA, 255, 0, 0, 255) would always create pixels initialised to 0xff0000ff
args,
});
const allocPool = (pool: Pool): T => {
....
const instance = new pool.klass(...pool.args);
....
};
createPool(Vector2);
```
ow ma gaaawd, even though they are pool allocated youre creating so much garbage in the pool itself haha, for example allocating in loops even though the object will die before next iteration. smh my head azozin
also just a thought i had, doing it this way may negatively affect jit compiler's liveness analysis
at least your porn folder is bigger than storage on their m1 macs :D
Do you think it's possible to use 3D models instead of 2D images? For example, replacing your wall image with a 3D wall without WebGL/WebGPU?
I think you need to define an interface with the types (including null or undefined), check this out:
interface MyTypes {
image: number | undefined
garbage: number | null
woot: number
}
const poolboi: MyTypes = {
image: undefined,
garbage: null,
woot: 777
}
By the way, have you seen Bisqwit's video on Doom-style 3d engine in C?
let's eat ram like chrome does
your game si amazing I am impressed by your skill
Garbage collector is the worst idea ever. It's slow, complicated, unpredictable and doesn't even prevent most of the memory leaks. It creates more problems than it solves
Thats problem of developers that they dont handle async operation properly,
How do you expect language to be easy as well as fast at the same time?
@@Rubyd777 reference counting?
this dude is insane🎉
Would it be faster to “render” the whole screen in Node.js, then stream it in the browser and display it? I’m thinking of Electron style ipc.
At that point you could just do it in c :)
probably, but he is aiming to keep the project simple :)
I doubt it. Why would nodejs be faster?
@@lengors7327 in theory you could write an entire rendering system in TS in Node.js, an environment that doesn't include the entire browser functions, then use IPC to stream rendered output in a WebGPU buffer that will render the pixels in a canvas. By doing so, you are using the same engine for all browser, meaning that you get the same performance. You could even add shaders which could increase a lot the rendering performance.
Don't you like to do some Pharo Smalltalk programming sometime?
На ещё один шаг ближе к ECS
next up, radiance cascades?
Run at 360 FPS on my pc ^^ btw this project is really interesting !
could the GPU data bus be the bottleneck maybe?
Oh man, using `Object.assign(Object.create(Object.getPrototypeOf(init)), pool.init)` to create clones is very wrong.
This just gets the prototype, makes a new object of the static prototype, and then assigns to the prototype, which means it assigns to the prototype of Object, which would be global if not a funct construct.
Very bad.
Should be using `Object.assign(new Reflect.getPrototypeOf(init), pool.init)` for use-case.
Also, the game could be dramatically improved by switching to DeltaTime paradigm, just counting time since last frame to run game instead.
@@Seedwreckno idea what you really mean by that, but you can not just `while(true)` in the browser.
@@miko007???
Who told you this loool, and why does it matter??
I can assure you while true does work, but you need to break the loop or it probably will crash. Still works just fine properly used
Not sure how that relates to Reflect API but you do you
@@Seedwreck the browser told me this. a "forever loop" will hang the render process and the browser will abort the script after about 30 seconds.
I don't understand what you talking about, isn't Object.getPrototypeOf and Reflect.getPrototypeOf basically the same 'The only difference with Object.getPrototypeOf() is how non-object targets are handled.'? And how are you using 'new' with Reflect.getPrototypeOf? TypeError: Reflect.getPrototypeOf is not a constructor. I'm not that experienced with JS though!
Malloc in JavaScript? Memory leaks?
the answer is yes
Just buy more RAM
My man saying "it's not hardware accelerated" like it's not already obvious lmao! Jk bruv, love you ❤
Make your own os (or you can't do that?)
pool version 2
Someone get this guy a new Meteor Lake Laptop 💻
1st
а теперь откопайте старый ie, там директ-икс напрямую браузером поддерживается, но естественно через майкрософтовский active-x и фильтры, и не парьте мозги, в ie всё работало 20 лет назад без никому не нужных свистопирделок типа бесполезных блазоров и прочей нынешней глючной забагованной тормозной трышнины
для тех кто не понял, всё что сделано зозиным - ранее делалось в 150 строчек кода, но через active-x и фильтры, и работало оно на древних видеокартах (200мгц 64озу) и древних процах (1ггц, 128озу) и запросто выдавало мноооого фпс-ов, оно же работало напрямую на директ-иксе, это вменяемый майкрософт который смог, а вы - нет
@@AEF23C20и единственная страница, которая все это поддерживала - справочник 😂😂😂
Ну-у-у, ты сейчас в целом можешь и WebGPU использовать, который по факту является прослойкой над Metal\Vulkan\DirectX. API в целом хорошее и не нагруженное, по крайней мере, оно приятней чем OpenGL... Ну а блейзер, да, рак тот ещё как не посуди, который ещё и свой рантайм тащит