Kelvin van Hoorn
@kelvinvanhoorn.com
1.2K followers 620 following 120 posts
Experienced Technical Artist 🧙 MSc. of Applied Physics 🧲 Working on something 👀 Loves stylized rendering 🖌️ Portfolio/Website: http://kelvinvanhoorn.com #GameDev #Godot #Shader #Unity #VFX #TechArt #TechArtist
Posts Media Videos Starter Packs
Pinned
kelvinvanhoorn.com
Hey, I'm Kelvin a Technical Artist from the Netherlands 🇳🇱, currently based in the UK 🇬🇧

I make shaders from time to time, you can check some of my previous work, including some tutorials, on my website: kelvinvanhoorn.com

You can also find links to my other socials there.
kelvinvanhoorn.com
Many of the changes are inspired by this great blender tutorial by trungduyng www.youtube.com/watch?v=M4kM...

Also some screenshots, for if the video gets pixelated.
Screenshot of stylised grass. Screenshot of stylised grass.
kelvinvanhoorn.com
Been working some more on the grass
🔸BotW style diamond shape mesh
🔸Fixed normals and lighting
🔸Wind rotation instead of translation
🔸Improved wind noise (big wave, small noise)
🔸Improved clustering textures

#screenshotsaturday #Godot #GodotEngine #shaders #rendering
Reposted by Kelvin van Hoorn
kelvinvanhoorn.com
Trying out 2 different approaches to leaf rendering on trees.

The first is a custom mesh, where each quad of the mesh is extended along the normals.

The second is are multimeshes of quads, where the normal is based on the vertex position relative to the center of the multimesh.

#GodotEngine
kelvinvanhoorn.com
Looking at Tiny Glade by @pouncelight.bsky.social (another inspiration for the billboard approach) I think they simply don't billboard (nor alpha clip) for the shadow. Which works great from a distance, but I'd like the texture.

Screenshot from this amazing talk: www.youtube.com/watch?v=jusW...
Screenshot from Tiny Glade showing a tree with billboarded leaves and a smooth shadow.
kelvinvanhoorn.com
#1 was inspired by this tutorial www.youtube.com/watch?v=flbn... by @polytoots.bsky.social

#2 was inspired by this tutorial www.youtube.com/watch?v=52sT... by trungduyng
kelvinvanhoorn.com
While I like the visuals of #2 better, it has issues with shadows. In the video I have shadow receiving turned off for it.

With shadows you either have them billboard to the light which causes sharp edges on the leaves or you billboard them to the camera which destroy the projected shadow.
Screenshot where the leaf billboards also to the light camera, resulting in sharp edges where the shadows cast on the rotating billboards. Screenshot where the leaves always billboard to the main camera (not to each individual camera such as the light camera). Which means your projected shadow dissapears if the camera is orthogonal to the light.
kelvinvanhoorn.com
Trying out 2 different approaches to leaf rendering on trees.

The first is a custom mesh, where each quad of the mesh is extended along the normals.

The second is are multimeshes of quads, where the normal is based on the vertex position relative to the center of the multimesh.

#GodotEngine
Reposted by Kelvin van Hoorn
charlesboury.fr
Hi, I'm an Art Director & 3D Game Artist
Available for hire 👐

I worked on award-winning stylized games
Looking for the next project I can contribute to 👀

Please reach out!
💌 [email protected]

RT appreciated ✨
Screenshot of Caravan SandWitch - an openworld narrative exploration game made with a team of ~10 people Characters Concept Art - the nomads of Caravan SandWitch Storyboard for a key scene in the game "The Wanderer - Frankenstein's Creature" Menu mockup for the game "Road 96"
kelvinvanhoorn.com
For future reference, I got out my matrix multiplication skills to find the near plane:

-(INV_PROJECTION_MATRIX[2][2] + INV_PROJECTION_MATRIX[3][2]) / (INV_PROJECTION_MATRIX[2][3] + INV_PROJECTION_MATRIX[3][3])
kelvinvanhoorn.com
Unfortunately not, because the red that you see from outside is still the backface. But because the depth test is inverted it will always draw in front of other objects.

I tried masking it with stencil, but as far as I can see there is no way to mask the outside, without also masking the inside.
kelvinvanhoorn.com
Just adding those lines works surprisingly well. It will need some tweaking but looks promising 😀

```
vec3 view_vertex = (MODELVIEW_MATRIX * vec4(VERTEX, 1.0)).xyz;
view_vertex.z = min(view_vertex.z, CAMERA_NEAR);
VERTEX = (inverse(MODELVIEW_MATRIX) * vec4(view_vertex, 1.0)).xyz;
```
kelvinvanhoorn.com
So the main shader draws both sides (which is the white stuff).

The "next pass" shader only draws back faces and has the depth test inverted. The reason you can see it outside the cloud is because of the inverted depth test. It draws whenever there is something between it and the camera.
kelvinvanhoorn.com
What I was trying was a second pass with the front culled and the depth test inverted. Which works great on the inside, but not so on the outside for any object in front of it 😅

(the red is the second pass, if it worked I would use the depth again to colour it).
kelvinvanhoorn.com
That's a cool approach, I hadn't thought about pushing the vertices away from the camera. Will definitely do some tests with it.

Though as you state the models would need to limited in some way so that you know when to stop pushing the vertex.

Not knowing the thickness makes things a lot harder 😩
Reposted by Kelvin van Hoorn
kelvinvanhoorn.com
Made some low hanging clouds shader that you can walk into ☁️

Now only to find a way to handle the inside of the cloud 😶‍🌫️

Shader only approaches thus far haven't worked, might need to add areas and detect when the camera enters it 🤔

#screenshotsaturday #GodotEngine #shader #rendering #clouds
kelvinvanhoorn.com
Screenshot for higher resolution
Screenshot of rendering test scene with some blobby low hanging clouds.
kelvinvanhoorn.com
Made some low hanging clouds shader that you can walk into ☁️

Now only to find a way to handle the inside of the cloud 😶‍🌫️

Shader only approaches thus far haven't worked, might need to add areas and detect when the camera enters it 🤔

#screenshotsaturday #GodotEngine #shader #rendering #clouds
kelvinvanhoorn.com
You can find more about the Central Difference method here (iquilezles.org/articles/nor...), specifically the one for terrain.

And some screenshots of the water.
Screenshot of my render setup with water in the background. A more birds eye view of the water, showing a larger area.
kelvinvanhoorn.com
Got some very simple water going for in the background 🌊

It's a relatively simple shader:
- Create heightmap by sampling a noise texture twice
- Lerp color depending on height
- Calculate normal using Central Difference
- Use derivatives from CD for foam mask

#GodotEngine #Rendering #Shader #Water
kelvinvanhoorn.com
Simplified the lighting and added colour variation to better suit the art style.

Changed the diffuse into just attenuation (no normal based lighting) and removed the shadow casting to reduce the value variation and flickering in the grass.
A render of grass lit in a toon style.
kelvinvanhoorn.com
The video is quite blurry, so have this screenshot as well.
Screenshot of grass rendering on a white plane.
kelvinvanhoorn.com
It sure is windy here 🍃

Rendering is based on this great tutorial (hexaquo.at/pages/grass-...) by @hexaquo.at

Placement is done with ProtonScatter (github.com/HungryProton...) by @hungryproton.bsky.social

#GodotEngine #IndieDev #shader #grass #rendering
kelvinvanhoorn.com
This is such a good video on Hollow Knight's art, and just art in general. It's criminal that this is @soarinflyin.bsky.social's only video 😭

youtu.be/xlK8lNyQ8rg?...
Breaking down the art style of Hollow Knight
YouTube video by Soarin
youtu.be
Reposted by Kelvin van Hoorn
starbi.dev
john cat's breath of the wild moment #gamedev