Most of the 3D models used in modern WebGL programming are converted from 3DsMax or Blender models. This working mode is suitable for scenarios where 3D designers and 3D programmers work together. But for solo WebGL enthusiasts, this model is too heavy: not to mention the bugs in the conversion plugin itself that seriously reduce the success rate of the conversion, and the need to systematically learn how to use 3DsMax or Blender just to generate a simple model is not worth the cost. With these considerations in mind, I plan to write a simple WebGL model editor based on Babylonjs for myself and other WebGL enthusiasts with similar needs. The editor named Newland, which means to build a better world through your own efforts, has completed the first phase of meshing and texturing. Test program based on MIT license issued in the making, can be accessed through http://ljzc002.github.io/Newland/HTML/index_newland.html. Because too much code, here mainly introduces the using method and the design ideas, complete code can check on https://github.com/ljzc002/ljzc002.github.io/tree/master/Newland. Specific use or modification of code requires a certain 3D programming foundation, please refer to my VIDEO tutorial on 3D programming: http://www.bilibili.com/video/av8248516/, http://www.bilibili.com/video/av8834942/, http://www.bilibili.com/video/av923425 6 /, http://www.bilibili.com/video/av9546734/, also can find their own channels to understand.

Interface and basic operation

The program is written and debugged based on the new Chrome browser. It requires an independent or integrated graphics card on the device and the user has the permission to invoke the graphics card through the browser. Currently the test runs on windows7 and Centos7 operating systems.

The main interface of the program is as follows:

The main interface itself is a simple Babylonjs scene made up of sky boxes and ground grids, using hemispherical lighting. . In the scene, you can use “WASD, space, CTRL” to control the viewpoint position, and drag the mouse to control the perspective. Twelve shortcut menus are displayed in the upper part of the interface. You can click to open the shortcut menu or use the 1 to = key to open the shortcut menu. After opening the menu, you can use TAB to move menu items up and down, Enter to select menu items or open the next-level menu, ESC to cancel the selection, and/to hide the menu button.

The “Hold mouse” option under the “Adjust” menu bar allows the mouse to remain down (similar to mouse controls in FPS games), but this control mode is limited because JavaScript running in the browser does not have permission to directly reset the mouse to the center of the screen. The “View Switch” option can switch between the first and third person views of the “current vehicle”. In the future, there are many different vehicles with different default speeds and functions. Users can switch between different vehicles freely. The “Adjust Speed” option allows you to adjust the speed of viewpoint movement, the amount of mesh adjustment in the editor, mouse sensitivity and other control parameters. The “Free Browsing” option allows the viewpoint to move freely from the vehicle, and the move button is changed from WASD to up, down, left, and right

3. Mesh Adjustment Select “Add -” “Add Grid -” “Cube” to add a default cube grid in the scene, as shown in the picture below:

Here optional objects can be configured freely, and users can also add their own mesh design. The configuration code is located around line 309 of the mymesh.js file:

1 / / var arr_choosemesh can load of the grid list 2 = 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 ];Copy the code

“Code” means generating the grid by executing the following code, and “Babylon” means loading the existing Babylon format model according to the following parameters.

The coordinate axes on the grid indicate the local coordinate system coordinates of the grid and also indicate that the grid is under selection. For the selected grid, click on the menu bar of the “location”, “adjust attitude”, “adjust the zoom can adjust the position of the currently selected in the grid, posture, scaling properties, adjustment can be directly in the corresponding attributes in the input value, can also use scripts instant generate value, can also use the up and down or so, PgUp and PgDn key attributes adjustments, As shown below:

Because you may need to enter a JavaScript script, moving the control button will not work when making the above adjustments.

After the adjustment, press Enter. The coordinate axis disappears and the grid property is fixed. At this step, the texture coordinates of the grid will also be reallocated to prepare for the texture configuration below. Fixing multiple grids in a similar manner can generate more complex grid objects, such as the humanoid grid below:

Click file – Export to export the grid object as a text file (the default export file suffix is TXT need to be manually modified to Babylon)

 

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:

Fill in the RGB component in the dialog box on the right to set the color of the selected triangle. Click “Select Color” to draw the corresponding pixel of the triangle pixel in the square canvas, and the selected triangle will use the corresponding pixel in the canvas as its texture (transparency A is temporarily unavailable) :

Click Select – again to select the triangle to set other triangles, you can click “Select from Image” to use the local image as the pixel provider for this triangle:

The area surrounded by the yellow line in the lower left corner of the image is a transparent div, corresponding to the triangle color block in the texture image. You can use the mouse to drag and drop the div to set the selection area, adjust the “U length, V length” to set the width and height of the div, the following four buttons can rotate the image horizontally:

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

There are two ideas when extracting texture from pictures: one is to use the pixel extraction function of Canvas to extract the selected pixels from the material picture and fill them into the texture picture; The second is to record the offset and zoom of the material picture, and use canvas deformation and shearing to display the material picture in the texture picture. Considering that in most cases the pixels of the material map and texture map cannot correspond one by one, the second idea 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 that can be viewed by loading the model after local deployment:

Since the rest of the texture image is white, the rest of the model is also white.

Five, the summary

In a future world, not knowing how to program equals illiteracy.

Of course, it is possible to be illiterate as long as you follow the rules set by others. But one cannot settle for illiteracy if one wants to have some understanding of, or even influence, the workings of the world in which one lives.

WebGL is one of the best ways for amateurs to learn programming techniques. 3D programming is the most intuitive and influential of all forms of programming, while JavaScript is a programming language that is easy to use and widely accessible.

For professional 3D programmers, contemporary 3D programming technology is at a three-fork intersection of gPU-accelerated computing and multi-terminal 3D presentation. WebGL technology, as one of the core technologies in the direction of multi-terminal 3D presentation, is also worth in-depth study by professional programmers.

For the time being, this is the end of the Newland editor, and we will continue to update it with new developments. I hope you can exchange your opinions and suggestions with me in the comments section. Your positive comments will be a great encouragement to me.

thank you