Based on BABYLONJS homemade Webgl3d Model Editor

I. GENERAL statement
Most of the 3D models used in modern WEBGL programming are converted from 3DSMAX models or blender models, which are more suitable for 3D designers and 3D programmers to work together. But for the WEBGL enthusiasts of individual combat, this model is too heavy: and do not say that the conversion plug-in itself has a variety of bugs seriously reduce the success rate of conversion, just in order to generate a simple model needs to learn the system 3DsMax or blender use method to make people feel the outweigh the gains.
Based on the above considerations, I plan to write a simple BABYLONJS-based WEBGL Model editor for myself and other WEBGL enthusiasts with the same needs. The editor is named Newland, which means to build a better world through its own efforts, and has now completed the first phase of grid adjustment and texture setting functions. The test program is posted on GitHub based on the MIT protocol and can be accessed through http://ljzc002.github.io/Newland/HTML/index_newland.html.
Because of too much code, here is the main introduction to the use of methods and design ideas, the complete code can be viewed on the Https://github.com/ljzc002/ljzc002.github.io/tree/master/Newland. The specific use or modification of the code requires a certain 3D programming basis, you can see my recorded 3D programming Getting Started video tutorial: http://www.bilibili.com/video/av8248516/, Http://www.bilibili.com/video /av8834942/, http://www.bilibili.com/video/av9234256/, http://www.bilibili.com/video/av9546734/, can also find their own channels to understand.

Second, interface and basic operation

The program is written and debugged based on the new version of Chrome and requires a standalone or integrated video card on the device and requires the user to have permission to call the video card through the browser. Currently the tests can be run on the Windows7 and CENTOS7 operating systems.

The main interface of the program is as follows:

The main interface itself is a simple babylonjs scene, composed of a sky box and a ground grid, applying hemispherical illumination (? ）。 In the scene, you can use "WASD, SPACEBAR, CTRL" to control the position of the viewpoint, using the mouse to drag control perspective, the upper interface is 12 shortcut menu, can be opened with a mouse click or use "1" to "=" key to open, open the menu can use the "tab" key to move the menu item, "Enter" Key to select a menu item or open the next Level menu, "ESC" key to Deselect, "/" Key to hide the menu button.

The "Hold Mouse" option under the "Adjust" menu bar allows the mouse to remain pressed (like the mouse control of an FPS game), but because JavaScript running in the browser has no rights to directly control the mouse reset to the center of the screen, this control mode has a certain range limit.
The "View switch" option toggles between the first person and third person view of the "current carrier", and the future plans to set up a variety of different loads with different default speed and default functions, and users can switch freely between the different carrier.
The Adjust speed option adjusts the speed of the viewpoint movement, the adjustment amplitude of the grid in the editor, the mouse sensitivity, and other control parameters.
The "Free browsing" option allows the viewpoint to move freely from the restriction of the carrier, when the move button changes from the WASD key to the next key

Third, grid adjustment
Select Add-New grid-"cube" to add a default cube grid in the scene as shown in:

Optional objects can be freely configured here, and users can add their own grids, which are located in the 309 lines of the Mymesh.js file:

1 //list of grids that can be loaded2 varArr_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 that the grid is generated by executing the subsequent code, and "Babylon" means that the existing Babylon format model is loaded as a subsequent parameter.

The axes on the grid indicate the local coordinate system coordinates of the grid, which means that the grid is in the selected state. For the selected grid, click "Adjust position", "Adjust posture", "adjust Zoom" under the menu bar to adjust the position, posture, scaling properties of the currently selected grid, you can enter values directly at the corresponding property, or you can use the script to generate values immediately, you can also use the "Up and down, PgUp, PgDn "Key for property adjustment, as shown in:

Because you may need to enter JavaScript scripts, the Move Control button will fail when you make the above adjustments.

When you have finished adjusting, press the ENTER key to disappear the grid property is fixed, and the texture coordinates of the mesh are redistributed in this step to prepare for the texture configuration below. Fixing multiple meshes in a similar way can generate more complex mesh objects, such as the following humanoid mesh:

Click "File-Export" to export this grid object as a text file (the default export file suffix is txt needs to be manually modified to Babylon)

Four, texture settings
Click "Select-" SELECT Triangle "cursor will change to" Crosshair ", then click on the triangle in the grid, the selected triangle will be highlighted:

In the dialog box on the right to fill in the RGB component can set the color of the selected triangle, click "Select Color" will be in the square canvas to draw this triangle element corresponding to the elements, and the selected triangle will be in the canvas of the corresponding eliminating banding as a texture (transparency a temporarily):

Click on the select-"Select triangle to set the other triangles, you can click on the" Choose from the picture "using the local image as the map of this triangle provider:

The yellow line in the lower left corner of the picture is a transparent div that corresponds to the triangle color block in the texture image (no way to make a transparent triangular div, only arcs instead of hypotenuse). You can use the mouse to drag the div to set the selection of the area of the voxel, adjust the "u length, v Length" can set the width of the Div, the following four buttons can rotate the picture horizontally:

Click OK and the selected image will be applied to the grid:

There are two ways to extract textures from images: one is to use the pixel extraction function of canvas to extract the selected pixels from the footage image into the texture picture, and to record the offset and scale of the footage, and to display the footage in the texture picture using canvas warp and clipping. Considering that in most cases, the pixel points of the material and texture graphs cannot correspond one by one, the second way of thinking is adopted.
Click on the file-"Export the image can be exported in PNG format texture image, and then click on the file-" export can be exported with this image as a texture of the model file.
Load_mesh.html is a simple Babylon Model viewer that loads the model after a local deployment to see the effect:

Because the other areas of the texture picture are white, the rest of the model is also white.

V. Summary

In the future world, ignorance of programming equals illiteracy.

Of course, if you follow the rules set by others, illiteracy can also be a good life. But if a person wants to know something about how the world is going to work and even influence it, he cannot be content to be illiterate.

In a variety of programming formats, 3D programming has the most intuitive expressiveness and influence, while JavaScript is an easy-to-use and popular programming language, as the combination of WEBGL programming technology is the amateur programming enthusiasts to dabble in programming technology one of the best ways.

And for the professional 3D programmer, the contemporary 3D programming technology is in the GPU acceleration computing and multi-terminal 3D transformation of the three Fork Junction, WEBGL Technology as a multi-terminal 3D of the direction of the core technology, it is also worthy of professional programmers in-depth study.

Limited to the time, the introduction of the Newland Editor is here, new developments will continue to be updated. I hope you can share comments and suggestions in the comment area, and your positive comments will be a great encouragement to me.

Thank you.

Based on BABYLONJS homemade Webgl3d Model Editor