Search code examples
jsonthree.js3d-model

Non-polygon based 3D-Model in ThreeJS (like in HelloRacer.com)

I am currently working on a project using ThreeJs.

Right now I use a wavefront-obj to represent my 3D-Models, but I would like to use something like -IGES or -STEP. These formats are not supported by ThreeJS, but I have seen the http://helloracer.com/webgl/ and for me, due to the short loading time, it seems like this model is not based on polygons as you can see by the smooth surface. The model seems to be .js so it is ThreeJS-JSON format?

Is such an model created by loading an IGES/STEP to for example Clara.io and export it to threejs-JSON? I have not the chance to test it by my self, because I do not have a IGES/STEP model right now, but I would let someone create one.

With wavefront I am not able to create such smooth surfaces without getting a huge loading time and a slow render.

picture of not smooth surface

as you can see, the surface and lightning is not nearly as smooth as on the posted example.

Solution

  • Surfaces in the demo you've linked are not smooth, they're still polygonal.

    Case'n'point

    I think smooth shading is what you're looking for. The thing is, usually a model is shaded based on its normals. Thus, what normals we set to vertices of the model is crucial to what we'll get on a screen. Based on your description, your models have separate normal for every triangle in it. Like on this picture, each vertex of each triangle has the same normal as triangle itself. Thus, when we interpolate this normals across a triangle, we get the same value for every point of the triangle. Shading calculations yield uniform illumination and the triangle appears flat on a rendered image.

    Face normals

    To achieve effect of smooth surface, we need other values for vertex normals, like ones on this image:

    Vertex normals

    If we save this sphere to any format with those normals and try to render it, interpolated normals'll change smoothly across the surface of triangles comprising the sphere. Thus shading calculations'll yield smoothly changing illumination, and the surface'll appear smooth.

    So, to recap, models you try to render need to have "smoothed" vertex normals to appear smooth on a screen.

    UPD. Judging by your screenshot, your model uses refractive material. The same idea applies to refraction calculations since they're based on normal values too.