![]() When I originally learned JavaScript (in 1998 or so), there were no frameworks, and the DOM APIs were an incompatible mess. This is the first time I've used JQuery, and it is really a wonderful framework. The interactive component of the demo is done with JQuery. After that, you just call mesh.prepare() to set up everything and mesh.draw() to draw the mesh. Basically, you create a new Mesh or IndexedMesh object by giving a WebGL primitive (e.g., TRIANGLES), a shader, and dictionaries of uniforms, attributes, and textures. I encourage you to hit "View Source" in your browser and look at initTerrainMesh or initWaterMesh to see how these are used. texture.js - loads textures from images.buffer.js - manages vertex buffer objects.shader.js - extracts and compiles GLSL vertex and fragment shaders.camera.js - manages a camera which rotates around a sphere.matrix.js - a basic 4x4 matrix library with some useful transformations.They are BSD licensed, so feel free to use them in your own projects. Here are some links to the JavaScript files. I wanted to understand it better though, so I ended up writing my own framework. Most people use some kind of framework to interact with it. Unfortunately, WebGL is not a simple library to use directly. I also made the sand and grass textures in GIMP. The terrain mesh is just a grid of 2D points the Z coordinate is pulled out of the height map by the vertex shader. The terrain itself is drawn using a simple 256x256 height map I made in GIMP and a pre-generated normal map. You could probably simplify this by just using the water depth, but I think this looks better. The amount of fog is proportional to the underwater distance between the camera and the terrain. You can still see it if you turn off the water rendering. This is a fog effect computed when the terrain is drawn. ![]() You'll notice that as the water gets deeper, the terrain gets less visible. I ended up settling on a quick approximation using the sine of the angle. Although it gave physically accurate results, they didn't really look the way I wanted. I originally implemented Fresnel equations for this. This is done per pixel, and it takes the waves into account. The reflectance of the water is determined by the steepness of the camera angle with respect to the surface of the water. You could also use a skybox for this, but this works well enough for me. The reflection vector is used to access a regular 2D tiled sky texture. The fragment shader uses all eight rows to compute the normal and the reflection vector based on the derivative of the waves and the camera position. The water mesh itself is a 256x256 grid, which is not high enough resolution for smaller waves. The vertex shader uses the first four rows (big waves) to compute the height (Z coordinate) of the water at each vertex. Every parameter of every wave can be adjusted using the form above. ![]() The water is a simple sum of eight 2D sine waves. No Flash involved, no browser plug-ins required. What you see above is done entirely in HTML and JavaScript. Rotate the camera by dragging the mouse.I did another water simulation a couple years ago, but this one is fancier and completely interactive! Since I'm doing a lot more JavaScript stuff these days at work (I optimize the V8 JavaScript engine used in the Android browser), I figured I'd throw together a more elaborate WebGL demo than last time. The final simulation should look realistic and be performance-oriented so it can be used in large scenes.It's been a while since I played with anything graphics related. The simulation will depend on a graphics component called a shader that produces moving water and implements a water texture. This thesis will create a water simulation using WebGL and Three.js. WebGL is just a 3D drawing context that can be implemented on the web after the addition of the “” tag within HTML5. Web browser graphics is a field that has been growing since the launch of social media that allowed its users to play 2D games for free.Īs a result of the increase in demand for better graphics on the web, major internet browser companies have decided to start implementing WebGL. This move to the browser simplifies the life of the end user so that he does not have to install any additional software. Since this new hardware is available to the user, the easiest way to make graphics even more accessible to everyone is through the web browser. With all of this hardware progressing, it is also logical that users want software to evolve as fast as the hardware. Processors, memory, hard drives, and video cards are getting more powerful and more accessible to the users. Computers are getting better and better every single day. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |