1
$\begingroup$

This may be a dumb question because I'm a complete novice to graphics programming.

I was on the website of Github Copilot today and I noticed that there's a floating head that follows your mouse cursor around. It appears its reflecting static light sources around it, but I'm not sure if these are true reflections or are simply painted on.

You can find the floating head at this URL:

https://github.com/features/copilot

I was going to attach a screenshot of it but it appears that the editor won't let me.

Improve this question
$\endgroup$

1 Answer 1

Reset to default
2
$\begingroup$

No.

Unfortunately, the links I was going to post are dead (maybe, direct access is prohibited by Github), so I'll just go with images.

It is implemented by ray casting, which can be regarded as a simplified version of ray tracing. You can actually inspect the element in your browser with ctrl + shift + C if you are in windows:

The material used (part):

copilot head material

and I believe this is the environment map:

env map

The model is rendered with three.js r148 engine:

element view

If you search for "copilotHead" in the assets of the website, you will find the rendering logic you need in copilotHead.ts, shader/matcap.ts (fragment shader) and shader/mesh.ts (vertex shader). shaders

Improve this answer
$\endgroup$
1
  • $\begingroup$ Wow! Thanks so much for this insight and answer. I had no idea this was possible within websites. $\endgroup$ Commented Sep 15, 2024 at 16:41

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.