BezierView using WebGL

My lab (SurfLab) manages a program called BezierView which is used for rendering different kinds of Bezier surfaces (triangular, tensor-product, rational, etc.). BezierView has not been updated for a few years, so me and a few other colleagues decided to update the program using WebGL instead.

Now instead of downloading BezierView to your own computer and running a .exe file, you can just run it online through a webpage. You can find the still-being-updated version here. For now you can view tensor-product, triangular and rational patches along with polyhedra. It is being currently updated to include a better interface and to have support for all types.

There are some shortcomings to writing BezierView in WebGL – the most obvious one is that Javascript is much slower compared to C/C++. And the online version cannot handle huge files which the offline version can. And since WebGL is based on OpenGL ES 2.0, we cannot take advantage of the tessellator engine in modern graphics cards to evaluate parametric patches on the GPU (which results in a significant speedup). So all the evaluation is done on the CPU and the resultant vertices sent to the GPU. I guess we’ll have to wait for OpenGL ES 4.0 (or WebCL to be finalized – a Javascript implementation of OpenCL).

BezierView was developed using the excellent Three.js library. I highly recommend using it if you are developing a WebGL application.

The source code is available on GitHub.

You can find BezierView here.

Advertisement

Android OpenGL ES 2.0 – Shadow Mapping

NOTE: This tutorial builds up on my previous 2 tutorials: how to setup OpenGL ES 2.0 on Android and how to render to texture.

———————————————————————————————————-
I’ll first link to the apk, source code and the repository:
apk here.
Source code here.
Google Code Repository  here. NOTE: Branch is “shadowMapping”
———————————————————————————————————–

UPDATE:

Thanks to Henry’s comment below I was able to fix most of the artifacts showing up. Turns out I had dithering enabled, so I had to disable it to remove the dithering effect [ GLES20.glDisable(GLES20.GL_DITHER) ]. Updated images below – it works but has very slight artifacts when it comes to the mesh’s self-shadows.

Introduction:

Shadow Mapping is a popular technique for rendering shadows in games and other real-time applications. Given how GPUs on mobile devices (iPhone/Android/whatever) are getting more and more powerful every day I thought I might try implementing it on my Samsung Captivate (Galaxy S).

While my implementation “works”, it does not good look at all. Shadow-mapping is prone to many artifacts , which I wasn’t able to properly fix (UPDATE: Main artifacts fixed).I am posting this without the fix in the hopes that somebody can help me out too as to what I am doing wrong.

Here are the updated images (I changed the color of the plane to get a better contrast):

Textured Cube (with proper shadows)

Dragon Head

Octahedron

Here are the old images:

Octahedron Mesh (.OFF) with shadows + artifacts

Dragon-head Mesh (.OFF)

Textured Cube (.OBJ)

I would like to credit Fabien Sanglard for his shadow mapping tutorials which I used as a basis for my code. I looked at his DEngine code as an example. In any case let’s begin.

What is Shadow Mapping?

If you are reading this chances are that you already know what shadow mapping is and how it works, but let me give a quick overview of the steps involved:

Android OpenGL ES 2.0 – Render To Texture

NOTE: This tutorial builds up on my previous tutorial on how to setup OpenGL ES 2.0 on Android.

———————————————————————————————————-
I’ll first link to the apk, source code and the repository:
apk here.
Source code here.
Google Code Repository  here. NOTE: Branch is “renderToTex”
———————————————————————————————————–

Rendering to a texture is important when it comes to various graphics techniques and algorithms (Shadow Mapping, cube map generation, Deferred Shading, etc.) So this quick tutorial will demonstrate how to setup a texture for rendering (and then how to display that texture on screen).

What is rendered to the texture?
We are going to render the same objects as in the previous tutorial (where you can choose between gouraud/phong/normal mapping shaders). The texture is going to be a simple quad which will then be displayed on the full screen. I have a Samsung Captivate(Samsung Galaxy S) which has a screen resolution of 800 X 480, so I use those values as the height and width of my texture. Adjust accordingly to your phone (I was a tad lazy to read in the values from the system itself). Let’s begin:

Getting started with OpenGL ES 2.0 shaders on Android

Tutorials on how to write shaders for the Android platform are a little difficult to come by on the Internet, so I decided to work on a small but simple program which hopefully provides a simple framework to get started writing programs for OpenGL ES 2.0.

———————————————————————————————————-
I’ll first link to the apk, source code and the repository:
apk here.
Source code here.
Google Code Repository  here. NOTE: Branch is “default”
———————————————————————————————————–

Here’s what my program does:

• Mesh Loading:The program loads triangular meshes in these formats (as .txt files):
  • (.OFF): These consist of only vertex positions. My program will calculate per-vertex normals.
  • (.OBJ): Vertex positions, normals and texture coordinates are provided. Sample textured cube mesh was exported from Blender.
• Shaders:
  • Gouraud Shading: Per-vertex lighting [with texture mapping if enabled].
  • Phong Shading: Per-pixel lighting [with texture mapping if enabled].
  • Normal Mapping: Gives a fake appearance of depth to a mesh. Sample normal map included.

NOTE: If your program is crashing with glError 1281 and you have a relatively new phone (a Samsung Galaxy S2 for example), change all dot() method calls in the shaders to dot2().

How it works:

The program will only work if your phone supports OpenGL ES 2.0. If it doesn’t my program quits without a warning.

When the program starts you will see an octahedron mesh with Gouraud shading enabled. There is a light rotating around the mesh. You can use one finger
to rotate the mesh, and two fingers (pinch-to-zoom) to scale the mesh (though it’s not *perfect* ). Clicking the menu button on your phone allows you to:

• Toggle Light Rotation: Light rotation can be toggled through this option. A short ‘Toast’ notification pops up.
• Shader switching: Can switch between Gouraud shading, phong shading and normal mapping.
• Mesh switching: Can switch between an Octahedron, Tetrahedron (both .off files) and Textured Cube Mesh (.obj file).
• Toggle Texturing: Can turn off texture mapping if there is an associated texture with the object (only the textured cube mesh).