Self-made WebGL3D model editor based on Babylonjs and babylonjswebgl3d

Self-made WebGL3D model editor based on Babylonjs and babylonjswebgl3d

I. Summary
Most of the 3D models used in contemporary WebGL programming are transformed from the 3DsMax model or the Blender model. This work mode is suitable for scenarios where 3D designers and 3D programmers work in a division of labor. However, for WebGL enthusiasts of individual operations, this mode is too heavy: not to mention the various bugs in the conversion plug-in itself, which seriously reduces the conversion success rate, to generate a simple model, the system needs to learn how to use 3DsMax or Blender, which makes people feel that the loss is worth the candle.
Based on the above considerations, I plan to compile a simple WebGL model editor based on Babylonjs for my use and other WebGL enthusiasts who have the same requirements. The editor named Newland, which means to build a better world through your own efforts. Now you have completed the first-stage grid adjustment and texture setting function. The test program is published on github Based on the MIT protocol. You can use http://ljzc002.github.io/newland/html/index_newland.html.
Because there are too many codes, the following describes the usage and design ideas. The specific use or modification of Code requires a certain degree of 3D programming basics. For details, refer to the tutorial on getting started with 3D programming in my recording.

2. Interface and basic operations

The program is written and debugged based on the new Chrome browser. The device must have an independent or integrated video card, and the user must have the permission to call the video card through the browser. Currently, the test can be run on Windows 7 and Centos7.

Shows the main program interface:

The main interface is a simple Babylonjs scenario. It consists of a sky box and a grid on the ground, and uses semi-spherical illumination (?). In the scenario, you can use "wasd, space, and ctrl" to control the viewpoint position, and drag the mouse to control the angle of view. There are 12 shortcut menus on the top of the interface, you can click to open or use the "1" to "=" key to open the menu. After opening the menu, you can use the "tab" key to move the menu item up and down, press Enter to select a menu item or open the next menu, Press ESC to unselect, and press/to hide the menu button.

The "adjust" option on the menu bar keeps the mouse pressed (similar to mouse control for FPS games ), however, because JavaScript running in the browser has no permission to directly control the mouse and reset it to the center of the screen, this control mode has certain limitations.
The Perspective switching option can be used to switch between the first person and third person perspectives of the current vehicle. In the future, you plan to set different vehicles. Different vehicles have different default speeds and features, users can switch between different vehicles freely.
The "Adjust Speed" option allows you to adjust control parameters such as the viewpoint movement speed, the grid adjustment amplitude in the editor, and the mouse sensitivity.
The "Free browsing" option allows the viewpoint to be moved freely without the limitations of the vehicle. At this time, the moving key is changed from the wasd key to the upper, lower, and lower keys.

3. Grid Adjustment
Select "Add-" add grid-"cube" to add a default cube grid in the scene, as shown in:

The optional objects can be freely configured here. You can also add the self-designed mesh. The configuration code is located at around 309 lines in the mymesh. js file:

1 // list of grids that can be loaded 2 var arr_choosemesh = 3 [4 ["code", "BABYLON. meshBuilder. createBox ('","', {size: 1}, scene) "] 5, [" code "," BABYLON. meshBuilder. createSphere ('","', {segments: 10, diameter: 1}, scene); "] 6, [" babylon ","",".. /MODEL/allbase/"," 2017512_8_13_30testscene.babylon "] 7, [" babylon "," Cube ",".. /MODEL/octocat/"," octocat. babylon "] 8, [" babylon "," Cube ",".. /MODEL/test3/"," test3.babylon "] 9];

"Code" means to generate a grid by executing the code below, and "Babylon" means to load the existing babylon format model according to the following parameters.

The coordinate axes on the grid indicate the coordinates of the Local Coordinate System of the grid, which also indicates that the grid is being selected. For the selected grid, click "Adjust position", "Adjust posture", and "Adjust scaling" in the menu bar to adjust the position, posture, and scaling attribute of the selected grid, during the adjustment, you can directly enter a value in the corresponding attribute, or use the script to generate the value in real time, or use the "upper, lower, left, right, PgUp, PgDn" key to adjust the property, as shown in:

Because JavaScript scripts may need to be input, the mobile control button will become invalid when the above adjustments are made.

After the adjustment, press Enter to remove the Fixed Grid attribute. In this step, the texture coordinates of the grid will be re-allocated to prepare for the following texture configuration. You can fix multiple grids in a similar way to generate more complex grid objects, such as the following humanoid grid:

Click "file-" Export "to export the grid object as a text file (the default exported file suffix is txt, which needs to be manually changed to babylon)

 

Iv. Texture settings
Click "select-" select triangle "and the cursor will change to" crosshair ". Then, click the triangle in the grid and the selected triangle will be highlighted:

In the dialog box on the right, enter the RGB component to set the color of the selected triangle. Click "select color" to draw the map corresponding to the triangle element in the canvas of the square, at the same time, the selected triangle uses the corresponding element in the canvas as the texture (Transparency A is temporarily unavailable ):

Click "select"> "select triangle" to set other triangles. You can click "select from image" and use the local image as the graphic supplier of this triangle:

The area enclosed by a yellow line in the lower left corner of the image is a transparent div, which corresponds to the triangle Color Block in the texture image (the method for making a transparent triangle div is not found, and the oblique side can only be replaced by an arc ). You can drag and drop the div to set the area of the selected element. You can adjust the "u length and v length" to set the width and height of the div. The following four buttons can rotate the image horizontally:

Click OK. The selected element will be applied to the grid:

There are two ways to extract a texture from an image: first, extract the selected pixels from the image using the pixel extraction function of canvas into the texture image; the second is to record the offset and zoom of the clip image, and display the clip image in the texture image using canvas deformation and cutting. Considering that in most cases the pixels of the clip and texture images cannot match one by one, the second approach is adopted.
Click File> export image to export the texture image in PNG format, and then click File> export to export the model file with this image as the texture.
Load_mesh.html is a simple babylon model viewer. After local deployment, load the model to view the effect:

Because the other areas of the texture image are white, other areas of the model are white.

V. Summary

In the future, programming is equivalent to being illiterate.

Of course, as long as you follow the rules set by others, the illiterate may also live well. However, if a person wants to understand or even influence the way he lives in the world, he may not be able to become an illiterate.

In various programming forms, 3D programming has the most intuitive expression and influence, while JavaScript is a simple and easy-to-use programming language with a wide audience, as a combination of the two, WebGL programming technology is one of the best ways for amateurs to explore programming technology.

For professional 3D programmers, modern 3D programming technology is at the crossroads of transition to GPU-accelerated computing and multi-terminal 3D presentation, as one of the core technologies for 3D presentation of multiple terminals, WebGL is also worthy of in-depth research by professional programmers.

Limited by time, the introduction of the Newland editor is here, and new progress will be updated in the future. I hope you can share your comments and suggestions with me in the comments area. Your comments will be a great encouragement to me.

Thank you.