Bilal Khan

A Creative 3D Web Developer with 8+ years of industry experience!
Our Agency Website:

[Bilal Khan @Bk23544]

@ameengl Thank you!
This is just a rough third person script I wrote to test out a character with grass interactivity. I’ll be making a proper scene once the grass plugin is in good shape.

[Bilal Khan @Bk23544]

Just added interactivity to the grass. It now reacts to the objects within the field.

It supports multiple objects at a time as well.

The current effect looks fine, but I might improve it a bit in future.

#threejs #webgpu

[Bilal Khan @Bk23544]

@shifatmasud Thank you!
The plan is to make it into a grass plugin for Three.js that developers can use in projects. So, for now it won't be open source but I will be sharing a playable demo very soon.

[Bilal Khan @Bk23544]

Just scaled my grass system to infinite scale.

Tile-based rendering, frustum culling, and 4 geometry LODs are all working.

It looks seamless with DOF but I need to work on crossfading LODs to make it look seamless without DOF.

Next up is terrain painting!

#threejs #webgpu

[Bilal Khan @Bk23544]

Ended up reworking the LOD system. Transitions are now seamless even without DOF, and performance is much better.

Also added per-blade frustum culling. It doesn't reduce vertex shader work, but it skips fragment shader work for culled blades. A nice win :)

#threejs #webgpu

[Bilal Khan @Bk23544]

@ameengl @threejs Looks amazing!

[Bilal Khan @Bk23544]

@Murugan_neo Thank you!

[Bilal Khan @Bk23544]

Been working on the lighting of my grass system. Previously, it was only some gradients.

Now, it works with Three.js lights. This allows to make many different kind of environments.

I have created a few presets, and it looks pretty good.
What do you think?

#threejs #webgpu

[Bilal Khan @Bk23544]

@Murugan_neo Not for now, I will be sharing a demo very soon

[Bilal Khan @Bk23544]

@mkcuriosity The plan is to make it a proper grass plugin for Three.js. So, it won’t be open source for now. But I’ll be launching a demo for it very soon.

[Bilal Khan @Bk23544]

@mkcuriosity Thank you!
Currently it’s able to render 1 million blades comfortably and even higher on better systems. But I’ll be improving the performance. The next to do is creating a LOD system to reduce unnecessary calculations. The plan is to scale it for fully fledged immersive worlds.

[Bilal Khan @Bk23544]

@Murugan_neo No, it’s not open source. It’s a work in progress. I plan to make it a proper grass plugin for Three.js. Follow me, I’ll be sharing regular updates regarding it.

[Bilal Khan @Bk23544]

Been rebuilding my grass system with R3F + WebGPU.

What started as a WebGL migration turned into a complete rewrite. Currently rendering 1M+ blades at 60 FPS on an M1 Mac mini.

The goal is a production-ready grass plugin for Three.js.

#threejs #webgpu

[Bilal Khan @Bk23544]

@rohit_jsfreaky Thank you!
That’s because the whole grass field is a single mesh.

[Bilal Khan @Bk23544]

This one is personal. After years of building immersive 3D experiences for clients, I knew our own website had to be something different. Not just a portfolio, but an experience.

Explore the website right now: https://t.co/fhrBpdt8n7
I would really love to hear your thoughts

[Bilal Khan @Bk23544]

@AliHaider_360 First person view is possible. But as of right now, I have no plans to add it to the website. As that would keep the user off the track instead of a guided experience.
In future, if I find a better use case, I would definitely look into adding a fpv and a VR mode.

[Bilal Khan @Bk23544]

I just completed my new personal 3D portfolio website. This is a scroll experience that takes you through a room. I have tried my best to incorporate many elements into it that tell you a lot about me.
https://t.co/TlPDbsqcoq

Would love to hear all your opinions!
#portfolio

[Bilal Khan @Bk23544]

First Gotham Knights, Now Plague Tale: Requiem. These developers need to stop with these unoptimized games. We have seen much better-looking games running smoothly at 60fps on next-gen consoles.

#Boycott30FpsTitles
#GothamKnights
#APlagueTaleRequiem

[Bilal Khan @Bk23544]

It's time to upgrade your website to 3D!!! https://t.co/2nU8YLs3GN

[Bilal Khan @Bk23544]

@Cryptobam_ @FungibleApp Hi @Cryptobam_
I am a WebGL developer specialized in Threejs and Babylonjs. Feel free to share the details :)