cirocosta / utea

Toy WebGL 3D Engine

Utea

A toy WebGL 3D Engine (with basic 2D support)

⚠️ Under heavy construction 👷 🚧

Messing around

The examples are currently available at http://cirocosta.github.io/utea/example/. Go check them out!

If you wish to run the project locally:

$ npm install

# start webpack's dev-server
$ npm run start

# now you're ready :D
# go to http://localhost:8080/example/  or http://localhost:8080/webpack-dev-server/


# OR, build the project's examples and start your own
$ npm run build
$ python -m "SimpleHTTPServer"

# server started, now just
# go to http://localhost:8000/example/

If you don't know what npm is all about, check the next session.

Beginners Guide to Install

This project depends on NodeJS for transpilling the code without the need of a browser to run the Javascript transpiller. NPM is the package manager that allows us to distribute only the project's source code without the need of packing all the dependencies together. The development and general dependencies are explicited in ./package.json.

After you've installed NodeJS and NPM then you're able to clone the repo (git clone [email protected]:cirocosta/utea.git) and run that code above. After npm install is executed all of the dependencies will be downloaded. npm run start will run the script to set a webserver and let you dig into the generated code locally at http://locahost:PORT/.

IMPORTANT: npm run start and npm run build will fail in Windows as it exports NODE_ENV variable to set the proper build through export command (which i don't believe is available in windows - not a windows user here).

Samples

LICENSE

GPLv2. See ./LICENSE.

utea's Issues

Multiple Contexts

So, as i've mentioned in #1 , we should let the user need to grab the WebGLRenderingContext JUST when it needs to, and not everytime to pass to a constructor or something like that (which, more than annoying, is a pretty bad design).

The first idea regarding how to improve this was: let PaintBoard class hold a context (once created) and then bind all the other objects with this context.

But, would this work nice with multiple contexts?

---

use this issue to make some thoughts explicit

[Curves Demo] Arcball rotation for the surface

Logo!

I was thinking a bit about a logo for the project this afternoon and the idea that i came up with involves a bunch of work but might result in an amazing thing.

The idea that i have is:

1. Extract bezier curves descriptions from a truetype font (maybe sending to inkscape and them getting the svg description, or gimp, idk)
2. Describe a shape for extruding the curves --> let it be in meshgrid
3. Create a 3D Scene that disposes the text in a cool way
4. Add a mango to the scene
5. Render!

---

This aligns well with one of my particular aims for this project: solving the programming assignment that i have to do for my computer graphics class, which is all about modelling extrude shapes, bsplines and RaGs and then visualizing the result (doing these three things in 3 separate canvases).

Bitmap Fonts w/ Distance Fields

This is the easiest way to get fonts to work in opengl. So, as a first implementation, do the naive way. After that we could jump into something better: distance fields fonts. (see http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf)

There's a great illustration of the concept in this video: https://www.youtube.com/watch?v=CGZRHJvJYIg

Reimplement Sphere

The current implementation of geometries/Sphere is shameful. It only defined some points in space that we can't draw properly if we wish anything like a real mesh.

Also, supporting depth-dependent subdivision* would be pretty cool.

• faces
• normals
• uv
• *parametric subdivision

---

Resources:

• http://blog.andreaskahler.com/2009/06/creating-icosphere-mesh-in-code.html

Arcball

UPDATE

*SEE #7 *

• ArcBall focusing on an object
• ArcBall for Camera movement

Implementation

1. acquire the position of the mouse as if it is inside our world (unproject and then perform those inverses that takes it from screenspace to worldspace)
2. generate the ray of the click (point - camera.position, which, parametrically thinking, generates the line: f(t) = camera.pos + t*(point-camera.position).
3. find the intersection between the ray and the sphere around something (an object or the camera per se)
4. rotate the corresponding amount.
   • we have an starting vector (when mousedown event triggers) and an ending vector (when mouseup or mousemove triggers)
     • determine the axis of rotation (just take the cross prod between them)
     • determine the angle of rotations (take the dot product and do the inverse math)

Consider using JS Standard

So that we don't need to worry about style in the future

https://github.com/feross/standard

Support Pointer lock API

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

Very handy. Should we support this directly in the PaintBoard (just like other key bindings, etc) or in a separate controls module?

• Separate utils properly: /utils/controls/...

Lights

Types

Lamp is an omnidirectional point light source, similar to a light bulb.
Spot is a directional point light source, similar to… a spot!
Area is a source simulating area producing light, as windows, neons, TV screens…
Hemi simulates a very wide and far away light source, like the sky.
Sun simulates a very far away and punctual light source, like the sun.
from http://wiki.blender.org/index.php/Doc:2.4/Manual/Lighting/Lamps

Implementation

I propose implementing first Sun and Spot lights so that we'd have directional and spot lights.

Demo

The demo i propose for a basic scene illustrating the use of spotlights is a three-point lighting system.

Object Hierarchy

Abstract the Renderable to a base class. Let the current renderable inherit from it and then create a separate class that encapsulate a group ou OldRenderables. This will allow us to create 'steps' in the hierarchy, holding transformation matrices properly

Geometry should not hold Buffer objects

Maybe we'd be better off releasing the responsability of holding the indexbuffer from the geometry. This is something that a class that gets to the renderer should hold (like a Renderable or something). We could let geometry only hold a description.

Name

there are 100 pages on github search for mango (https://github.com/search?utf8=%E2%9C%93&q=mango).

I assume that we didn't have creativity. Lets change this @MateusZitelli 🔨

Optimize material data sent to gpu

There's no need to send color data as a float. We could break it into a single uint, for example and creating a 'struct-a-like' (see working with complex data structures)

struct VertexData
{
    vec3 vertex;  // vertex coordinates
    vec2 uv;        // texture coordinate
    uint tid;          // tid for arrays of textures */
    uint color;      // encoded color
};

const FLOAT32_SIZE = new Float32Array().BYTES_PER_ELEMENT;
const UINT16_SIZE = new Uint16Array().BYTES_PER_ELEMENT;

let buffer = new ArrayBuffer(3*FLOAT32_SIZE + 2*FLOAT32_SIZE + 2*UINT16_SIZE);

let vertexView = new Float32Array(buffer, 0, 3);
let uvView = new Float32Array(buffer, 12, 2);
let tidView = new Uint16Array(buffer, 20, 1);
let colorView = new Uint16Array(buffer, 22, 1);

Encoding the rgba values is pretty easy and cheap. Maybe this should work:

uint colorRGB = b << 16 | g << 8 | r;
uint colorRGBA = a << 24 | b << 16 | g << 8 | r;

see http://stackoverflow.com/a/21550921/2178180 as well

[Curves Demo] Firefox Buttons

Buttons are not working properly on firefox

Possibility of inconsistency on Positioning

heads up: this is not a priority as it refers to something that we might expose in the future.

We're relying on a prepare method that updates what it needs depending on dirtyness. This can lead to some kind of inconsistency depending on the expectations of the user regarding the internal state of the Body (or base Camera).

For example:

let sprite = new Renderable(...)
sprite.position = [2.0, 0.0, 10.0];
// expects that sprite's modelMatrix is properly set
vec4.transformMat4(ray, sprite.modelMatrix);
// uh oh, actually got an identity as `sprite.prepare()` didn't happened

loop(); 

My solution in simple:

• remove this prepare method and check for dirtyness in the getters. By doing this we guarantee that when something needs a fresh matrix (as expected) it will get. When we don't need, keep using the internal structure (_modelMatrix, for example, which doesn't have a getter)

Context: when generating a Ray we rely on an updated version of the camera.

Better closed Nurbs

We're only providing clamped closed nurbs (which does not guarantee C^{k-1} continuity). We should provide unclamped ones by repeating k-2 first or last control points while preserving uniform spacing in the knots vector.

Curves

For the next programming assignment (as stated on #4 ) we need to implement a basic curves editor with shape extruding. Two kinds of curves must be supported:

• BSplines (see Fundamentals of Computer Graphics, Shirley - Chapter 15 - curves)
• NURBS
• RaGs (see: Geometric modelling using rational Gaussian curves and surfaces)

I also suggest a third as it's a very common choice among pen tools:

• Bezier Curve Redundant. We can easily create bezier curves from BSplines if we allow (and we will) the user specify the knots vector

---

Extra

noise-reduction: Ramer-Douglas-Peucker and Visvaligam's algorithm

• Try to take advantage of instancing and glSubBufferData-a-like stuff for perf.

---

We need to find the derivatives so that we're capable of determining surface normals.
see Implementation of NURBS Curve Derivatives in Engineering Practice

Rename ArrayBuffer to VertexBuffer

I totally forgot that there's already a javascript ArrayBuffer, lol

We're basically overriding that when importing. Maybe VertexBuffer is a decent name

Object Selection

Object selection involves one step that is pretty much the same for any kind of object (ray generation), having then great dissimilarity regarding the intersection test. Ray generation has been implemented on #7 but might need some improvement.

• Points
  • for a given range of error, verify if we can find the point in the equation of the ray
• Lines
  • for a given range of error, verify if we can find a point so that the equations match
• Polyhedron
  • AABB
  • Per-face testing
• Picking

There are many more tests. Tests will vary on the geometry and the accuracy needed. Maybe these tests could be a method provided by the geometry and be somehow selectable by the user.

Shadows

As an issue was created for lightning (see #17 ), shadows comes next.

Camera Control

We should provide an example containing some camera controls.

E.g.: it's convenient to have a way of keeping with a simple setting for both orthographic and perspective cameras: fov (which relates somehow to camera lens, which relates somehow to zoom as well).

---

http://www.bobatkins.com/photography/technical/field_of_view.html

BoundingSphere and BoundingBoxes

• Visualization
• Computation and Storage

Automatically Push to GH-Pages

Configure a script and travis to automatically push built code to gh-pages

Specify face direction

Where not defining the orientation of our faces. We can get some improvements by doing so

https://www.khronos.org/opengles/sdk/docs/man/xhtml/glFrontFace.xml

Refactor webpack.config

We're almost building the whole project for each new example that is added as an entrypoint. We could take advantage of webpack's 'commons' generation. Explore this alternative later.

todo

Issue adressing some temporary minnor stuff

this shouldn't exist. Separate into specific issues.

---

Prior to updating and closing there were some annotations regarding how we pass WebGLRenderingContext

Orthographic Camera

We're relying solely on perspective projection. Maybe we can go with a specialized class but i particularly don't like this idea as there's a LOT of things that both of them (perspective .. ) share.

Perhaps going with something like this:

let camera1 = new Camera({
  type: PERSPECTIVE,
  ar: .. , fov: ..., near: ..., far: ...
});

let camera2 = new Camera({
  type: ORTOGRAPHIC,
  lefft, right, bottom, top, near, far
});