The confusion of WebGl Shaders:

After following a few tutorials multiple times and backwards engineering the three.js example I have got an avatar I am fairly happy with, at least for now. I may return to it later to improve it, the following is what I’ve got so far:


The colour will change at run time, the colour of the object devoured by the user will influence the avatars colour. through the variable I’ve set up and will be able to change on the fly:

“var avatarColour = 0.6;”- “uniforms.color.value.offsetHSL( avatarColour, 0, 0 );”

Also the velocity of the wobble/ripple effect will be effected either by the movement velocity or on collision I haven’t decided yet.

This will be done through the AvatarMassDensity variable i’ve set. In the animate function it is applied to the shaders uniforms: “uniforms.amplitude.value = AvatarMassDensity;”

The avatar looks very stationary at the moment, when the user moves the avatar there is no indication of the movement other than moving past other objects in the scene.

As you can see in the background of the above image, I have also used a very simple shader to map a jpg file of the milky way to the inside of a very large sphere to use as a skybox. The skybox’s position is updated each frame to be the same as the avatar’s position so you will never meet the edges of the skybox.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s