How to realize the thermal diagram of human body?


Hello this could be a simple Node material with a gradient color

Doc: How To use the Node Material - Babylon.js Documentation


Thank you. The link you provided is very good, but I want to change the color of a certain part precisely, such as the shoulder

The maybe you will prefer using vertex colors. You can set a color per vertex

1 Like

Or… heh… just like another nearby issue… you COULD use colored lights (tiz the season). :slight_smile:

Let’s pretend a material is allowed 10 simultaneous lights. One could be a hemispheric light with groundColor… to light whole scene. That still allows 9 more colored spotLights… all of which can change colors, radius, intensity, range, fallOff, etc.

Easy, powerful, controllable. :slight_smile: (Wingy is a BIG fan of BabylonJS lights… they are sweet!) (9-light playground - gruesome!)

I don’t know how to soft-edge the spotlights, yet… but I haven’t really tried-to.

1 Like

Can skin be colored based on bones? For example, find the bone at the shoulder, and then color the skin of the human body at the corresponding position, but I’m not sure what to do

Pardon my interruption again, please.

I took it further. Lines 220-248… various little spotLight property animation utils.

Lines 289-297… a “script” to run those animations… at various “times” (after scene starts). Total animation run-time on light00… about 30 seconds.

It is only animating/adjusting light00, and NOT its wireframe cone. No other lights are involved. For final result, all mesh light-cones would be gone or invisible.

Simply 8+ invisible spotlights… to light-up 8 different areas of the body… in any colors/ways, all at the same time, if wanted. Fun! Stage-Light-Show Event-Sequencer Toolkit v0.1 :slight_smile:

I wanted to further test the viability of using lights for heat-zones… so I did. I was particularly looking for gentle lights… and soft edges… and the potential for pulsing intensities. I didn’t try any pulsing… but with the right animation routines… it should be easy.

shrug. Just testing… having some fun. :slight_smile: Sorry if I am being a bother.

1 Like

No, you didn’t disturb me. Your case is very good. For me who just contacted Babylon, you are all my teachers

How can I make my clothes look more real in Babylon? I use standardMaterial now, but it doesn’t feel very real

For fabric, the best idea is to use PBR with sheen:


Thank you very much. I’m a novice. I don’t know much about Babylon. Maybe it helps me a lot

What should I do to lengthen the second half of my dress?

Well can you elaborate a bit more? Please provide a repro in the Playground if you can
How to use Actions highlight a Mesh,when mouseover?

Hi x. Here is a playground demo for actionManager pointerOver/Out, and highlightLayer methods…

Did you solve that? Can you import the dress model into a playground scene… where we can all see it and do some tests? This is what Deltakosh means… when he says “Please provide a repro in the Playground if you can”. ALL of the forum helpers… can be better helpers… if we can see/test your dress… within a playground demo scene.

Often, 3d models like dresses… are created and easily modified within modeling software such as Blender. YouTube

Mostly, BabylonJS is a model-DISPLAY system, and not a model-CREATION or model-ADJUSTING system. BabylonJS and webGL… is for using/showing 3d models in web browsers.

BabylonJS DOES allow scaling (stretching). See line 51 in THIS playground:

Scaling the Y-axis of your dress to make it longer… might not look/work as you wish. You might need to modify the dress in Blender or other modeler software. I hope this helps.

Topic changed from thermal diagram… to dress lengthening… to pointer over/out highlighting. Fast-changing topic. :slight_smile:

Likely, that would be very difficult. Probably not a task for beginners. Study skinning and weightedVertices and bone transformations… Blender/modelling things like that. I have used BabylonJS for 8 years, and your “colorize skin near bones” - idea… still scares me. :smiley:

Again, BabylonJS is more-about displaying models, and not-so-much-about creating/modifying models. BJS CAN create and modify models, but it is not a “friendly” system for beginners. You must learn about vertexData and how to use the Javascript function calls to get things done. It takes time and reading and examining the playgrounds from others.

Party on, keep smiling. Steep learning-curves only hurt for a LITTLE while. :slight_smile:


You could probably do that by implementing a shader yourself (have no idea if a node material could do that already).

Check Babylon.js/bonesDeclaration.fx at master · BabylonJS/Babylon.js · GitHub. I think what you want is to calculate a color on your fragment shader using the matricesIndices and possibly matricesIndicesExtra that are available on the vertex shader. So something like this:

  1. write the GLSL code yourself and make sure you #include whatever you need from the I imagine you need at least the bones*.fx. You can start from the Babylon.js/default.vertex.fx at master · BabylonJS/Babylon.js · GitHub if you need a base.
  2. save the matricesIndices variable on the vertex shader to a varying var, so you’ll get access to it on the fragment shader. You may need to save NUM_BONE_INFLUENCERS to a variable too, not sure if the #ifdef is available only on the vertex shader.
  3. on the fragment shader, use the information from the matricesIndices to color code. You’ll probably want to assign a different color to each bone, and I think you could mix them by re-calculating the individual influence (or saving it from the vertex shader) and mixing the colors proportionally.

Hope that helps.


I’m sorry to bother you gods all the time. I just learned how to share my playground with others yesterday, but I still don’t know how to upload my. Babylon file to the playground. Where can I find the place to upload the file?

Hi x. You’re not a bother, and thx for the concerns on that. You’re just… enthusiastic. :slight_smile: It’s a good thing. Changing topics in the middle of threads… that’s understandable, too. The topic is actually… “Things About Xiaohuangyu’s Project”. :slight_smile:

We forum helpers have seen this before… and it keeps us on our toes. :slight_smile: It’s all good, but separate question-threads for separate topics… sometimes makes it easier for future users to find answers to same questions. But we have a good forum search engine, and it can find anything, even in a snowstorm. :slight_smile:

Regarding loading .babylon files and other off-site resources into playgrounds… we have docs for that:
Using External Assets - Babylon.js Documentation (thx docs team) The objective is to (temporarily) “publish” your .babylon file… to a place that is “CORS-clear”.

I have, and I publish-to… a free github account. I think ANYONE can have one. See this playground. It uses a strange-looking URL in the sceneLoader line… to retrieve a .babylon file from one of my github folders. (notice the URL is different than the one used in the playground).

I dragged-dropped that .babylon file into that /misc folder’s webpage (and then clicked the “Confirm Changes” at the bottom of the page)… from a folder on my home computer. It was quite easy.

Doing that… uploaded/published the file into that /misc folder. After that… the file became accessible from the playground… via using that special type of URL. GitHub folk have been very kind to me… never bitching about me… being a “free storage pig”. :slight_smile:

All in all, read those docs… they will tell the story. Party on.

@brunobg - excellent beefy post! Phew… nice. You’re a GOD! :slight_smile:

1 Like

Thank you for your teaching. I spent an hour building my GitHub warehouse, and successfully generated a URL. Finally, my file was displayed on the playground,,thank you very much

1 Like
This is the highlight effect I want to achieve finally. At the same time, I also want to stretch the clothes. For example, the length of the clothes is 165cm. I want to make them 175cm clothes, and the clothes are not that strange deformation. I know blender is easy to achieve, but I want to achieve it in babylon.js

1 Like