CN114297546A - Method for loading 3D model to realize automatic thumbnail generation based on WebGL - Google Patents
Method for loading 3D model to realize automatic thumbnail generation based on WebGL Download PDFInfo
- Publication number
- CN114297546A CN114297546A CN202111652484.4A CN202111652484A CN114297546A CN 114297546 A CN114297546 A CN 114297546A CN 202111652484 A CN202111652484 A CN 202111652484A CN 114297546 A CN114297546 A CN 114297546A
- Authority
- CN
- China
- Prior art keywords
- model
- color
- picture
- dimensional model
- loading
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Abstract
The invention provides a method for loading a 3D model to automatically generate a thumbnail based on WebGL, which comprises the following steps: step 1, establishing a ceium earth in a webpage, and setting the surface color of the earth; step 2, a user introduces the three-dimensional model into the earth created in the webpage in the step 1, and reads the three-dimensional model file by using HTML5 to obtain a binary stream, so that loading of the three-dimensional model is completed; step 3, adjusting the camera view angle by using the ceium to align the model; step 4, screenshot is carried out on the model by using an interface of the html2canvas class library to obtain a model picture with background color; step 5, calling a content acquisition method function of HTML5 by using the model picture obtained in the previous step to obtain a canvas object of the model picture, and calling an image data acquisition method by the canvas object to obtain pixel color data in a specified range in the canvas; and 6, starting to cut and scratch after pixel color data are obtained, wherein the processed picture is the final three-dimensional model thumbnail.
Description
Technical Field
The invention relates to the field of image processing and three-dimensional modeling, in particular to a method for automatically generating a thumbnail by loading a 3D model based on WebGL.
Background
WebGL (Web Graphics library) is a 3D drawing protocol, the drawing technical standard allows JavaScript and OpenGL ES 2.0 to be combined together, and by adding one JavaScript binding of OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, so that a Web developer can more smoothly display 3D scenes and models in a browser by means of a system display card, and complicated navigation and data visualization can be created.
In the 2.0 era of the web nowadays, due to the introduction of Javascript and HTML5, the browser can also achieve the same functions as desktop-level image processing software. With the increasing performance of browsers and the advent of WebGL, browsers have been increasingly capable of handling three-dimensional graphics, so that today there are many excellent three-dimensional graphics libraries, such as: three. js, ceium. js. This means that most users have selected browsers to process and view three-dimensional graphics.
< canvas > is an additional addition to HTML5, an HTML element in which an image can be rendered using a script (typically JavaScript). It can be used to make photo collections or animations and even real-time video processing and rendering. Both three-dimensional models and animations are presented on the canvas label.
The html2canvas is a Javascript class library with which a screenshot can be made in a browser. The reason for this is that this script can intercept the content in the canvas, some screenshot scripts cannot. And it can also convert the cut-off picture into canvas for display.
RGBA is a color space representing Red (Red) Green (Green) Blue (Blue) and Alpha. The alpha channel is typically used as the opacity parameter.
The Cesum is used as a geographic information three-dimensional earth engine, hardware rendering graphics and low-level geometry and rendering programs are fully utilized through an optimized WebGL technology, so that most of browsers and mobile devices can be supported, and the Cesum is widely used and popularized in recent years. When a three-dimensional model is added to a three-dimensional earth, in order to provide a better experience for a user, the model needs to be displayed in a thumbnail list mode. If the thumbnail of the model is manually made, professional picture processing software is needed, the operation is complex, professional and low in efficiency, the format, the size and the style of the picture are not uniform, and the browsing experience of the model list is poor. The thumbnail background of the model is transparent, the size, the format and the style are uniform, and the model list is neat and attractive.
When the three-dimensional model is used, the thumbnail of the model cannot be directly previewed in a file resource manager or a browser of an operating system, and the appearance of the model can be seen only by loading the model by using three-dimensional model editing software. Therefore, it would be desirable to have a method for generating a thumbnail of a model with a simple operation to facilitate viewing of the model. The sequence diagram of the conventional steps for generating a three-dimensional model thumbnail is shown in fig. 1, and includes:
1) opening the three-dimensional model by using model editing software;
2) dragging the model by using a mouse to adjust the visual angle to the angle suitable for screenshot;
3) screenshot by using screenshot software;
4) and (5) cutting and matting by using image processing software to obtain a thumbnail.
Therefore, the traditional method needs to use a plurality of software for generating the three-dimensional model thumbnail, and has the disadvantages of complex operation and high learning cost.
Disclosure of Invention
In order to solve the technical problem, the invention provides a method for loading a 3D model based on WebGL to realize automatic thumbnail generation, which can realize: (1) thumbnails for the models are automatically generated. (2) And automatically cutting the file, only displaying the area with the model, and reducing the size of the picture and the volume of the file. (3) The picture background is automatically modified to be transparent. The method and the device can directly generate the thumbnail of the three-dimensional model by using the browser, greatly simplify the operation steps and the learning cost, and can solve the problems.
The technical scheme of the invention is as follows: a method for realizing automatic thumbnail generation based on a WebGL loaded 3D model comprises the following steps:
step 1, establishing a ceium earth in a webpage, and setting the surface color of the earth;
step 4, screenshot is carried out on the model by using an interface of the html2canvas class library to obtain a model picture with background color;
step 5, calling a content acquisition method function of HTML5 by using the model picture obtained in the previous step to obtain a canvas object of the model picture, and calling an image data acquisition method by the canvas object to obtain pixel color data in a specified range in the canvas;
and 6, cutting and matting the image after the pixel color data is obtained, reading the color of each row of pixels, and when the color of the position is the same as the background color, replacing the position with transparent color to process each pixel point in the image, wherein the processed image is the final three-dimensional model thumbnail.
Further, in step 2, in the step 2, the user introduces the three-dimensional model into the earth created in the web page in step 1, reads the three-dimensional model file by using HTML5 to obtain a binary stream, completes the loading of the three-dimensional model, and loads the three-dimensional model by using the model position parameter and the binary stream format of the file as parameters.
Further, in the step 3, the view angle of the camera is adjusted by using the ceium to align the model, and the horizontal azimuth angle, the inclination angle and the distance between the camera and the model are set based on the position of the three-dimensional model, wherein the distance has a value such that the model can be completely seen, and the distance is appropriate for capturing a picture.
Further, step 6, after pixel color data is obtained, cutting and matting are started, the color of each row of pixels is read, when the color of the position is the same as the color of the background, transparent color is replaced to process each pixel point in the picture, the processed picture is the final three-dimensional model thumbnail, and the cutting and matting are specifically as follows:
reading the color of the pixel of each row/column, and judging that the row is a background picture when the color of the row/column is the same as the background color, and cutting off redundant edge parts in the picture by the method;
and taking the picture after the picture cutting is finished as an original picture, reading the color of each row of pixels, replacing the original picture with transparent color when the color of the position is the same as the background color, and obtaining the final three-dimensional model thumbnail when each pixel point in the picture is subjected to the processing.
Has the advantages that:
the method for loading the 3D model to automatically generate the thumbnail based on the WebGL can realize automatic processing of the webpage, does not need other software to participate in reducing user operation, generally installs a webpage browser in a personal computer, can be realized by only the personal computer, and has the advantage that the traditional client is difficult to show. The advantages of the present invention are also apparent in these areas:
1. the method of the invention is executed by the browser to automatically generate the thumbnail, thereby greatly reducing the user operation;
2. the thumbnail generation of the three-dimensional model is automatically completed without the participation of other software in the using process.
Drawings
FIG. 1: a conventional method of generating a thumbnail;
FIG. 2 is a flow chart of a method of the present invention;
FIG. 3: the invention relates to a time sequence flow chart of a method for realizing automatic thumbnail generation by loading a 3D model based on WebGL;
FIG. 4: a schematic diagram of one embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be described clearly and completely with reference to the accompanying drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, rather than all embodiments, and all other embodiments obtained by a person skilled in the art based on the embodiments of the present invention belong to the protection scope of the present invention without creative efforts.
The invention provides a method for loading a 3D model to automatically generate a thumbnail based on WebGL, which comprises the following steps as shown in FIG. 2:
step 1, establishing a ceium earth in a webpage, and setting the surface color of the earth;
step 4, screenshot is carried out on the model by using an interface of the html2canvas class library to obtain a model picture with background color;
step 5, calling a content acquisition method function of HTML5 by using the model picture obtained in the previous step to obtain a canvas object of the model picture, and calling an image data acquisition method by the canvas object to obtain pixel color data in a specified range in the canvas;
and 6, cutting and matting the image after the pixel color data is obtained, reading the color of each row of pixels, and when the color of the position is the same as the background color, replacing the position with transparent color to process each pixel point in the image, wherein the processed image is the final three-dimensional model thumbnail.
According to an embodiment of the present invention, the method for automatically generating a thumbnail by loading a 3D model based on WebGL is specifically implemented as follows, as shown in fig. 3:
1) a ceium earth is created in a webpage of a browser, and the color of the earth surface is set to be gray and the parameter is cesum.
2) The user introduces the three-dimensional model into the webpage earth, reads the file content by using a FileReader API of HTML5 to obtain a file binary stream file buffer, and loads the model onto the earth by using a center.
Position, Cesum. Cartesian3.from Degreenes (116,40,500) - -model position;
model- -file buffer- -binary stream of the file.
3) The camera view angle was adjusted using center. The parameters are respectively:
position, Cesum. Cartesian3.from Degreenes (116,40,500) -the position of the model;
secondly, the headingPitchRange (Cesium. Math. Toradians (140.0), Cesium. Math. Toradians (50.0), -350)) -horizontal angle, inclination angle, and distance between the camera and the model, wherein the distance is obtained by multiplying the radius of the three-dimensional model of the earth obtained by using Cesium. model. bounding sphere. radius by a number between 8 and 9, and the model can be completely seen under the value, and the size is suitable for screenshot.
4) Capturing a picture of the model by using an html2canvas (html elements, options) interface of the html2canvas class library to obtain a model picture with a background color, as shown in fig. 3, wherein parameters are respectively:
htmlElement, namely html element to be subjected to screenshot;
options: the starting point x, y and width height, height of the screenshot. Example (c): { width:200, height:200, x:400, y:400 }.
5) Using the picture obtained in the last step, calling a getContext ("2d") method of HTML5 to obtain a canvas object of the picture, calling a getImageData (x, y, width, height) method by the canvas object to obtain pixel color data in a specified range in the canvas, wherein the parameters are respectively:
x and y are initial point coordinates;
width and height.
And after the pixel data is obtained, cutting and matting are started, and the color of the (0, 0) point is used as the background color.
The graph cutting process comprises the following steps: reading the color of the pixel of each row/column, and when the color of the row/column is the same as the background color, judging that the row is internally provided with the background picture, cutting off redundant edge parts in the picture by the method, and obtaining the picture like the second image in the picture 3.
The matting process is as follows: and taking the picture after the picture cutting is finished as an original picture, reading the color of each row of pixels, replacing the original picture with transparent color when the color of the position is the same as the background color, and obtaining the final three-dimensional model thumbnail after each pixel point in the picture is processed, such as the third picture in fig. 4.
Therefore, the description of the execution process of the invention is completed, and other steps except for the appointed model file are all automatically completed by the webpage program in the browser.
Although illustrative embodiments of the present invention have been described above to facilitate the understanding of the present invention by those skilled in the art, it should be understood that the present invention is not limited to the scope of the embodiments, but various changes may be apparent to those skilled in the art, and it is intended that all inventive concepts utilizing the inventive concepts set forth herein be protected without departing from the spirit and scope of the present invention as defined and limited by the appended claims.
Claims (4)
1. A method for loading a 3D model to realize automatic thumbnail generation based on WebGL is characterized by comprising the following steps:
step 1, establishing a ceium earth in a webpage, and setting the surface color of the earth;
step 2, a user introduces the three-dimensional model into the earth created in the webpage in the step 1, and reads the three-dimensional model file by using HTML5 to obtain a binary stream, so that loading of the three-dimensional model is completed;
step 3, adjusting the camera view angle by using the ceium to align the model;
step 4, screenshot is carried out on the model by using an interface of the html2canvas class library to obtain a model picture with background color;
step 5, calling a content acquisition method function of HTML5 by using the model picture obtained in the previous step to obtain a canvas object of the model picture, and calling an image data acquisition method by the canvas object to obtain pixel color data in a specified range in the canvas;
and 6, cutting and matting the image after the pixel color data is obtained, reading the color of each row of pixels, replacing the pixels with transparent color when the color of the position is the same as the background color, and processing each pixel point in the image, wherein the processed image is the final three-dimensional model thumbnail.
2. The method for loading the 3D model to realize automatic thumbnail generation based on WebGL of claim 1, wherein in the step 2, the user imports the three-dimensional model into the earth created by the webpage in the step 1, reads the three-dimensional model file by using HTML5 to obtain a binary stream, and completes the loading of the three-dimensional model, wherein the loading of the three-dimensional model is performed by using model position parameters and the binary stream format of the file as parameters.
3. The method for automatically generating the thumbnail by loading the 3D model based on the WebGL of claim 1, wherein in the step 3, the view angle of the camera is adjusted by using the ceium to align the model, and the horizontal azimuth angle, the inclination angle and the distance between the camera and the model are set according to the position of the three-dimensional model, wherein the distance has a value such that the model can be completely seen and is appropriate for the screenshot.
4. The method for loading a 3D model to realize automatic thumbnail generation based on WebGL as claimed in claim 1, wherein in step 6, after pixel color data is obtained, cutting and matting are started, the color of each row of pixels is read, when the color at the position is the same as the background color, transparent color is replaced, each pixel point in the picture is processed, the processed picture is the final three-dimensional model thumbnail, and the cutting and matting are specifically as follows:
reading the color of the pixel of each row/column, and judging that the row is a background picture when the color of the row/column is the same as the background color, and cutting off redundant edge parts in the picture by the method;
and taking the picture after the picture cutting is finished as an original picture, reading the color of each row of pixels, replacing the original picture with transparent color when the color of the position is the same as the background color, and obtaining the final three-dimensional model thumbnail when each pixel point in the picture is subjected to the processing.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111652484.4A CN114297546A (en) | 2021-12-30 | 2021-12-30 | Method for loading 3D model to realize automatic thumbnail generation based on WebGL |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111652484.4A CN114297546A (en) | 2021-12-30 | 2021-12-30 | Method for loading 3D model to realize automatic thumbnail generation based on WebGL |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114297546A true CN114297546A (en) | 2022-04-08 |
Family
ID=80973311
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111652484.4A Pending CN114297546A (en) | 2021-12-30 | 2021-12-30 | Method for loading 3D model to realize automatic thumbnail generation based on WebGL |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114297546A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115115316A (en) * | 2022-07-25 | 2022-09-27 | 天津市普迅电力信息技术有限公司 | Method for simulating storage material flowing-out and warehousing operation direction-guiding type animation based on Cesium |
| CN116974550A (en) * | 2023-09-20 | 2023-10-31 | 中科星图测控技术股份有限公司 | Universal three-dimensional earth visualization method |
-
2021
- 2021-12-30 CN CN202111652484.4A patent/CN114297546A/en active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115115316A (en) * | 2022-07-25 | 2022-09-27 | 天津市普迅电力信息技术有限公司 | Method for simulating storage material flowing-out and warehousing operation direction-guiding type animation based on Cesium |
| CN115115316B (en) * | 2022-07-25 | 2023-01-06 | 天津市普迅电力信息技术有限公司 | Method for simulating storage material flowing-out and warehousing operation direction-guiding type animation based on Cesium |
| CN116974550A (en) * | 2023-09-20 | 2023-10-31 | 中科星图测控技术股份有限公司 | Universal three-dimensional earth visualization method |
| CN116974550B (en) * | 2023-09-20 | 2023-12-29 | 中科星图测控技术股份有限公司 | Universal three-dimensional earth visualization method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110266971B (en) | Short video making method and system | |
| CN107832108B (en) | Rendering method and device of 3D canvas webpage elements and electronic equipment | |
| US10186064B2 (en) | System and method for image collage editing | |
| EP3879843A1 (en) | Video processing method and apparatus, electronic device, and computer-readable medium | |
| CN109771951B (en) | Game map generation method, device, storage medium and electronic equipment | |
| CN108939556B (en) | Screenshot method and device based on game platform | |
| US20180276882A1 (en) | Systems and methods for augmented reality art creation | |
| US6373499B1 (en) | Automated emphasizing of an object in a digital photograph | |
| US20110167336A1 (en) | Gesture-based web site design | |
| CN114297546A (en) | Method for loading 3D model to realize automatic thumbnail generation based on WebGL | |
| US20110167360A1 (en) | Incoming web traffic conversion | |
| US20080267582A1 (en) | Image processing apparatus and image processing method | |
| CN110968962B (en) | Three-dimensional display method and system based on cloud rendering at mobile terminal or large screen | |
| CN106447756B (en) | Method and system for generating user-customized computer-generated animations | |
| TW202004674A (en) | Method, device and equipment for showing rich text on 3D model | |
| CN112102422B (en) | Image processing method and device | |
| CN112764752A (en) | Page display method and device, storage medium and electronic device | |
| WO2023231235A1 (en) | Method and apparatus for editing dynamic image, and electronic device | |
| US10460490B2 (en) | Method, terminal, and computer storage medium for processing pictures in batches according to preset rules | |
| CN111866372A (en) | Self-photographing method, device, storage medium and terminal | |
| US9305373B2 (en) | Customized real-time media system and method | |
| CN111127469A (en) | Thumbnail display method, device, storage medium and terminal | |
| CN113705156A (en) | Character processing method and device | |
| CN104766154B (en) | The system and method that snapshot image based on BIM is applied to intelligent engineering management | |
| US20220206676A1 (en) | Modifying drawing characteristics of digital raster images utilizing stroke properties |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |