Secret to Fast JS Canvas

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
[seagullbommer] NotLikeThis [xvye] DOOM in 2024 [maxremzii] Faster than my internet [marcs77] marcs77 subscribed with Prime. They've subscribed for 7 months, currently on a 1 month streak! óptimize that shize! [xorxavier] lcolonMelon hello zozin [spectral_ray1] do you calculate a ray for every pixel? [zerg_creep] Ms Zozin hello [spectral_ray1] monkaMEGA giant spider [noelthink] recreating pdf viewer when? [maxremzii] YES! POOLS! [rustputin_] undefined is lurking [spectral_ray1] Amnesia [maxremzii] POOLS [iselgrey] aliasing lurking [mesmerrlive] !riir raycasting [mrbotka] raycasting has been rewritten in Rust [switchmeplease] Tsoding should try to work in Ubisoft to save their asses [rooctag] just do less... [voodoo51x] makes me feel like i'm watching a powerpoint presentation [i_only_know_tactics26] T ass [sinloehal] zdravstvuite [thepomidorkajr] what distro does he use& [tool_ateralus] debian i think [guywald] I would try to optimize in JS first, I would guess JS perf and the V8 JIT are sufficient for this and just some parts of the code (like the 1-pixel texture sampling) should be optimized [i_only_know_tactics26] NixOS [switchmeplease] Typescript is shit [horsemeat17] @thepomidorkajr debian im pretty sure [dfl0__] we can see how much of a performance boost turning everything to integer math would be [zennmystic] Debian [zxsap0] FPS counter when [switchmeplease] Tsoding recreates Doom [souji_code] tsodinJS [switchmeplease] rewrite DOOM in JS [maxremzii] SlopScript [honetick] sloppy squared [recursivechat] Javaslopt [alexandersupertramp29] rewrite in rust [maxremzii] WutFace WutFace WutFace WutFace WutFace [switchmeplease] rewrite DOOM [mesmerrlive] !riir C [mrbotka] C has been rewritten in Rust [iselgrey] so this project running in browser is forced? [cramblioni] tsoding giving us that javascript sloppy. [preocts] The heat is getting to him darkoLUL [tool_ateralus] !riir sloppy toppy [mrbotka] sloppy toppy has been rewritten in Rust [aineejames123] maybe add fps so we can see improvements? [last7310] will you add different floor textures per tile? [spectral_ray1] time to profile OhMyDog [straptoc] !ric does not exists btw [mrbotka] @straptoc command `ric` does not exist [guywald] There’s a good profiler in the dev tools BTW [themelopeus] @stamped10 you need to subscribe on twitch and link your account to discord to write to discord server [i_only_know_tactics26] That's literally 1FPS [badphysicsteacher] Fps counter to see how much it is improving? [nobodyspecial5678] if you rendered the minimap, would it be overwritten by the other rendering functions? [zerg_creep] @MrBotka Yo , I have a little art thing(tsoding related) , can I share link ? [codecat69] draw rectangles? [spectral_ray1] squares [chick__chicky] Squares kekew [hinczykgra] squares? [dfl0__] duplicate rectangles Kappa [maxremzii] Interesting [paynzin] is the ideia only use cpu rendering? [arbitraryicosahedron] What is 2 + 2, and don't say 4! [meadiode] with vector squares? [zerg_creep] https://imgur.com/a/hjccrFX pixel art Tsoding (sorry) [maxremzii] SeemsGood SeemsGood SeemsGood SeemsGood SeemsGood SeemsGood SeemsGood SeemsGood SeemsGood [xvye] Seams like a slow process KEKW [rkundra] ah poor peoples 3d [maxremzii] LUL LUL LUL [imran2part] so we need to zoom in to design it [meadiode] top tier trolling [dfl0__] change fill color for every pixel individually [cephon_altera] make normal art and export as 32x32 [spectral_ray1] this is like doing nails with a iphone [rkundra] I heard stroke [spectral_ray1] no buffers D: [mesmerrlive] poggers [dfl0__] the difference is one click to place color vs manually choosing a color for fill [last7310] @cephon_altera that's how I make textures lol, draw them kinda sloppily but looking fine-ish in a rather high res, then downscale and looks perfect [cephon_altera] @last7310 UFO video method [dfl0__] can you create an entire image data for the pixels of the floor? [tsoding] https://tsoding.github.io/olive.c/ [spectral_ray1] aboba [dfl0__] kind of like a frame buffer? [hundred123] aboba [nickely] booba [skul_d] aboba [mesmerrlive] aboba [iselgrey] adoba [developland] developland converted from a Prime sub to a Tier 1 sub! [tobbelol] aboba [layonme64] abooba [xvye] Did not follow the project from the start, but caching the textures could be a huge optimization [lomon12] Абоба [spectral_ray1] 🅰️🅱️🅾️🅱️🅰️ [jxyztplk] lol [dfl0__] are you implementing a frame buffer in a way? [potatoscience] mr boombastic, mr boba adoba [spectral_ray1] i did the same with sdl. draw every pixel with draw rect LUL before knowing buffers [patrikomg] Can you measure the fps in js ?? [thats_cosmos_moon] Had you considered using OffScreenCanvas? [spectral_ray1] @Patrikomg impossible :( [dfl0__] typescript so safe Kappa [mohad12211] yeah they still release patches for the type inference [nkemdilim] Nkemdilim subscribed at Tier 1. They've subscribed for 4 months, currently on a 4 month streak! monthly bezos tax as usual [dfl0__] but not smart enough to [nobodyspecial5678] typescript bad moment [mohad12211] one was added a few weeks ago for the filter function [desgracia007] safescript LOL [mohad12211] like filtering non-null elements will infer a non-null value [danc1593] Why i cant watch a vod of this stream? I missed the stream :( [cephon_altera] no dirtyWidth and dirtyHeight? [dfl0__] typescript is trying to turn web technologies into rust but by corporate engineers [spectral_ray1] 40 [spectral_ray1] random noise like in tv YEP [tintamarajah] !today [patrikomg] in sweden we called the noise in tv the ants war. [recursivechat] same but different LUL [maxremzii] 90s TV noise smells good. [mohad12211] image data is not enough an image [mohad12211] wow [rooctag] putImageData ?? [codecat69] putImageData()? [spectral_ray1] Btw i tried this from your github and it runs pretty smooth LUL [roysten_] If it looks like an image, and it quacks like an image, then it's not an image [odilontalk] OffscreenCanvas [xvye] javascript LUL [iselgrey] can't you wrap it somehow? [mohad12211] the tower of abstractions [codecat69] dirtyWidth? [dfl0__] stinky width [invisibl3cat] Your mom has dirtyWidth [spectral_ray1] need to launder the width [meadiode] sluttyX, sluttyY [paragoncommandershepard] WutFace this function has like 8 parameters [belst_] putImageData is more like a memcopy on an area I think [spectral_ray1] stretch the data [paragoncommandershepard] putimagedata reminds me of glBufferSubData in opengl [godkillerdavid] in this case is it just pixels? [eliphaz_] Hi Mr Tsoding [savaaaaaaaaaaaaaaaa] !today [chick__chicky] tsoding, if you want to scale canvas image data and stuff, of course you have to actually have to do it on an OffscreenCanvas, and then use drawImage with that offscreen canvas as the sourc [codecat69] maybe using createImageBitmap? [dfl0__] omg more offscreen canvases [belst_] putImageData is literally overwrite a buffer section I think. it doesn't do any computation [xvye] Doesn't OffscreenCanvas scale automatically? Might be totally wrong here [spectral_ray1] mr zozin your 3d engine does not lag on my laptop evena bit [spectral_ray1] very smooth [dfl0__] @spectral_ray1 yeah it has a lot to do with the fact he’s streaming he said [fmega] backseattyX [simplept] !project [mrbotka] @simplept command `project` does not exist [abraomd] It's a copy [spectral_ray1] !today [aarjeet] heyaa tsoding wass up [abraomd] It's a copy [spectral_ray1] copy of the copy of the copy of the copy [aarjeet] so r u doing it on vanilla js? [abraomd] I want to see how you will make it faster, for me it didn't improve things that much, but I guess it's caused by the way we write in it [patrikomg] @aarjeet no ts. [last7310] sounds very optimized [aarjeet] ohh ok ..so one question if ts is superset of js so is it ok to do ts in first shot? [last7310] its not a separate language, ts literally just typechecks js code [yadamya] just use claude-ballsack3 [patrikomg] @aarjeet ts transpiles to js [aarjeet] ahh yes ts first converts code into js then on machine right? [spectral_ray1] it's just spits out js file [codecat69] bye, stream quality... [spectral_ray1] typescript does not care about semicolons too? [last7310] pixel blend lulz [tintamarajah] why not draw directly in backCanvas (the code already supports drawing in "2d" ctx), skipping imageData altogether? [paragoncommandershepard] typescript is just javascript with types [tintamarajah] image resampling in offscreen canvas? [eliphaz_] Are you take note ? @Tsoding [dfl0__] yeah it looks like the colors are mixed [last7310] the last row is correct too, right? [spectral_ray1] rip encoding [arsem] FeelsGoodMan bitrate [cephon_altera] oh it got scaled down [dfl0__] picnic time [nickely] do black and purple :) [victorsxdev] @dfl0__ LUL [spectral_ray1] why border squares are thicker [aarjeet] @Tsoding do u do bash too? [sofiman] try profiling in the devtools to see what is taking the most time [dfl0__] seems playable [arbitraryicosahedron] LUL [arsem] FeelsGoodMan next slide please [yadamya] Remove hyperlink, may improve fps [arbitraryicosahedron] Game development in PowerPoint [cephon_altera] average AAAA game [senick0] it's like vscode [last7310] its fine by console standards [juicyluf] its ok, deploy to prod [spectral_ray1] just buy i9 4090 xtx [meadiode] YES [feroblock] doom style type stugg [spectral_ray1] sony 1 graphis LUL [feroblock] stuff* [iselgrey] smooth [xeriab] Ugh [dfl0__] actually looks pretty cool style wise [arsem] min requirements: 5090, ship it [albertogp_twitch] Looks like a Commodore 64. [fmega] old school [mirroredetan] call the game Drunk 2024 [last7310] my raycaster only performs dencetly on 320x160 or below lul [horsemeat17] so did you improve the performance or just reduce the graphics lol [meadiode] 320x200 irc [boganbits] 320x200 [treuks] doom on the SNES [nickely] add some ambience and call it a horror game [feroblock] ddom player would appreaciate these graphics [albertogp_twitch] 160x200 pixesl in multicolor. [last7310] c with raylib, its the floors that darg it down [spectral_ray1] he runs it on pentium 4 [steelconcrete] in FAQ i didint find do you play any games ? or played in the past ? or interested ? [minitbnn] How is the vertical resolution on the wall higher wtf [mirroredetan] @nickely CurseLit [yadamya] @nickely you paint the rays yourself using the mouse [mesmerrlive] its all on cpu right [dfl0__] the vertical resolution of the walls due to the image being higher res make the pixels seem not square [last7310] I saw an optimization technique to avoid casting so many rays for the floor. You basically detect all the floor tiles that should be rendered (are on view) and then draw them one by one as single quads. [prol1xy] renderWalls2 [cephon_altera] no function overloading in ts? [dfl0__] is the frame buffer only for floors or would walls be included too afterwards [therealm0p] I like the "actually writing code". [last7310] floor and walls, everything really [spectral_ray1] monsters too? [last7310] yes [spectral_ray1] even giant spider? [spectral_ray1] in the corner [baller10x] tsodinHyper [last7310] only limit is urmom [dfl0__] they don’t seem to cause as much of a performance hit but i’m sure adding it would only help [spectral_ray1] is it data or data [last7310] data obv [spectral_ray1] thought so [belst_] I think you have to replace SCREEN_WIDTH and SCREEN_HEIGHT with imageData.width and imageData.height [last7310] update the indeces!! [tehbread] [ + 1]'s need to be +2/+3 [spectral_ray1] @tehbread PepeLaughW [other_circumstances] have you tried to draw to OffscreenContext first? [last7310] yes, he did that before [abraomd] I believe so [last7310] @Tsoding the indeces for the colors are wrong [mrrealmgrinder] your index calculation in the RGBA section is wrong, you duplicated +1 [other_circumstances] 0,1,1,1 = 0,1,2,3 [xvye] Let him cook, he's in the zone right now :p [i_only_know_tactics26] bruv [jamestansx] !today [dfl0__] web devs are coming after you [last7310] preend its shooting to increase street cred [i_only_know_tactics26] or somebody shooting fireworks [nicesoftware] Why are we ruling out that they might be shooting at the firework ? [last7310] I want waterworks [other_circumstances] you have to draw the backCtx [red_santar] cool! [mrrealmgrinder] your index calculation in the RGBA section is wrong, you duplicated +1 [codecat69] the indices are 0-1-1-1 not 0-2-2-3 [meadiode] or, fireworking at the shoots [aetherpowered] Pog [last7310] can we get an fps counter? [mrrealmgrinder] tsodinPog [iselgrey] Kreygasm [albertogp_twitch] PogChamp [sailazaray] POGGERS [i_only_know_tactics26] bruv, do you even optimize [elfjsf] elfjsf subscribed at Tier 1. They've subscribed for 8 months! [abraomd] Text [nigelwithrow] !today [mrrealmgrinder] text is first arg tsodinZezin [other_circumstances] white on white [i_only_know_tactics26] Pog 60fps on T ass [last7310] its 60, its getting limited, vsync or something [dfl0__] Math.ciel for higher performance Kappa [albertogp_twitch] @last7310 requestAnimationFrame() does that [dfl0__] maxwidth maybe? [dfl0__] nvm nice [sekenrethesorcerer] Put the textures in their own offscreen canvas? [avvi194] hi, how do you calculatethe delta time? [dfl0__] that’s how the image data is gotten from them [dotbow] You might need to draw a small graph for the last n frames to see drops [codecat69] running average for fps counter? [sailazaray] POG [mrrealmgrinder] bwoah PogChamp [aetherpowered] look smooth indeed :) [akoya_here] ice skating [meadiode] C? Who needs it [ponkkiz] cool [last7310] it has weird drops to 20 and 30 [tcpstream] same shit, different plane [last7310] @Tsoding whats the point of calculating the floor and ceiling separately if is the same thing? you're doing extra work needlessly [iselgrey] not only did he speedup js, also the stream itself [nigelwithrow] that looks amazing [nigelwithrow] reminds me of petscop [mrrealmgrinder] Do you need fill() now, with everything being at least floor or ceiling? tsodinPog [i_only_know_tactics26] yeah u can feel the frame drops [akoya_here] locked at cinematic 29 frames [i_only_know_tactics26] stremmer [tcpstream] JS optimizing?? [dfl0__] i’m sure you know what to place your bets on LUl [paragoncommandershepard] depends on the engine [johnnb2] they make is even slower to annoy the use [johnnb2] user [antonov_548] I think so... new is painful [developland] but the memory will increace [other_circumstances] let's optimize this shit. I mean the JS engine [joshwashywash] i know threejs advocates for object reuse [joshwashywash] for this kind of reason [akoya_here] depends on gc [dfl0__] intentional for job security [lilducklett] afaik it's a cheap gen 0 allocation but a heal allocation nonetheless [sofiman] maybe the drop to 20-30 fps is due to the gc [belst_] threejs uses webgl tho, which is already a massive performance win [ofca0] also you iterate screen_height in each of function (walls, ceiling, floor) effectivly 3 times the same loop [xvye] You could do as the NES console and do a color lookup table. [ponkkiz] doesnt the browser profiler show you what part is responsible for the drops? [devoloution1] @Tsoding you can record performance for a few secs in dev tools and check for gc [dfl0__] still same magnitude of time complexity [ofca0] but if you iterate only once? [rodgomesc] js don't have vectoring unfortunately [nigelwithrow] we dont care about asymptotics we care about actual arbitrary work [dfl0__] @ofca0 it might improve it *technically* but by a negligible amount [rooctag] ctx [dfl0__] since time complexity stays the same (linear) especially like he said by a factor as small as 3, would not gain from that [i_only_know_tactics26] @dfl0__ premature optimization one could say [nigelwithrow] @i_only_know_tactics26 arent those done before you even get working on your project? [last7310] "Renderer" class and dump all of this in there [i_only_know_tactics26] @nigelwithrow no? [thatguydoru] huh, really improved a lot x2nerd2Hype [nigelwithrow] @i_only_know_tactics26 my bad [akoya_here] @dfl0__ well depends on what the factor is if you have a process that takes 3hours and you make it 1h you made quite a bit of an improvment [other_circumstances] BTW. What if you create methods, that draw on a ctx. And then you just replace contexts (the normal one and the offscreen one). In this case you do not need to write directly to a byte array [akoya_here] i would much rather wait for 1h then 3h🤣 [wanderboy_] damn, that looks neat [themelopeus] it's claustrophobic [dfl0__] backrooms game [i_only_know_tactics26] creepy af [abraomd] Maybe [themelopeus] you can go in circles [codecat69] to the right [iselgrey] just go in increasing circles [rooctag] ship it [misha_severny] BibleThump [joshwashywash] so the soundtrack will be you beatboxing right? Kappa [cactusvacuum] really nice [pog9] You should implement getting lost jnto your game. [i_only_know_tactics26] @iselgrey damn right [dfl0__] that’s such a good concept, rogue like but a in a vast expanse of emptiness not knowing where things were [last7310] you can seriously leave it as it is and some clickbaity horror youtuber will make a 10 minute video out of it [oleksii_lisovyi] more like parasha Kappa [shpirtman] Thalassophobia [pog9] Should also make the music you beat boxing, noCap [rodgomesc] Have you ever played with C in mobile development? Do you any plans for the future? [horsemeat17] @akoya_here pretty sure it was a joke [bigdictenergy] how’s the JS optimization coming along [nicolasdanelon] @akoya_here it was just a question [oleksii_lisovyi] !still 2023 [mrbotka] 2023 in 2023 KEKW [oleksii_lisovyi] LUL [rooctag] use canvas instead [wekuz11] how much time will the stream last? [senick0] 2023 in 2023 in 2024 [akoya_here] when life hits you and you need to have plans that where you will find depression 😝 [rooctag] !still web [mrbotka] web in 2023 KEKW [thatguydoru] LUL [doushnilla] !still 2024 [mrbotka] 2024 in 2023 KEKW [bigdictenergy] can’t you get the data as a buffer? [blubberbub] And even then you can only do it if CORS allows you to do it. [patrikomg] @wekuz11 ~2hr [wekuz11] @Patrikomg ok thx [wekuz11] then I'll stay [buffer0xaa55] xello [saurav_sp] !faq [mrbotka] @saurav_sp command `faq` does not exist [jesusofcarrots] Hey ho everyone [patrikomg] @saurav_sp https://github.com/tsoding/faq [saurav_sp] @Patrikomg thanks [ssj5gokubro] I would love to see you do some programming on stuff like ps1 or windows 95?? [sofiman] its like the x86 architecture [cephon_altera] pixels are unsafe, only smarter people who write frameworks are allowed to touch them [last7310] the venn diagram between smart people and people who write frameworks has no overlap [dfl0__] js code is like the seeds cellular automaton [diorcula] man i really have to thank you, your video on HASKELL JSON, you got me through my course!! tsodinZezin [dfl0__] the pixels look square now! [cephon_altera] how is this so fast but opening jira takes 10 seconds [boganbits] man that aliasing effect on the textures is nostalgic [albertogp_twitch] Playable! [last7310] you have the same issue I have, if you get too close to the wall framerate drops daramatically [dfl0__] before, the horizontal resolution was as you specified but vertical was from source image [dfl0__] this looks sick [ha1zum] didn't we manage to show the texture on the minimap before? [manna_soumya] Minimap walls ? [boganbits] (you can get that effect with OpenGL btw, just nobody ever does it) [abraomd] Raycasting is cool af [last7310] I suspect that happens because of float operations, when you get too close the entire screen gets mapped to a single texture, so each pixel has a low float value for the texture coordinate [dfl0__] would converting all the math to integer math introduce significant performance improvement [last7310] it certainly would [last7310] and I would like to see it since I don't know how :>) [albertogp_twitch] @dfl0__ Not with modern CPUs. [dfl0__] looks like a flashlight [dfl0__] yeah [last7310] dark souls lighting [sekenrethesorcerer] Beautiful! [prol1xy] F.E.A.R prologue be like [phoenixa25l] Is this doom way of 3d [nyyakko] yo thats some solid progress. yesterday when I had to leave you were struggling with the 1/NEAR_CLIPPING_PLANE thing, now look where we are at. [nigelwithrow] @phoenixa25l yup [sekenrethesorcerer] For fps, calculate average time over last few frames [abraomd] Way better [i_only_know_tactics26] JBlow would be proud [nyyakko] thats awesome [lazy0008] lazy0008 subscribed with Prime. They've subscribed for 20 months! Jeff doesn't want to hire devs to make primes subscribe by itself every fucking month [phoenixa25l] Does the player have a z axis? [diammmond] where does the walls on the minimap go [dfl0__] now you can try floor textures with higher res [abraomd] C community in shambles as you made it deprecated [last7310] I get the issue of creating new vectors but why using vector2 is a problem? [krissetto_] JS definitely hates having a ton of objects created all the time [tw_int] minimap regression also needs to be fixed [boganbits] Java might deal with it well [krissetto_] I'd try pooling them, who knows [nigelwithrow] need to go under the hood of JS to find out [vietovanquish] I've heard that the majority of most js execution time is the gc, but I'm not sure. [dfl0__] are you planning on iludint the minimal in game or just for debug [dfl0__] including* [boganbits] Java's GC is not so bad... it has multiple arenas so that one thread can clean up one while threads allocate an another, preventing GC from holding up normal code [dfl0__] nuke it [boganbits] (not sure if openjdk is similar though) [misternoc] what's this? нереально engine? [lehaninetyfive] Нереальный движ [fourmore] stop it and get some help [illrememberthisnam] are the textures begin sampled vertically? [island_moonlight] it would fly on today era laptop [tsoding] https://github.com/tsoding/raycasting [themelopeus] even the old one flies [sailazaray] <3 [cactusvacuum] ggs [aetherpowered] bye bye [last7310] ohh short stream [sofiman] <3 [bearow] this was cool [last7310] by bye [dfl0__] thanks for the stream Tsoding! [nigelwithrow] bye [lazy0008] bye [mrrealmgrinder] bye [iselgrey] bye
Info
Channel: Tsoding Daily
Views: 18,089
Rating: undefined out of 5
Keywords: JavaScript
Id: cjgaNzywZtQ
Channel Id: undefined
Length: 95min 32sec (5732 seconds)
Published: Sat Jun 29 2024
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.