3D Objects Examination - for RPG MAKER MV

Render the 3D Model of your items, exploiting the power of Babylon JS.

GENERAL

3D Object Examination  is an amazing plugin powered by Babylon JS 3D Engine that allows to render a specific game scene for rendering 3D Models, rotate around them and assigning events on specific camera directions and angles.

The use of this plugin is recommended for expert users. Due the particular nature of the code, I can't assure the compatibility or other eventual plugins made with Babylon that can add or other features.

Main Features:

• The plugin is powered by Babylon JS, an amazing and fast 3D for JS apps!
• .OBJ, .STL and .GLTF (Highly Recommended) can be loaded by the plugin.
• Arc Rotate Camera controlled by Mouse inputs!
• Camera settings, like zoom range,  initial position and/or angle,  precision and sensitivity can be set through script calls and plugin parameters.
• Customizable light properties, specifically: intensity, direction,  diffuse color, model ground color, specular reflection color.
• Available Debug Mode allowing the developer to easily customize the settings of their 3D events.
• You can bind Switch activation to specific camera direction and/or angles that can be used for creating amazing common events!

BEFORE START:

This plugin needs for working the addition of two libraries:

• babylon.js
• babylonjs.loaders.min.js

These libraries needs to be placed inside the js/libs/ folder of your project and then you should add inside the index.html file of your project these two HTML tags:

 <script type="text/javascript" src="js/libs/babylon.js"></script>
 <script type="text/javascript" src="js/libs/babylonjs.loaders.min.js"></script>

The result should something like that:

You can download the package (with the plugin) containing the libraries' version used for the development directly on this itch.io page (Suggested) or you can find them following this links: (FOLLOW THE LINK; RIGHT-CLICK AND "SAVE PAGE AS...")

• BABYLON JS
• BABYLON JS LOADER

Moreover, you must create a folder named models/ in your project folder. Inside this directory,  all the models that you want to use should be placed inside.

The models inside the showcase video were used for education purposes. For more information, you can find the authors pages down there:

- DUCK (from Khronos Group)

- BERETTA M9 (from 3dniator)

PLUGIN PARAMETERS: 

This plugin is provided by a series of plugin parameters that allows to set some general options:

• TEXT MANAGER: Contains text settings related to the object system;
• WHEEL PRECISION: This value affects the accuracy of the zoom made through the mouse wheel.
• ANGULAR SENSIBILITY X : The sensibility of the camera movement on the X Axis.
• ANGULAR SENSIBILITY Y : Same of above, but of the Y Axis;
• INVERT Y MODEL LOADING : You can invert the sign for Y Axis when the model is loaded.

RENDER A 3D SCENE:

This plugin renders a 3D Scene on a different canvas than the one where PIXI.JS Engine works for Rpg Maker MV things.

For render a  3D scene - and loading a model - you have to use this script call:

this.load_examine_scene(options); 

The options argument is an OBJECT where you can set different kind of options.

The options list is:

In the image above are shown the main options that can be used for rendering a scene and their DEFAULT VALUES. Specifically:

• MODEL : This is the only NECESSARY option. Without this option, the scene will NOT be rendered and error will be triggered. This parameter represents the filename and the ext of a model placed in the models folder of your project.
• LIGHT INTENSITY : This is the intensity of the light rendered in the 3D Scene. 
• LIGHT DIRECTION : This is the direction where the light is placed. The position is a Vector3 composed by X, Y and Z Axis.
• LIGHT DIFFUSE COLOR: This is the diffuse color of the light. The value is an RGB vector.
• LIGHT GROUND COLOR : The light ground color that will affect model's material. The value is an RGB vector.
• LIGHT SPECULAR COLOR : This is the color of the light reflection on the model material. The value is an RGB vector.
• ZOOM LIMIT : This is actually the ZOOM - and ZOOM + limit that can be set for avoiding strange behaviors in zooming to much around on the model. THE ZOOM IS ACTUALLY THE "RADIUS" OF THE ARC ROTATE CAMERA.
• DEBUG MODE: Enabling this parameter to TRUE some debug information related to the POSITION (X, Y, Z) and the ANGLE (ALPHA, BETA AND RADIUS) of the camera will be given during the rendering of the 3D scene. This is really useful for finding the correct position and/or angle to bind an event or for finding the values for some settings (ex. zoom limit).
• CAMERA POSITION: This is the default camera position.  The position is a Vector3 composed by X, Y and Z Axis. It can be set alone or with the camera start angle.
• CAMERA START ANGLE: The starting angle position of the camera. The position is a Vector3 composed by ALPHA, BETA AND RADIUS Angle. It can be set alone or with camera position.

-- CAMERA POSITION AND CAMERA ANGLE

The Arc Rotate Camera is both affected by its position in the space and the angles of rotation around the model target. Moving around with inputs or setting the options above will affect eventually both positions and angles on the same time. 

BINDING AN EVENT ON THE 3D OBJECT:

Using this plugin you can bind Events that when on the correct position allows to trigger a switch which can be bound to a PARALLEL common event for creating text events and such. 

You can bound events after the creation of a scene. Be sure to do it in the same script or to use a method that expand the script call box - or you can create a custom function in a plugin file -. In a few words, be sure that the execution is after the creation of the 3D Scene. On the dispose of the scene, all the events will be removed.

For binding an event there is a specific script call:

Babylon_Manager.add_event(event)

The EVENT object is composed by:

• SWITCH ID: The switch that will be set to TRUE when the event is triggered with the ACTION BUTTON.
• POSITION: This is the position where the input of the interaction button should active the switch set as argument. This is ALTERNATIVE OR COMPLEMENTARY to the ANGLE vector.
• ANGLE : This is the angle position where the input of the interaction button should active the switch set as argument. This is ALTERNATIVE OR COMPLEMENTARY to the POSITION value. WARNING: IN THIS CASE THE VECTOR3 OF THE ANGLE HAS STILL AS ARGUMENTS {X,Y,Z}. HOWEVER, THE ALWAYS REPRESENTS THE ALPHA (X), BETA (Y) AND RADIUS (Z) ANGULAR VALUES. 
• VARIABLE:  This arguments allows to set a variable ID and to assign a value when the event is performed. This way, you can create complex conditional branches in the parallel common event triggered by the switch. THIS IS AN OPTIONAL PARAMETER.

ADVANCED USE:

If you have knowledge on JS, I highly suggest to take a look inside the plugin and in general to Babylon JS documentation for discovering some other amazing features. 

However, I have coded inside the plugin an advanced script call for moving the camera smoothly to a new position and/or angle. 

This script call is: 

Babylon_Manager.move_camera_to(new_position, angular_position, time)

• NEW POSITION: This is the new position that needs to be reached by the camera. The argument is a Vector3.
• ANGULAR POSITION: The new angular position that needs to be reached by the camera. The argument is a Vector3.
• TIME: The time that allows to calculate the lerp from the old to the new position. (Max Value 99 - ULTRA FAST).

Inside the showcase video, you have probably noticed that when the event is triggered the 3D models goes to a new position. This is due the script called using the code above. Below, some screenshots that shows the use of the script call and how to create a new position using the Vector3 class (alias for BABYLON.Vector3).

When one of the two position's arguments (new position or angular position) is not used, NULL needs to be inserted.

Others advanced script calls that can be of use: 

Babylon_Manager.angle_vector()

It generates a Vector3 of the current ALPHA(X) - BETA(Y) - RADIUS(Z) angular position of the camera. 

Babylon_Manager._camera

Returns the camera object of the scene.

Babylon_Manager._camera.position

Get the current Vector3 position X - Y - Z of the camera.

Babylon_Manager._camera.lowerAlphaLimit

Babylon_Manager._camera.lowerBetaLimit

Babylon_Manager._camera.upperAlphaLimit

Babylon_Manager._camera.upperBetaLimit

This properties allows to set a MIN AND MAX ALPHA AND BETA ANGLE ROTATION. This is really similar to the zoom limit that actually impose a constraint to the RADIUS.

Imposing angle constraints is really useful when you want to take control of the camera rotation limit around the model, in particular when you have events created using angle position.

Example:

Babylon_Manager._camera.lowerAlphaLimit = 3;

Babylon_Manager._camera.upperAlphaLimit = 5;

On the code above I have set the constraint to the ALPHA angle on a range of (MIN:3, MAX:5).

EVENT EXAMPLES:

The plugins looks difficult to use, but It only needs some practice and doing some experiment. Below, the screenshots of the events created for the video showcase:

DUCK EVENT:

HANDGUN EVENT: 

THE COMMON EVENT - GOOD PRACTICES

For making good use of the 3D scene when the model is rendered, the creation of a well organized common event that will handle the bound events is really important.

Below the screenshots of the common event I have created:

There are some good practices to respect for making a good common event: 

1. Set the trigger to PARALLEL and the SWITCH you have set in the event bound in the 3D Scene. Potentially, You can handle the events of different 3d scene in one common events if you make a good use of the variable assign parameter of the event binding system of the 3D Scene. 

2. When the event is triggered, It's good pratice to disable the camera inputs for avoiding to create problems in the flow of the event. This is useful to introduce other script calls that are made for this task:

• this.stop_model_movement();
• this.start_model_movement();

As you can see they're placed on the start and on the end of the common event for disabling and enabling the inputs of the 3D scene.

3. Set the switch activated from the scene event to FALSE. This way you can avoid to have the event always activated.

DEBUG MODE:

The debug mode of the 3D scene is really important during the development process to actually see the positions and the angles of the camera and how they impact the 3D Model view.

Each model gives a different response to the camera, however if you have knowledge on 3D modelling and rendering, exporting yourself your models, you can have a better control of this point.

The debug mode looks this way when activated:

The left values are related to the POSITION of the camera. The right values are related to the ANGULAR position of the camera. 

The angular position ALPHA - BETA - RADIUS is referenced always as X, Y and Z in the creation of the scene events - as explained above -.

It's a good practice to take at least the first two float values when using a value for something. Ex. -3.09, 2.65.

3D MODELS QUALITY:

The Babylon JS library is still an experimental technology. Some 3D models may not render correctly as other engines or the software where they are originally created. This advice is made specifically for people that has not any knowledge on 3D modelling and aims to download the model from the web. I highly suggest for the best result to use .gltf models that has a good accuracy rendering with Babylon.js.

PLUGIN COMPATIBILITY:

This plugin should not affect directly any plugin. However, I'm not responsible for plugin errors that are not directly related from my plugin itself.

RPG MAKER VERSION:

The plugin is developed on Rpg Maker MV - Version 1.6.1 and with the related PIXI.js Version 4.5.4. This plugin is NOT compatible with older Rpg Maker Version that 1.6.x.

TERMS OF USE:

• Credits are not necessary , but highly appreciated. Credits to Nebula Games.
• Avoid to change plugin information, filename and parameters name for the sake of integrity of the code.
• Edits to the code are allowed.
• The plugin can be used for both commercial and non-commercial projects.
• You can't redistribute this plugin as it is or incorporating portion of the code inside another plugin; 

Thank you very much for the support!