Examples of WebGL that enables realistic 3D representation such as Miku Mikudance, ripples, masks, etc. Various

You can express 3D graphics on a browser basis, such as dancing Hatsune Miku and reproduction of realistic water surface watching as real thingWebGLAttention has gathered. I tried a couple of sites that can see Web GL that is so real that I can not imagine being drawn in real time.

MMD on WebGL
http://blog.misanyan.com/mmd.js-master/index.html


MMD on WebGLIs a site that can drag Miku Mikudance (MMD) dancing Hatsune Miku dirtily. When you open the site, the appearance of Miku drawn with full 3D CG and the operation method etc. are displayed. The operation was to move by using the cross key or space key on the keyboard or by dragging with the mouse.


So as I got Miku to dance, I chose to move it slowly. Although it makes a little chaotic movement due to the screen capture convenience, the actual movement is smoother. BGM does not flow is a specification.

I tried moving the Hatsune Miku dancing with "MMD on WebGL" - YouTube


By right and left key of the keyboard and mouse drag, Miku rotates left and right.


It is also possible to rotate the Miku back and forth by operating the up and down keys.


It is also possible to adjust the distance in the fore-and-aft direction.


Since it was drawn with full 3D CG using WebGL, it was possible to move to any angle, front, back, left, right, top and bottom, and any angle.


Depending on the angle and movement ... Please enjoy it freely.


Although it is WebGL which can express a variety of expressions like this, it can be adopted for various purposes depending on how it is used further. For example, the followingAikeOn his page, analog synth has been reproduced, and it is also possible to actually play. (Google Chrome recommended for viewing)

I got a good synth on WebGL - aike's diary
http://d.hatena.ne.jp/aike/20150125

What is being reproduced is a monophonic (analog) type analog synth. It is also possible to install two oscillators and change the sound by actually operating various filters and effects.


This movie is what I actually played. The tone of "analog synth" indeed is something irresistible for people who like it.

I actually played on "WebAudioSynth V2" - YouTube


Code is also published on GitHub.

Aike / webaudiosynthv 2 · GitHub


On the following page, water movement is simulated with WebGL. It is drawn in real time, and it is possible to shake the water surface with a mouse and drop a white ball to make a ripple.

WebGL Water
http://madebyevan.com/webgl-water/


In addition, since the above-mentioned page is required machine power as it is, if it is difficult to display it, you can see the movement on YouTube below.

WebGL Water Simulation - YouTube


On this page, Mozilla's WebGL-based game engine "PlayCanvas EngineIt is possible to see the image of " You can see expressions that change according to the background etc. with video based on physical-based rendering.

Physically Based Rendering comes to WebGL | PlayCanvas
http://blog.playcanvas.com/physically-based-rendering-comes-to-webgl/


According to the circumstances, the color of the mask changes naturally. Real-time rendering is a representation of a detailed image that can not be thought of.


And somehow the ultra-realistic eyeball moves around like this. The realistic texture which is supposed to be "ょ っ っ" is reproduced.

Eye texture raytracing demo
http://www.vill.ee/eye/


It is also possible to change the color of eyes by taking advantage of the expression power of WebGL. This is the state that changed the color to "Green".


"Cyborg" changed to an eyeball like a robot indeed.


Although it is WebGL that can express such a variety of colors in this way, it is not necessarily used for video works. On the following pages, examples of application as a 3D browser interface using WebGL are cited, and you can try to see how it moves expressively when putting a cursor on each icon.

Demo3d
http://glecollinet.github.io/webgl-demo/#


In this way WebGL, which has been experimented with various usage methods from video expression to interactive UI, seems to have many possibilities still.