My 3D resume: feedback please

[enric1994]

Link: resume.enricmor.eu
Source code: github.com/enric1994/resume

I created my resume in 3D using Blender and ThreeJS with custom Orbit Controls.
Currently looking for feedback before publishing it on LinkedIn, please let me know what do you think!

I am specifically concerned about the following issues:

1. Orbit Controls are not very smooth when using a mouse or trackpad (I actually have a script to detect mouse/trackpad and change the speed). It works perfectly on smartphones.
2. I tried to follow the lowpoly principle where important objects have more detail, but I don’t know if it’s clear enough.
3. Colors are not from a standard palette, I just selected them on the fly. I am not sure if they look consistent.
4. Size and color of the titles may be confusing
5. Maybe I should use the Composer to add some shaders. I tried BokehPass but it didn’t look good (and I lose the background gradient).
6. Device viewports, please let me know if some titles are cut in your phone!
7. I did my best with the lights, but some shadows look weird. I tried to have an independent directional light for each scene, but I didn’t find how because the lights will appear in the other scenes.
8. My Macbook Air CPU goes to 82 degrees when using it. Phone and Windows are fine.

Cheers,

Enric

[looeee]

I like it a lot, great work!

Some possible improvements/ideas:

1. The scroll is quite jerky, at least on my machine - maybe you could lerp the scroll to make it more smooth? There are several libraries that can help you with this and deal with all the cross-device issues that will come up with scroll animation.
2. The colors do stand out to me, they’re not very consistent. They go from quite bland in some scenes (the beach) to maybe a bit too clashing on the balloons. There are many places online to find color themes, for example Adobe Kuler.
3. Overall it’s maybe a bit too simple, especially viewed on a big screen (I didn’t check mobile). As you say, you could use effects but that will hit performance. Another options would be to add some texture to the background to add visual complexity and interest. Even a simple noise pattern blended into the background can make a big difference (I happened to be looking at this example which has some mild noise applied to the background and UI elements - it’s nothing like your website but illustrates what I mean).
4. You could also make the gradient change as you scroll - give each scene a different gradient and color theme to differentiate them.
5. Movement in the scenes would make a huge difference - just simple things, like make the dog’s tail wag, or have the balloons slightly sway, or the fish move down the conveyor belt.

[enric1994]

Thanks for your feedback! I’ll get back to you after fixing all these problems.

[vielzutun.ch]

Some impressions from my side:

I like the idea and your implementation of an interactive presentation a lot. It would benefit from a little “gameification”, though, imo, to incite the user to scroll back&forth. I’ll come to that later.

I also have a MacBook Air (2017), and it does activate the fans pretty soon after invoking your page. Looking into the iOS “activity monitor” reveals, that your app is running @full speed (1 CPU @100%, GPU @40+ %), even if there’s no new user input. ==> change your animation loop to only redraw on new user input, i.e. don’t call requestAnimationFrame() needlessly.

On scene-specific lighting:
you could add lights according to the needs of each specific scene. Turn the lights of a scene on, when that scene is in view, and turn them off once the user chooses to scroll a scene out of view. You could implement a “z-threshold” to detect this. You may want to implement a little overlap z-wise between successive scenes. A cross-fade of the lights would be superb.

On gameification:
Each scene is currently still, absent any user input. How about a little animation loop which keeps running regardless of user input? (Note: this will counteract the redraw-on-user-input-only suggestion) A few suggestions:

• entry scene: have those rocks falling (tumbling) down endlessly and randomly (particle system with invisible source above);
• from Barcelona: make your avatar wave its hand, with its upper body maybe even billboard-like while the user scrolls …
• languages: have the exhaust from the rocket come out like a particle system, make the asteroid tumble, the astronaut wobble, flags as billboards …
• telecoms engineer: keep throwing the hat, make it tumble on its way up and down
• PhD in AI: make the robot do some repetitive movement, let those quadcopter rotate their rotors, maybe let them slightly wobble during hover
• Coding Enthusiast: use the chimney as emitter of a ballon particle system (even though your avatar is sitting still
• Previous experience: let the Superman’s cape wave in the wind (there is a cool example in three.js for this)
• Backend developper: animate the avatar’s legs like it’s constantly pushing, maybe animate the logs underneath the PHP8SQL cube like they’re rolling
• DevOps: keep the chimney smoking, the assembly line moving, the worker wrenching …

[enric1994]

I improved my resume following your advice.

First of all, thanks @vielzutun.ch and @looeee for your feedback. (omg I just realized that you are the creator of Threejsfundamentals).

Here’s a list of the improvements:

1. Added a gradient background that changes slowly (I used Granim JS, very useful). Now the scenes look more “full” on PC.

2. Added Damping to the scroll, it improved the smoothness (on both phone and PC) dramatically. I had to disable it for Macbook trackpads because they already do that acceleration effect (the scrolling with Macbook is still very bad).

3. Added a “snap” that stops the scrolling in the middle of the scenes.

4. Applied some cool Adobe palettes. To be honest, is the first time I do that, let me know if you see something weird. I tried to reuse colors within the scene.

5. I added a hyperlink to my main page.

6. Fixed the performance issues by calling render only once (I was calling it in animate() too)

7. Removed the Up balloons Many people had performance issues in that part. Also the .glb file went from 11 to 6 MB. I tried the “Decimate” modifier first but it kept lagging.

Other issues appeared while trying to fix the other ones (as usual):

1. When using the damping too much it will lose the rotation center and scenes will be not centered.

2. For some reason, I can’t resize the canvas anymore (tried Threejsfundamentals example with no luck).

Regarding the animations, a lot of people want them (I got great feedback on Reddit too). However, the tests I did look very bad and affected the performance. Maybe I suck at animating with Blender? Probably. I’ll keep the model “frozen”. The “slow-motion” effect is nice as well.

Oh, I also got criticized in r/Resume. So now I am an “AI & 3D expert” instead of a data scientist.

More feedback please!

[looeee]

Nice, the gradients are a big improvement and scroll is much smoother
The snap is nice too, very subtle but it works. The colors are much better too. The only one that still stands out to me is the interior of the house - there’s a lot of intense yellow/orange going on there. Maybe desaturate the interior walls a bit?

@enric1994

Also the .glb file went from 11 to 6 MB

Try running the glb through gltf-transform.
Try dedup/prune/weld for minor fixes first and then apply one of draco/meshopt/quantize to compress the vertex data. Draco/meshopt will give better results (and also incorporate quantize I think) but you need to add extra decoders to load the compressed file.

One improvement that I didn’t think of previously - you could add some ambient occlusion. Either bake it in a modeling program or use an SSAO pass. The pass is easier but less performant.

Removed the Up balloons

This would be a perfect place to use instancing. Setting it up for a glTF model is a little tricky though (note: gltf-transform does have a command to do it automatically but it requires an extension that three.js doesn’t support yet as far as I know).

@enric1994

Regarding the animations, a lot of people want them (I got great feedback on Reddit too). However, the tests I did look very bad and affected the performance.

For simple animations you could do them in JS using Tween.js/Popmotion/GSAP/Theatre.js/Anime.js…
Otherwise you could try the gltf-transform resample command to simplify the blender animations (haven’t tested that personally).

@enric1994

omg I just realized that you are the creator of Threejsfundamentals

Nope! I did write Discover three.js though

[vielzutun.ch]

@enric1994

More feedback please!

You did a great job and achieved a definite improvement!

The idle load on both CPU and GPU went down to 16% and 2% respectively, that’s perfect.

I also like the cross-fade transition between backgrounds very much. Plus, the colours match each respective scene now much better than before. And it really makes you want to scroll back and forth, to enjoy the effect. (Boys need toys …).

Also: “click to contact” is a very useful feature. Because people like to play, but they are also lazy - most of the time. And having to type your contact info into another app might have been too much of a hurdle for some …

It’s a little sad, that no scene has any animation of its own, but I understand that is probably asking too much, for the time being.

I’m sure, you’ll receive lots of positive feedback. Well done!

Update: on the “Contact” sheet, make a click on the email-address open the user’s email program, and make a user’s click on your phone number initiate a phone call to you, to round the experience off.

[enric1994]

Thanks for this second round of feedback!

• I used a different palette in the “Coding Enthusiast” scene. Now it looks less saturated.

• Draco compression is INSANE! It turned 6.5MB into 0.9MB!!

• I tried SSAO but some artifacts appear on the edges (I tried multiple kernel size). Also, it hits the performance.

The project looks way better than last week but there is one big issue that prevents me from releasing it: the damping is moving the camera to the wrong location/rotation.

This only happens if you scroll up and down very fast or if your smartphone is old/slow. I checked the whole implementation of OrbitControls but I can’t find where the damping is messing things up.

Do you know of any JS library that can handle the scrolling alongside ThreeJS and Orbit Controls?

[looeee]

@enric1994

I tried SSAO but some artifacts appear on the edges (I tried multiple kernel size). Also, it hits the performance.

Yeah, SSAO is hard to tune. For better performance you can reduce the number of samples.

Why are you using OrbitControls? I can’t see anywhere that I can control the camera.

If you search for “JS scroll animation library” you’ll get lots of results. I think https://scrollmagic.io/ is the most well known.

[orion_prime]

use gsap or smoothen the scroll value in request animation frame to fix the scroll problem

[enric1994]

Hi @orion_prime, can you explain further? I tried the following and it reduces the camera offset a bit:

function requestRenderIfNotRequested() {
  if (!renderRequested) {
    renderRequested = true;

      setTimeout( function() {
  
          requestAnimationFrame( render );
  
      }, 1000 / 60 );
  
  }
}

Editing the requestAnimationFrame looks like an easy fix, I would like to try it before implementing ScrollMagic.

[orion_prime]

use clock.getDelta() in the animation to make speed constant on any refresh rate screen

something like this … the math might be wrong

scrollupdate(delta) {

       
        const accel = speed * delta

        smoothedScroll  += wheelY * accel 



        }

    }

similar logic used in three.js/webgl_math_orientation_transform.html at 00a692864f541a3ec194d266e220efd597eb28fa · mrdoob/three.js · GitHub

here they use quaternion.rotateTowards()

you can maybe use some math from here three.js docs

[hrgdavor]

Love the resume page, and also love the useful feedback here. Some pretty useful hints and observations

[jamie.games]

Solid! It looks great.

I might want to push back on “Enric Moreu” being in a low-poly 3D text, and then “AI & 3D expert” being smoother 3D text. I’m used to, and typically accept differences in header font, but this one might not work super well.

This isn’t a note, but a question: What’s you’re dogs name (featured in the coding enthusiast scene)?

[enric1994]

Thanks for the snippet @orion_prime! I tried to implement it with no luck. I found that limiting the framerate works in most of the cases (except when the users scroll up and down like crazy), so I’ll leave it like this.

Today I finally released the 3D resume on LinkedIn and people are loving it!
Thanks everyone for the feedback and support, this is indeed a great community.

@jamie.games My dog is called “Nana” (she is a girl).

[jamie.games]

Nana! Adorable. Any relation to the ice climber?

Also, congrats on your website doing well! Definitely well deserved, it’s really great!

[Drumstructor]

Hey!

Have you checked Firefox? I just see a black screen on Firefox 93 & 94… no errors in the console though…

[enric1994]

@jamie.games it is inspired in Peter Pan’s dog name.

@Drumstructor I just checked Firefox 94 again, it works on my machine

In this project I discovered how hard it is to make things work on all the platforms. Now lots of people in Hacker News keep complaining about the scroll (their fingers are tired on the second scene).
As a future note, I’ll try to avoid working with multiplatform scroll again. Scrolling depends on how your mouse is configured (number of ticks per scroll, hardware acceleration, etc), so it is very hard (I’ll say impossible) to satisfy 100% of the users. Don’t mess with scrolling!

[Usnul]

very well done! I like the art style

however, I do feel like the color palette is a bit too wide, it feels like except for the low-poly style and a recognizable figure in each scene, the overall consistency suffers greatly because of the wildly differing colors. I suggest picking a small palette for each scene, and keeping some consistency across the palettes, like having 1-2 accent colors that remain across all scenes.

Since you have a static scene, I would recommend bakind AO in blender, this will give your demo more definition and make it look nicer.

Another thing - scroll needs to be smoothed out. Add some kind of dampening there or just lerp it, it feels a bit jerky when I scroll, which hurts the overall experience.

[alex.bristow3]

Looks Fantastic. There will always be some changes you will think of that need to be made, or criticism by others. Find the useful ones, implement them, and ignore the ones that aren’t constructive. Copying your Github repo just so I can see how you implemented a lot of things I have been struggling with! Thank you for making it public <3