100 Days of Threejs
Day 0
1, 2, 3, 4
100 days of code I swore
5, 6, 7, 8
I'll try not to post too late 💀
Threejs & 3D for 100 Days, comin' at ya 🔥
#100DaysOfThreejs
#100DaysOfCode
Day 1
Pretty much learnt the very basics of how graphics work. There are some really freaking cool projects and I'm so inspired... Even though it's clearly a phenomenal amount of work 💀
https://t.co/jhQJiNE7PV
1/100
#100DaysOfThreejs
#100DaysOfCode https://t.co/dQlTiHts4h
Day 2
Took me two hours to get through ~35 mins of video. It's one of those days. 😩
12-hour stream on Sat 🔥💀 (probs Svelte).
Posting this uggo threejs cube for comparison purposes later.
2/#100DaysOfThreeJS
#100DaysOfCode https://t.co/smdd29RN7i
Day 3
I'm considering a monthly subscription to the 'I hate webpack' club
What's your relationship with webpack like? 😆🥲
3/#100DaysOfThreejs
#100DaysOfCode
Day 4
Still on 12 hour stream for another 10 hours. Come say hi :D https://t.co/IkdQVwBGIo
Uggo blue cube has progressed to three uggo cubes. Gonna be on basics for a while.
Onto some Svelte!
4/#100DaysOfThreejs
#100DaysOfCode https://t.co/fN6PSvAJNZ
Day 5
I'm an animation expert now and will be available for hire next week 💀
To be honest, I appreciated understanding why we bind animations to time calcs: to avoid them playing at different frame rates dictated by hardware. P. cool!
5/#100DaysOfThreejs
#100DaysOfCode https://t.co/iydGnjLOkz
Day 6
I might be that student where everything I learned in school becomes relevant. Learnt about camera projections in today's lesson (and in uni), but the first time was in my Design & Technology class.
Krebs cycle, where you at?
6/#100DaysOfThreejs
#100DaysOfCode
Day 7
Cameras seem to be about as complicated in terms of theory when rendering graphics as they are in actual photography (depth-dependent, of course).
Z-fighting definitely sounds like an anime thing though.
7/#100DaysOfThreejs
#100DaysOfCode https://t.co/SOQgQidZPT
Day 8
Did more on cameras but I'm not absorbing much so will probably repeat tomorrow :3
I might just grind the videos 'cause textures and materials are coming up soon 🥳 Gimme shiny!!
8/#100DaysOfThreejs
#100DaysOfCode https://t.co/xs63VdOXfm
Day 9
LOL. I was noticing so much more while not sleep-deprived I almost thought it was a different video entirely. 😆
That was another good reminder that sleep > trying to do shit tired. That's two pieces of proof. Take that, brain!
9/#100DaysOfThreejs
#100DaysOfCode
Day 10
It's basically the next day but I haven't slept so it 100% counts. XP Too lazy to post a gif but I just did a bit of camera POV experimenting. Need to get on top of my shit.
nn!! <3
10/#100DaysOfThreejs
#100DaysOfCode
Day 11
Managed to finish that video that took like... five days idk. 💀 Moved on to fullscreen, damping, and mouse control :D
I wanted to finish another two videos but ya know what? I'm tired. Just gonna axe it and pick it up tomorrow.
11/#100DaysofThreejs
#100DaysOfCode https://t.co/7HngoXkjcm
Day 12
I can make custom planes and shapes by generating triangles from points in an array. Unsure if I'll be taking that anywhere in the future if I can import and use models... But we'll see. I'll leave it at this mess below for now :3
12/#100DaysOfThreejs
#100DaysofCode https://t.co/6vbI4G1A3H
Day 13
Added dat.gui to make tweaks to mesh properties. Rather straightforward. ^_^
dat gui doe
(textures tomorrow aaaahhhh!!)
13/#100DaysOfThreejs
#100DaysOfCode https://t.co/qgfuNahoLZ
Day 14
This door texture by João Paulo is made of a bunch of layered 'maps': base colour, diffuse, normal, displacement, roughness, ambient occlusion, opacity, and metallic.
So for people who thought it was a single image.. It takes more 😆
14/#100DaysOfThreejs
#100DaysOfCode https://t.co/cebxeO4bvW
Day 15
Current Threejs level: Minecraft
Time to clone you-know-what huh? :3
15/#100DaysOfThreejs
#100DaysOfCode https://t.co/CLAGuKRV7Q
Day 16
Mightily unimpressive, I know, but prepping for tomorrow. Have to cut it here as I spent pretty much the entire evening dwelling on Twitter Space graphics >_>
16/#100DaysOfThreejs
#100DaysOfCode https://t.co/P4HsZZ5WhV
Day 17
Materials all done. 12 Hour UI Stream on (oceanic) Sat for a game in Unreal Engine! Link below.
Also learnt about normal, height, and ambient occlusion textures to control the 'realness' of objects. Cool stuff!
17/#100DaysOfThreejs
#100DaysOfCode https://t.co/2fcZhxsWD7
Day 18
Did this on stream without actually running it. Only two tiny bugs! xD There's no light in this scene.
Thanks all for tuning today btw <3 Celebrating 900 in two weeks with another 12H stream ;)
I need donuts.
18/#100DaysOfThreejs
#100DaysOfCode https://t.co/MY2RA3vSoA
Day 19
Added lights and light helpers. Apparently there's a cap at light 50 lights or something, so a lot of the time baking light into textures is a thing. Lots of Maya/Blender incoming 💀🔥
19/#100DaysOfThreejs
#100DaysOfCode https://t.co/NcxLU8oFXd
Day 20
Haunted House! Shiny door, random bushes, gravestones, little ghosties, choppy gif recording, all check :3
20/100 Days of Threejs
#100DaysOfCode https://t.co/p36OmSRez5
Day 21
YoU dOn'T nEeD mAtHs To PrOgRaM
If I wanna make stuff like this I damn well do. 💀 Threejs is still web dev and it is an exception to the no-maths ish.
Guess who's got to start way back at Year 9 trig.
💀💀💀
21/100 Days of Threejs
#100DaysOfCode https://t.co/Ud3Z4I6DC5
Day 22
I know this looks boring af. Buuut this is raycasting. It's used for things involving line of sight, projectiles, etc.
Over here the camera view is the ray origin :3 The mouse is the destination. The circles turn blue when they intersect.
22/100 Days of Threejs
#100DaysOfCode https://t.co/qx82HzfWTp
Day 23
Had NO idea there were basically two separate ~realms~ that coexist to use physics. The engine lib is basically a theoretical mathematical world where changes happen; we update threejs meshes to those values.
It's not just animation 💀
23/100 Days of Threejs
#100DaysOfCode https://t.co/0WqvWS2L6H
Day 24
Modelling is a bitch.
Lighting is more of a bitch.
I feel fancy talking about 'tone mapping exposure' and 'environment map intensity'... But it's not, really.
That about sums up the three lessons I did today 😆
24/100 Days of Threejs
#100DaysOfCode https://t.co/xbA6BD84gs
Day 25
I was always apprehensive of shaders. I had the impression they're difficult af and *maths* and *pain*.
The apprehension has disappeared but I REALLY need to relearn circle geometry, matrices, and vectors after this course 💀
25/100 Days of Threejs
#100DaysOfCode https://t.co/AlgKcVChzI
Day 26
Ahhh yes, required semicolons for things to work. All feels right with the world 💀
--
*writes one tiny GLSL shader*
*adds GLSL to CV*
💀
Don't worry, I didn't! :3
26/100 Days of Threejs
#100DaysOfCode https://t.co/SJbWtdqYWv
Day 27
Shader patterns! I went through freakin' 50 of these.
This course is really putting me through my paces omg 😆🔥
27/100 Days of Threejs
#100DaysOfCode https://t.co/4GOycKvNen
Day 28
I am deceased after all that shader programming. 💀
This was built from a flat plane with nothing on it - essentially a blank square in space. He did well teaching.
28/100 Days of Threejs
#100DaysOfCode https://t.co/LsoLo12w2O
Day 29
Learnt more shader animation. My braaaiiiinn. 😩
I aspire to think up stuff like this one day. Maths everywhere. All the maths. 😆
29/100 Days of Threejs
#100DaysOfCode https://t.co/hXBZkA4y67
Day 30
Went through a chunk today learning about performance optimisation, adding a loader, and combining HTML with WebGL.
Most productive stream in a while ehehehehe :'D
Cya for a 12 hour stream on Sat with Svelte! 💀🔥
30/100 Days of Threejs
#100DaysOfCode https://t.co/hPkUrhTRNZ
Day 31
Started 3D modelling. I don't wanna share progress yet so have a gif from the workshop hosted by my friends on Unreal Engine particle emitters (Niagara).
I actually knew what he was talking about because of working with threejs :D :D :D
31/100 Days Of Threejs
#100DaysOfCode https://t.co/VUA9tNAQ7c
Day 32
That was a *long* stream. Slightly miffed because I got to the end and can't render and export because my system keeps freezing :/ Still proud I finished that model and tried UV texture unwrapping!
32/100 Days of Threejs
#100DaysOfCode https://t.co/GAHJdINZ2L
Day 33
Fakegate done. Course is DONE!!
That was *intense*.
And this is only the beginning 💀
33/100 Days of Threejs
#100DaysOfCode https://t.co/usoLhRcbSh
Day 34
Decided to sit down with the threejs editor and get to know it better today. A bit underwhelming but it needed to be done.
Still struggling with setting up rollup from scratch as an alternative to webpack >_> Tomorrow!
34/100 Days Of Threejs
#100DaysOfCode https://t.co/QeYZKhbl8g
Day 35
Because of that hard drive failure disaster, I only spared a bit of time. Started The Book of Shaders and checking out https://t.co/ySZbdzbLhG
This shader is by ohanegby (link below). Mesmerising!
35/100 Days of Threejs
#100DaysOfCode https://t.co/oCVewEBAS6
Day 36
More from The Book of Shaders. It's a fantastic intro and I really wish the book was completed. It's been way too many years without an update :/
https://t.co/hY5aZrOeh3
In others news, I lost all my threejs projects :D
36/100 Days Of Threejs
#100DaysOfCode
Day 37
Spent some time going over uniforms again and picking out some Blender tutorials for tomorrow.
3D model practice projects incoming! 🥰 If you have any spooky requests, let me know :D I have a few queued up.
37/100 Days of Threejs
#100DaysOfCode
Day 38
I decided on a small threejs project. Started the 3D modelling part🤐💀
Hope you're having a good end to the work week! <3
38/100 Days Of Threejs
#100DaysOfCode
Day 39
Compared modelling techniques for this object from a bunch of videos 💀. Vaguely planned out the threejs scene as well so I think I'll be able to finish this project by the end of next week!
39/100 Days Of Threejs
#100DaysOfCode
Day 40
Working on my first simple custom fragment shader. I'm just mixing colours but hoooooboi this is going to take some time getting used to 💀
40/100 Days of Threejs
#100DaysOfCode
Day 41
Started modelling again :3 I got further but it's too obvious AHAHAHA
>_>
41/100 Days Of Threejs
#100DaysOfCode https://t.co/hbVcpvRwEg
Day 42
PROGRESS: A jack o'lantern in Blender!
Comment below and I'll make one inspired by your profile pic!
Themes (e.g. 'cute'), accessories, or yelling 'RNGesus/Random' are also welcome.
They'll go into a threejs scene too! 🤐
42/100 Days Of Threejs
#100DaysOfCode https://t.co/ZUGeUGwY4x
Day 43
Started on the pumpkins y'all indulged me in by replying to yesterday's thread ;) Excited!
I'm making them all from scratch. In the pic below I've already pumpkinified a sphere and that's where the fun starts.
43/100 Days Of Threejs
#100DaysOfCode https://t.co/iEVA7SqeiL https://t.co/VX8ucjYdsT
Day 44
Don't wanna spoil so here's Alom's uwu lantern in the making.
If all goes well on Friday, I'll finish the project during my 16 hour stream on Sat to celebrate 1000 followers on Twitch! 🥰🔥
44/100 Days Of Threejs
#100DaysOfCode https://t.co/2jVr6Xf3MQ https://t.co/gntKXhXJR8
Day 45
Stuff cropped up today so only a tiny bit of progress.
I'll probs attempt shaders at the beginning of tomorrow's 16 Hour celebration stream and then attempt to re-code the portfolio I lost during the HDD crash.
Svelte ftw.
45/100 Days of Threejs
#100DaysOfCode https://t.co/j24m8QebJk
Day 46
Added low-poly hay bales.
It occurred to me now I can literally just click the eye to hide and unhide instead of clustering them behind the hay omgggg 💀🤣 Time for sleep, methinks~
46/100 Days Of Threejs
#100DaysOfCode https://t.co/ecrBfqq1ot
Day 47
Managed to get more pumpkins done xD This scene looks like shit rn it's so bad 🤣 I'm fairly certain I'll finish the jack o'lantern project by the weekend though.
Headache kicked back in so gonna sleep BEFORE midnight :O Byeeee~
47/100 Days of Threejs
#100DaysOfCode https://t.co/lHERlBLXCV
Day 48
Almost halfway, hot damn.
Continued with a bit of the pumpkin modelling. Got my second jab today so focused most of my efforts on writing and planning article content.
48/100 Days Of Threejs
#100DaysOfCode
Day 49
Went back to circle geometry. Realised I needed trig.
Went back to trig. Realised I needed algebra.
Went back to algebra. Realised I need to practice fractions.
FML let's goooo🤣💀🔥
49/100 Days Of Threejs
Day 50
Started pre-calculus.
Hopefully it'll be enough, but we'll see. I might have to stick to this and modelling until I can get my new PC to get a render out of Blender.
50/100 Days Of Threejs https://t.co/xr5CBTA9Z5
Day 51
Was mopey and stressing about time so I changed my shower tunes into shower maths and it was actually fun💀
Covered the rest of the precalc intro video :D Turns out I vaguely remember algebra, so all hope is not lost.
51/100 Days of Threejs
Day 52
Hi I did more precalc, specifically about algebraic functions okay bye <3
52/100 Days Of Threejs
Day 53
Did a tiny bit of precalc before stream xD
Was gonna do 16h but I figured I should sleep because head hurts, and stream agreed so I only feel half disappointed. Next Sat! :D
53/100 Days of Threejs
Day 54
Just algebra today.
The precalc playlist I'm using is a total of 2 days, 16 hours, 13 minutes, and 30 seconds long.
While a part of me wants to rush it, I'll just adjust my plan to include more 3D modelling until I can handle custom shaders.
54/100 Days of Threejs
Day 55
Covered 'The principles of painting with maths' (link below).
Tomorrow I'll start attempting to juggle one maths video a day with some 3D/shaders and see how it goes. If my energy is shit I'll just be doing one of the two.
55/100 Days of Threejs
Day 56
Spent a lot of today moping so chose precalc instead of fun 3D stuff.
Differential quotients ftw :D I remember literally nothing about what they had to do with slopes. This is so bad.
So bad.
Time to stream some Gatsby~~
56/100 Days of Threejs
Day 57
Finding a Domain, done!
No, we're not buying any. 💀 A domain for a functions.
Also: please enjoy me gently trolling the Literature Society at uni. They challenged us (Artifex) and it's feeling like a one-sided rivalry.
💀💀💀
57/100 Days of Threejs https://t.co/HHvaDggqKX
Day 58
Can't believe I forgot about imaginary numbers and polynomials wtf.
Anyway, I did that early so I'm not sitting here at night up late trying to understand maths 💀💀💀
58/100 Days of Threejs
Day 59
HA. HAHAAAA. I covered features of graphs, the vertical line test, and operations of functions in the car otw to and from dropping off a PC + dindin.
I cannot be defeated 💀 I SHALL BE IN BED BEFORE MIDNIGHT ONCE MORE!
59/100 Days of Threejs https://t.co/6Y1do0zPLo
Day 60
Got all the pumpkin models out! Going to finish them and the initial lighting + colouring hopefully tomorrow morning, and by evening I'll do the final renders.
Here is Sephi humouring me.
60/100 Days of Threejs https://t.co/0071S5p014
Day 61
Was hoping to finish the models today but fuck it :P I need sleep and it's almost midnight. At least tomorrow it'll be Halloween somewhere by the time I finish 🤣🤣
61/100 Days of Threejs
Day 62
I did increasing and decreasing functions and that was all I had energy for okay byeeee <3
62/100 Days of Threejs
Day 63
Started on the 3D wagon.
It does not look like a wagon yet and I won't post a screenshot.
Nobody from stream out me for preferring to talk about desk setups pls >_>
63/100 Days of Threejs
Day 64
Extrema. That's it.
ngl that sounds like a p. cool word :3
also this instructor makes me feel guilty for not working out at the gym >_>
64/100 Days of Threejs
Day 65
Average Rate of Change of a function, done!
The comments had me ded. They were talking about the instructor's biceps :') I swear the more I work through the series the funnier it gets. 🤣
65/100 Days of Threejs https://t.co/gUBSqm2JTY
Day 66
Piecewise functions, heck yeaaah~~~ SORTED~
If the pieces were truly wise, the function would be for cutting a cake or some other delicious edible.
66/100 Days of Threejs https://t.co/bM2zHMzIKh
Day 67
Graph patterns. Boring tbh :P Kinda feeling the need to grind through all this sooner but it's just so... much xD
67/100 Days of Threejs https://t.co/vquXJfNTN5
Day 68
Intro to graphing transformations.
He teaches how to understand what causes the patterns. This is more powerful than simply knowing the pattern and applying it.
This attitude applies to code, too.
68/100 Days of Threejs https://t.co/Ma2Amq6j3c
Day 69 nice
f ( x + h ) is a shift left
f ( x - h ) is a shift right
It's unintuitive; it's basically as if you're working from the result backwards and not from the input (x) forward :3
69 (nice) / 100 Days of Threejs
Day 70
Finished off the transformations but d a m n.
Please behold this meme by Alom that accurately summarises the transformed 100 days of threejs journey . :3
70/100 Days of Threejs https://t.co/92wLfppATr
Day 71
Transformations was not finished yesterday. It is now. Quadratics soon. I remember I used to enjoy these in school!
71/100 Days of Threejs https://t.co/qJfBa6Ocrr
Day 72
'The problem is ... we learn techniques without understanding what we are doing.'
This is one thing that sets many professionals apart from others. Across industries.
Own it. 💀
Quadratics started.
72/100 Days of Threejs
Day 73
So exhausted I spent like 10 mins on the square root method and I'm calling it a night. I WILL SLEEP BEFORE MIDNIGHT.
Hope you're having a good day ^_^
73/100 Days of Threejs
Day 74
I got like another 15 mins of The Square Root Method in Solving Quadratics in today. It's so hard to focus I think I will start the day with it henceforth.
Actual threejs coming back in soon XP
74/100 Days of Threejs
Day 75
I finished a maths video big whoop okay bye I'm going to bed at 7 AM again
75?/100 Days of Threejs https://t.co/wnRhsWvR3V
Day 76
factoring okay bye xD
Can you tell I am at my lowest energy point? lmao
76/100 Days of Threejs (now mathsjs I swear)
Day 77
I did like 5 minutes of video :') More factoring to solve quadratics lolol
I'll make up for it later in the week.
77/100 Days of Threejs
Day 78
Literally just continued what I could from yesterday. My brain is partially fried. I am fine. I'm frontloading work so I don't have crunchtime in two weeks before a deadline. :3
78/100 Days of Threejs/maths
Day 79
Managed to get past half of that solving quadratics video :') Will see if I can finish it tomorrow.
Might see y'all on stream too if I have the energy. Need to get some other work done and eyes on me coworking might be useful :3
79/100 Days of Threejs
Day 80
Did the fucking minimum. I have realised that:
1. As a kid, I took the speed at which I could do this correctly in my head for granted. Like, WAY.
2. I'll need to rewatch w/ a pencil to learn this factoring 'shortcut'. I should learn it anyway.
80/100 Days of Threejs
Day 81
Bah. Still the minimum again. I have so much work to finish by end of Nov I might swap to 3D for last 20ish days because it's more chill. I'll fit the maths in when I can. :D
81/100 Days of Threejs
Day 82
Yeah I'm gonna have to stop here and do quadratics examples lmao. I actually expect to find it therapeutic after some time.
3D starting tomorrow!
82/100 Days of Threejs
Day 83
Completing the square started 💀
I lament that I ever forgot anything ever pertaining to Maths.
83 / 100 Days of Threejs
Day 84
Did some practice questions for the first time. Needs a bit of correction but ya girl still got it! :D
84/100 Days of Threejs
Day 85
Returned to the Book of Shaders for some variety. Chapter 5 Algorithmic Drawing let's go :D
85/100 Days of Threejs
Day 86
More Book of Shaders! Haven't really spent time thinking about the shape of functions and how they affect the output so this has been useful.
86/100 Days of Threejs
Day 87
Learnt about step and smoothstep. Ngl, even though this book isn't gonna be finished it's still ridiculously helpful for developing the finer details of that mental model.
87/100 Days of Threejs https://t.co/7UcEX7OoLf
Day 88
This ish is what I'm relearning a shit ton of maths for. MUAHAHAHA.
Not the animation, just what it represents xD
88/100 Days of Threejs https://t.co/Z6OciA4Xhc
Day 89
A few more exercises to follow up from yesterday.
I might be at my minimum but damn, it's defo a consistent minimum :')
89/100 Days of Threejs https://t.co/7SUxPlZT0h
Day 90
I'm starting to understand this maths shit wtf man xD
https://t.co/wuppDgVfVF
90/100 Days of Threejs https://t.co/Bk2NbMdRht
Day 91
Went through a bunch of functions and maths about signals. Only about halfway lost :3 Will probs need to reread later.
Thanks for the company on stream too, ya nerds ❤️
91/100 Days of Threejs https://t.co/qRiwKIdRDk
Day 92
Worked through some examples in the exercise to follow up from yesterday.
This tool is amazing. https://t.co/9DDHOQwdli
92/100 Days of Threejs https://t.co/2iELrVaqcE
Day 93
Started on colour theory! Leaving the exercises for tomorrow.
93/100 Days of Threejs https://t.co/mdmU6hrOzc
Day 94
Went through HSB colour stuff again due to being so tired yesterday :3
94/100 Days of Threejs https://t.co/7ZwWlOJRTZ
Day 95
Ugggh. Brain feels a bit muddled and will have to go through the HSB in polar coordinates section again.
💀💀💀
95/100 Days of Threejs
Day 96
Started Shapes.
Send help. 💀
96/100 Days of Threejs https://t.co/4Z4ZYQRjHG
Day 97
ngl the programming is doing my head in a bit. Probably gonna spend the next three days figuring this ish out xD
Screenshot from the Book of Shaders~
97/100 Days of Threejs https://t.co/R6vvAxzAad
Day 98
Learnt to deploy my threejs projects with Vercel.
Literal minutes wtf xD
98/100 Days of Threejs
Day 99
Computing circles using step(),distance(), length(), and sqrt().
One more damn day to complete the 100 days. We're celebrating in Atlantis tomorrow post-stream for everyone who did their 100 Days of Code or whatever challenges. ^^
99/100 Days of Threejs https://t.co/WnTr0pzPWh
Day 100
DAY ONE FUCKING HUNDRED. AYOOOOO. Thanks for celebrating with me on stream ❤️
Grats to everyone completing a third round of 100 Days with us in Atlantis!!
Next up is 100 Days of UX on Jan 1st 2022 😈✨
100 / 100 Days of Threejs https://t.co/9iDSEGcK9T