Introducing updates to WebGL libraries developed by Naver’s open source group egjs.

View3D v2

- https://naver.github.io/egjs-view3d

View3D is a three.js-based 3D model viewer library that allows you to load 3D models in glTF format and view them from different angles.

In this major release of View3D, we’ve made the library easier to use by simplifying the configurations compared to the previous version, improving basic features like graphical quality and controls, and adding many new features.

View3D provides the following core features.

Load 3D models efficiently.

View3D is a 3D model viewer that specializes in loading models quickly and efficiently, so that it can be used on search services like Naver.

View3D uses two key methods to load 3D models quickly.

Optimize 3D models

- The geometry, animations, and texture images that make up a 3D model can be optimized to reduce their actual size, resulting in faster load times and a smaller footprint in memory.

- Various methods are used to optimize models, including Draco, Meshopt, and the Basis Universal texture format, and View3D can also simplify this task with the `view3d-optimizer`.

Progressive Loading

- A technique for preparing multiple copies of a 3D model based on detail, loading the smaller one first to display it quickly, and replacing it when the original model is loaded.

- It can help you display models faster and reduce the time before users can interact with them.

- Similarly, you can use the `view3d-optimizer` to simplify your work.

Display photorealistic 3D models with physically based rendering.

View3D uses physically based rendering (PBR) in three.js to ensure that models using PBR materials can be displayed correctly.

It also supports HDR environment maps and provides optional settings (HDR exposure, tone mapping).

You can change the model’s light source using an HDR environment map image of your choice, or use the studio light provided by View3D as the default without any settings.

Smooth controls and tons of options.

In View3D, you can use controls that are smoothly animated using interpolation. You can rotate, zoom, or translate the camera.

There are also options to fine-tune these controls, as well as support for annotations and poster images before displaying the model. These options, along with the events that View3D triggers for each condition, allow you to customize the viewer as you want.

For more information, see View3D’s tutorial documentation

Augmented Reality (AR) support for both Android/iOS.

View3D provides AR feature using the WebXR Device API, with Scene Viewer (Android) and Quick Look AR (iOS) as alternatives for devices that do not have WebXR available.

AR features include the ability to display a 3D model on a detected floor or wall, automatically shrink the model to an fit screen size, rotate, translate and scale the model, and even display an HTML-based overlay on top to customize it.

Check out a real-world example of how NAVER uses View3D.

Use the Playground page to preview your model and review your settings.

The Playground page is one of the demo pages in View3D, where you can load and preview your model to review options, environment maps, and more.

The Playground page also allows you to create and save annotations to annotate specific parts of your model.

View360 v4

- https://naver.github.io/egjs-view360

View360 is a WebGL-based 360° image/video viewer.

View360 provides the following core features.

Supports various projection types.

To support a variety of 360° images/videos, View360 supports a variety of projection types.

It supports various projection types such as Equirectangular and Cubemap, which are widely used in general, Equiangular Cubemap, which is a format used in Youtube 360 videos, and Cylindrical Projection, which supports panoramic images taken with a smartphone camera.

In v4, we’re adding Little Planet Projection, which allows you to create a “Little planet” effect, and we plan to support even more projection types.

Smooth controls and tons of options.

Like View3D, View360 supports smooth controls with interpolated animations.

It supports both desktop and mobile using mouse/touch, and on mobile it also supports controls using gyroscopic sensors.

There are also features and options for annotations, which allow you to annotate specific parts of the 360° image, as well as camera and control options.

We also offer a plugin that allows you to use video controls when using 360° video without having to install any other libraries.

Supports Virtual Reality (VR) using the WebXR Device API.

VR is available on mobile devices using cardboard VR, as well as on head-mounted displays (HMDs).

View3D and View360 also have these features

Works with many JavaScript frameworks

The libraries in egjs can be used in a variety of JavaScript frameworks.

View3D and View360 are no different, with packages available for React, Angular, Vue, and Svelte.

If you have a JavaScript framework that you’re currently using, you can use the normal way of using components in that framework.

For each library, we’ve published documentation on how to use it in your JavaScript framework, so you can refer to it as you develop.

Typescript-based

Both libraries are implemented on top of TypeScript. TypeScript users can use type inference and the IDE's code autocomplete features right out of the box without any additional installation, and the code includes jsdoc comments so you can refer to them as you develop.

Of course, each library also provides its own tutorials and API documentation.

- View3D: https://naver.github.io/egjs-view3d/
- View360: https://naver.github.io/egjs-view360/

It’s completely free.

The egjs libraries are all open source and licensed under the MIT license.

There are no license fees, no contracts to sign, and you can use them commercially.