Squeezing Max Performance out of JavaScript
Vložit
- čas přidán 8. 07. 2024
- Streamed Live on Twitch: / tsoding
Enable Subtitles for Twitch Chat
More Episodes: • Raycasting in TypeScript
References:
- github.com/tsoding/raycasting
- tsoding.github.io/raycasting/
Support:
- BTC: bc1qj820dmeazpeq5pjn89mlh9lhws7ghs9v34x9v9
- Pay for my VPS: zap-hosting.com/en/shop/donat... - Věda a technologie
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
Mista Azozing
"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 CZcams video.
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
Rawdogging a 2D canvas in Javascript is crazy
at least your porn folder is bigger than storage on their m1 macs :D
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...
Great session. How about implementing spatial audio with Web Audio API?
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?
By the way, have you seen Bisqwit's video on Doom-style 3d engine in C?
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
the coding style in Cesium js
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
this dude is insane🎉
this runs at consistent 144 fps on my computer. holy fuck this is amazing
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
Request for next video topic?: Squirrel programming language
That would be nuts
My man saying "it's not hardware accelerated" like it's not already obvious lmao! Jk bruv, love you ❤
your game si amazing I am impressed by your skill
next up, radiance cascades?
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
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 😊
Don't you like to do some Pharo Smalltalk programming sometime?
let's eat ram like chrome does
На ещё один шаг ближе к ECS
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.
Run at 360 FPS on my pc ^^ btw this project is really interesting !
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.
could the GPU data bus be the bottleneck maybe?
Make your own os (or you can't do that?)
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?
pool version 2
Best way to get max performance from JS is to not use it.
Malloc in JavaScript? Memory leaks?
the answer is yes
Just buy more RAM
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!
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... Ну а блейзер, да, рак тот ещё как не посуди, который ещё и свой рантайм тащит