Bump mapping

[NegativeIQ]

Im trying to chose between three.js and babylon.js and i was looking at three.js tutorial on how to make earth (planet)

http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/

 

Its a very nice but i tried to do the same thing with babylon just to check both and got stuck with bump map.

At the moment i have these

 

var Earth = BABYLON.Mesh.CreateSphere("sphere", 100, 10, scene); var materialEarth = new BABYLON.StandardMaterial("texture1", scene); materialEarth.diffuseTexture = new BABYLON.Texture("./assets/earth/earthmap1k.jpg", scene);materialEarth.bumptexture = new BABYLON.Texture("./assets/earth/earthbump1k.jpg", scene); Earth.material = materialEarth;

 

In three.js from tutorial i can see that there is bumpMap and bumpScale.

bumpMap in babylon is bumptexture but i could not find bump scale.

Also when i create sphere with babylon its gloving and reflecting light. How can i get rid of these effect?

[Wingnut]

Hi NegIQ!

I made a little playground demo...  http://playground.babylonjs.com/#1PGAVW#1

First problem, in your code above...  bumptexture is typed wrong.  It needs to be bumpTexture... a capitalized first T.

Study my playground carefully.  Make adjustments and hit RUN, over and over, have fun.  There is no chance of harming/overwriting anything... when working in the BabylonJS Playground.

The glow/reflection you mentioned... is called 'specular'.  You can adjust the specular of the lights (lines 7-8), and you can adjust the specularColor and specularPower of a mesh material (lines 20-21).  Generally, specular amount becomes less... with colors closer to black... and a pure black color will shut it off.  Also, setting a specularPower of about 1000... might also turn-off specular (line 21).

For scaling, please know that all BJS textures (and their superClass baseTexture) have lots of settings on them.  Two of them... are uScale and vScale (line 26/27).  Just pretend that the u, v, and w  actually mean x, y, and z, because they actually do. 

See how to set a texture's level (line 25), and how to angle, offset, and wrap textures (lines 28-35).  Now you have lots of bumpTexture knobs to play-with.

I/We use the word 'reflection' often, but it really should be called 'specular'... because... we have something called a reflectionTexture, too, and we could get confused.  And there's a specularTexture, too. 

BJS StandardMaterial has 'slots' (properties) for diffuseTexture, ambientTexture, opacityTexture, reflectionTexture, emissiveTexture, specularTexture, bumpTexture, ambientColor, diffuseColor, specularColor (with specularPower), and emissiveColor.

Let's face it.  We got a texture or color for every darned texture/color "slot" found on a standardMaterial.  More power than you can deal-with, eh?    We love it.  The power of BJS Materials/Textures is second to none.  We also have procedural textures and shaders, too.  We recently got our first Mandelbrot fractal code, too (a bit slow-drawing), and someone will soon apply fractals to one of our dynamicTextures (a texture drawn with JS code).  

Also, our VolumetricLightScattering (godrays) system... uses a texture (mounted to an emitter mesh) as its post-process sim-u-light 'source', and our texture decal system can simulate image compositing.

You name it, it's here, somewhere.  Hope this helps.  Be well.

[gryff]

Hi NegIQ - welcome to the BJS forum.

 

Wingnut, as usual, has created a nice playground demo for you.

 

That said, let me ask a question. Are you using the same images as the tutorial you point to is using? The same bump map texture - which is a grey scale image ?

 

It is my understanding that BJS actually uses normal maps for bump map texturing. See image below for an example of what a normal map of the earth might look like.

 

From wikipedia:

 

The other method is to specify a normal map which contains the modified normal for each point on the surface directly. Since the normal is specified directly instead of derived from a height map this method usually leads to more predictable results. This makes it easier for artists to work with, making it the most common method of bump mapping today.

 

 

Have no idea what the use of a grey scale image as a bump map will have with BJS.

 

If you need to create a normal map for your project you might try using this tool - Normal Map Online

 

Just feed it your diffuse image - it will create normal, specular and ambient occlusion maps.

 

cheers, gryff