science museum 3d drawing pad

Museum 3D

Adult a virtual museum with JavaScript and WebGL as a figurer graphics class project in a squad of 3. Cited by Professor Ridge at Web3D 2022 Conference as an example of "active textbook". Implemented avant-garde graphics features such as SkyBox, Water, and Mouse Picking.

Demo (Recommend Chrome Browser)

Summary

Non-obvious things implemented

For non-obvious things implemented, please checkout Advanced Graphics Features section beneath. The section has pretty much everything we implemented including obvious ones and not-obvious ones.

Diffuculties

Junhong Wang

Everything was hard to be honest. The hardest one was water because I had to take care of reflection, refraction, and normal. It is very computationally expensive too, and then I had to optimize the lawmaking so that it simply draws the water if the player is close enough to the location of water.

Jonathan

The hardest part is proabbly creating the Particles Organization class, since each particles must hold their own physcal backdrop that determines its side by side potential positision and velocity. the showtime build upwards Partical Organisation Class often crashed or made the blitheness frame very boring. But with the aid of Junhong, the System's preformance has a significant improvement.

John

Without using the surface of revolution, it'south actually hard to model the low-cal bulb with a few shapes like sphere, square, donut,...

Advanced topics used

For advanced topics used, please checkout Advanced Graphics Features section below. The section has pretty much everything nosotros implemented including obvious ones and non-obvious ones.

Teammates' contributions

Junhong Wang

• Skybox
• 1st / 3rd person view camera
• Water
• Minecraft person
• Mouse picking
• Terrain
• Mirror
• Torch (Particle System)

Jonathan

• Partical System
• Partical
• FireWork

John

• Light Bulb (Surface of Revolution)
• Lighting effect

Introduction

Nosotros created an virtual museum with webGL. Within the museum, there will be something visually pleasing implemented with avant-garde graphics features. Equally a thespian, you lot can walk into the museum, and see something like this.

This is from Teamlab museum in Tokyo. A actor tin can also interact with the arts. For instance, clicking one of the low-cal bulb above changes the color of that light seedling.

Advanced Graphics Features

Here'southward the list of advanced graphics features we implemented

• Skybox
• 1st Person View Photographic camera
• 3rd Person View Camera
• Water
• Minecraft person
• Mouse Picking
• Particle Effects
• Terrain
• Mirror
• Modeling Light Bulb
• Particle Effects (Torch)

Skybox

The idea of skybox is that we create a box with sky textures on it. Each side of the box has a corresponding texture (i.e. superlative, bottom, right, … etc)

The key point here is that we apply all the transformations just similar any other objects in the world except nosotros don't desire to utilize the translation of the photographic camera. Nosotros desire the sky to motion with the thespian.

1st Person View Camera / 3rd Person View Photographic camera

The original implementation of the photographic camera always translate and rotate with respect to electric current orientation of the photographic camera. We wanted the camera to behave similar to the mode it works in Kickoff Person View Shooting Game (eastward.1000. COD).

Minecraft Person

It works just like the dragonfly assignment.

Terrain

Terrain is made of bunch of squares.

And so we tin height map to assign heights to each vertex of the terrain. Interporation takes care of the residue.

The darker the color is, R _ G _ B gets closer to null, and thus the height is low. The whiter the color is, the height is high.

Water

The simplest water is just a flat plane colored with bluish. Only that'due south boring. To make it more than like water, we can add together reflection and refraction textures. But how practice we do that? We essentially need to draw the scene from dissimilar camera positions, and take a snap shot of the scene.

Now we can see reflection and refraction textures on the water. But no thing where the camera is, the ration of reflection and refraction looks the same. In reality, the water refracts more when we are on meridian of the water. The water reflects more than when we are on the side.

So we can do is to change the blending gene of the reflection texture and refraction texture based on the location of the photographic camera. We can do that by taking the dot product between the water-to-camera vector and water-normal vector.

To make it even more real, we can add dudv map of the water. DuDv map stores directional information about how much we want to distort the texture.

The color of the dudv map is more often than not reddish and green because red represent distoriton in ten direction, and green represent distortion in y direction.

Finally we can apply normal map to the water to run into diffuse and specular lighting.

Mirror

Mirror works just like the h2o except there is no refraction and distortion. Only a pure reflection.

Mouse Picking

The idea of mouse picking is that we want to convert 2D mouse coordinates back to 3D world coordinates.

To do so, we will demand to invert the whole graphics cartoon pipeline to catechumen mouse coordinates into a ray vector that points from the location of the mouse to the scene.

After nosotros obtain the ray vector, we tin calculate its intersection with sphere in the 3D scene.

Nosotros approximated our lightbulbs equally spheres and check information technology the ray intersects with a lightbulb.

Particle Effects

A particle is really just a 2d square in a 3D scene. To make it look like information technology'south in 3D scene, the particles have to always face towards the photographic camera. To practice this, we can just apply model transform such that it cancels out the camera rotation. To animate the particle, we accept to carefully choose the texture over the lifetime of the particle.

We tin can choose which texture nosotros want to use by computing the ratio of elapsted time of the particle and its life length. To achieve a smooth transtion from one texture to another, we can blend the electric current texture and adjacent texture.

FireWork

A firework is an interesting appliction that used the Particle effect from both the Partical and ParticalSystem course, such that each Firework object will have their own partical system that ueses a unique shape and texture. Featuredwise, in each frame the user will exist able to burn down some fireworks and oberserve the difference apperance of the fire work and colour from all kinds of angle.

Modeling Calorie-free Bulb

We use the surface of revolution to model light bulbs past passing a list of vertices to the constructor. We then make a rope to hang each light bulb by scaling a cube vertically. Also, we create a variable called 'modifier' which changes the ambience value over time. When nosotros draw each calorie-free bulb, we would apply this 'modifier' to override of the color of the low-cal seedling. Hence, when nosotros draw a bunch of light bulbs at random locations with random colors, we would produce a lighting issue.

buffumpoted1953.blogspot.com

Source: https://github.com/ioneone/Museum-3D

Share this post