CN111563929B - 2.5D webpage development method based on browser - Google Patents
2.5D webpage development method based on browser Download PDFInfo
- Publication number
- CN111563929B CN111563929B CN202010356756.5A CN202010356756A CN111563929B CN 111563929 B CN111563929 B CN 111563929B CN 202010356756 A CN202010356756 A CN 202010356756A CN 111563929 B CN111563929 B CN 111563929B
- Authority
- CN
- China
- Prior art keywords
- dimensional
- camera
- coordinate system
- elements
- developing
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T7/00—Image analysis
- G06T7/70—Determining position or orientation of objects or cameras
-
- A—HUMAN NECESSITIES
- A63—SPORTS; GAMES; AMUSEMENTS
- A63F—CARD, BOARD, OR ROULETTE GAMES; INDOOR GAMES USING SMALL MOVING PLAYING BODIES; VIDEO GAMES; GAMES NOT OTHERWISE PROVIDED FOR
- A63F13/00—Video games, i.e. games using an electronically generated display having two or more dimensions
- A63F13/50—Controlling the output signals based on the game progress
- A63F13/52—Controlling the output signals based on the game progress involving aspects of the displayed game scene
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/20—3D [Three Dimensional] animation
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Multimedia (AREA)
- Computer Vision & Pattern Recognition (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a 2.5D webpage development method based on a browser, and relates to the technical field of general image data processing or generation. The method comprises the following steps: setting a two-dimensional element tag and a three-dimensional element tag in an html document; developing two-dimensional elements of the design drawing in the two-dimensional element label; and developing the three-dimensional elements of the design drawing in the three-dimensional element label. The invention uses the traditional 2D development technology to develop two-dimensional elements in the 2.5D design drawing, uses WebGL to develop three-dimensional elements in the 2.5D design drawing, and has low development difficulty and good realization effect.
Description
Technical Field
The invention relates to the technical field of general image data processing or generation, in particular to a 2.5D webpage development method based on a browser.
Background
The large web page screen is a large screen which is manufactured by using web page technologies (html, css, js, webgl and the like) and takes a browser as a carrier, and different resolutions can be manufactured according to requirements. The large screen of the webpage is often used for visual display of data, including various charts and maps, and the large screen needs vivid expressive force, so that the requirement on animation effect (3D elements) is high.
2.5D (also referred to as pseudo-3D) is a technique for two-dimensional pictures, so that an image or a scene has a three-dimensional visual effect, and is often found in posters, web pages and UI designs, such as pictures for a little-letter game, which makes a jump, and the like, and compared with a complicated 3D modeling process, 2.5D can obtain a better visual effect faster. The 2.5D generally adopts parallel projection, which is a projection mode relative to perspective projection, the distance between the projection center and the projection plane is infinite, the projection lines are parallel to each other, the relationship of near and far is eliminated, and the method is suitable for graphic representation of maps, cities, topology and the like.
Designers typically make floorplans using two-dimensional design software (e.g., Photoshop), but front-end implementations may use not only two-dimensional techniques, but also 3D techniques (webgl).
Traditional web page development generally uses css to lay out html elements, realizes various animation effects, and is usually represented in a planar 2D form in design. After WebGL comes across, it becomes possible to develop 3D pictures in web pages using browser native interfaces. The 3D development effect is better, the picture is more vivid, but the time cost is larger, the performance consumption is larger, and the technical threshold required by front-end personnel and designers is higher. If the traditional 2D and WebGL mixed development can be utilized, the advantages of the two technical means are fully exerted, and better effect can be achieved with lower cost.
Chinese invention "a three-dimensional web page graphic drawing method and apparatus" with publication number CN104835192A provides a three-dimensional web page graphic drawing method and apparatus, which reads graphic element attributes, coordinate values and sizes, determines whether there is a three-dimensional rendering attribute parameter in the graphic element attributes, if so, calculates a left view frame rendering position and a right view frame rendering position of the graphic element according to preset coordinate values and sizes, and renders the graphic element at the left view frame rendering position and the right view frame rendering position, respectively, to obtain a three-dimensional web page graphic. And if the attribute of the graphic element is judged not to carry the three-dimensional rendering attribute parameter, drawing the graphic element on a screen according to the preset coordinate value and the preset size. By the application method, the graphic elements in the webpage can be drawn in a three-dimensional mode. More importantly, the method can be used for three-dimensional drawing of common graphics such as rectangles and more complex webpage patterns such as elements with three-dimensional effects and elements with two-dimensional effects, is wide in application range, and meets the display requirements of various terminal devices.
However, the application has high threshold and high cost, and is not suitable for the development of 2.5D webpages.
Chinese invention with a bulletin number CN106582015B, "a method and a system for realizing 3D effect display in 2D game" provides a method for realizing 3D effect display in 2D game, wherein the method comprises: arranging a virtual camera obliquely above the game role and the game scene where the game role is located, wherein the horizontal height of the virtual camera, the game role and the game scene representation ground is variable, the virtual camera frames the game role and the game scene where the game role is located, and accordingly, the parts of the game role and the game scene needing to be drawn and the drawing parts are determined in the drawing area of the game equipment display unit and the corresponding picture resources; loading the picture resources and drawing a game scene and a game role in the corresponding drawing area in sequence; when the respective levels are changed, the above is redetermined. The invention also provides a system for realizing 3D effect display in the 2D game. The method and the system overcome the defect that the 3D effect is difficult to show in the 2D game, greatly improve the fidelity of the showing of the animation effect of the game, and enhance the substitution feeling and the game experience of the player.
The method realizes the 3D effect in the 2D game by setting the form of the virtual camera, and obtains good effect. However, the field of game development is different from that of webpage design, and the problems to be solved are different.
Disclosure of Invention
The invention aims to provide a browser-based 2.5D webpage development method for developing a 2.5D design drawing by mixing traditional 2D and WebGL.
In order to solve the problems, the technical scheme of the invention is as follows:
A2.5D webpage development method based on a browser comprises the following steps:
setting a two-dimensional element tag and a three-dimensional element tag in an html document;
developing two-dimensional elements of the design drawing in the two-dimensional element label;
and developing the three-dimensional elements of the design drawing in the three-dimensional element label.
Further, the method for developing the two-dimensional element of the design drawing in the two-dimensional element label uses at least one of the following methods: developing two-dimensional elements of the blueprint using html and css, developing two-dimensional elements of the blueprint using html and js, developing two-dimensional elements of the blueprint using svg and css, developing two-dimensional elements of the blueprint using svg and js, or developing two-dimensional elements of the blueprint using 2D context of canvas.
Further, the method for developing the three-dimensional element of the design drawing in the three-dimensional element label is to develop the three-dimensional element of the design drawing by using WebGL in the three-dimensional element label.
Further, the two-dimensional element tag and the three-dimensional element tag set the same left, top, width, and height values.
Further, developing a three-dimensional element of a design drawing using WebGL in a three-dimensional element tag includes the steps of:
establishing a three-dimensional world coordinate system by taking the geometric center of the design drawing as an origin;
acquiring three-dimensional world coordinates of key points of the three-dimensional elements;
and developing the three-dimensional elements of the design drawing in the three-dimensional element label according to the three-dimensional world coordinates of the key points of the three-dimensional elements.
Further, the obtaining of the three-dimensional world coordinates of the key points of the three-dimensional elements comprises the following steps:
setting parameters of a camera, wherein the camera is an orthogonal projection camera, the upper direction of the camera is the same as the y-axis direction (0,1,0) of a three-dimensional world coordinate system, the camera is aligned with the coordinate origin of the three-dimensional world coordinate system, the left, right, upper and lower side surfaces of a visual cone of the camera are width/-2, width/2, height/2 and height/-2 respectively, and the width and height values are width and height values of a three-dimensional element label;
establishing a camera local coordinate system by taking the geometric center of the design drawing as an origin to obtain a three-dimensional world coordinate system and a conversion matrix C of the camera local coordinate system;
setting the coordinates of the camera in a three-dimensional world coordinate system, and solving a transformation matrix C;
acquiring coordinates of key points of the three-dimensional elements in a local coordinate system of the camera;
and solving the three-dimensional world coordinates of the three-dimensional elements according to the solved conversion matrix C.
Further, the transformation matrix C is:
further, the coordinate of the key point of the three-dimensional element in the local coordinate system of the camera is obtained by measuring the pixel value of the key point of the three-dimensional element to obtain the x value and the y value of the three-dimensional element in the local coordinate system of the camera, and any negative z value is taken.
Further, when coordinates of the camera in the three-dimensional world coordinate system are set, the coordinates of the camera are setSatisfy the requirement of
And alpha is an included angle between the projection of the x axis of the three-dimensional world coordinate system in the visual cone of the camera and the x axis of the local coordinate system of the camera.
Further, the two-dimensional element includes a background of the design drawing, and the three-dimensional element includes an animation.
Compared with the prior art, the invention has the following beneficial effects:
the invention uses the traditional 2D development technology to develop two-dimensional elements in the 2.5D design drawing, uses WebGL to develop three-dimensional elements in the 2.5D design drawing, and has low development difficulty and good realization effect.
Drawings
The following describes embodiments of the present invention in further detail with reference to the accompanying drawings.
FIG. 1 is a schematic illustration of a 2.5D design;
FIG. 2 is a schematic diagram of a three-dimensional world coordinate system;
FIG. 3 is a schematic view of a local coordinate system of the camera;
FIG. 4 is a schematic view of point A;
FIG. 5 is a schematic diagram of a matrix operation;
FIG. 6 is a schematic diagram of a three-dimensional world coordinate system arranged symmetrically;
fig. 7 is a side view of fig. 6 in a view cone.
Detailed Description
In order to make the technical means, the original characteristics, the achieved purpose and the efficacy of the invention easy to understand, the invention is further described with reference to the specific drawings.
Example (b):
as shown in fig. 1 to 7, a method for developing a 2.5D web page based on a browser includes the following steps:
setting a two-dimensional element tag and a three-dimensional element tag in an html document;
developing two-dimensional elements of the design drawing in the two-dimensional element label;
and developing the three-dimensional elements of the design drawing in the three-dimensional element label.
Further, the method for developing the two-dimensional element of the design drawing in the two-dimensional element label uses at least one of the following methods: developing two-dimensional elements of the blueprint using html and css, developing two-dimensional elements of the blueprint using html and js, developing two-dimensional elements of the blueprint using svg and css, developing two-dimensional elements of the blueprint using svg and js, or developing two-dimensional elements of the blueprint using 2D context of canvas.
Further, the method for developing the three-dimensional element of the design drawing in the three-dimensional element label is to develop the three-dimensional element of the design drawing by using WebGL in the three-dimensional element label.
Further, the two-dimensional element tag and the three-dimensional element tag set the same left, top, width, and height values.
Further, developing a three-dimensional element of a design drawing using WebGL in a three-dimensional element tag includes the steps of:
establishing a three-dimensional world coordinate system by taking the geometric center of the design drawing as an origin;
acquiring three-dimensional world coordinates of key points of the three-dimensional elements;
and developing the three-dimensional elements of the design drawing in the three-dimensional element label according to the three-dimensional world coordinates of the key points of the three-dimensional elements.
Further, the obtaining of the three-dimensional world coordinates of the key points of the three-dimensional elements comprises the following steps:
setting parameters of a camera, wherein the camera is an orthogonal projection camera, the upper direction of the camera is the same as the y-axis direction (0,1,0) of a three-dimensional world coordinate system, the camera is aligned with the coordinate origin of the three-dimensional world coordinate system, the left, right, upper and lower side surfaces of a visual cone of the camera are width/-2, width/2, height/2 and height/-2 respectively, and the width and height values are width and height values of a three-dimensional element label;
establishing a camera local coordinate system by taking the geometric center of the design drawing as an origin to obtain a three-dimensional world coordinate system and a conversion matrix C of the camera local coordinate system;
setting the coordinates of the camera in a three-dimensional world coordinate system, and solving a transformation matrix C;
acquiring coordinates of key points of the three-dimensional elements in a local coordinate system of the camera;
and solving the three-dimensional world coordinates of the three-dimensional elements according to the solved conversion matrix C.
Further, the transformation matrix C is:
further, the coordinate of the key point of the three-dimensional element in the local coordinate system of the camera is obtained by measuring the pixel value of the key point of the three-dimensional element to obtain the x value and the y value of the three-dimensional element in the local coordinate system of the camera, and any negative z value is taken.
Further, when coordinates of the camera in the three-dimensional world coordinate system are set, the coordinates of the camera satisfy
And alpha is an included angle between the projection of the x axis of the three-dimensional world coordinate system in the visual cone of the camera and the x axis of the local coordinate system of the camera.
Further, the two-dimensional element includes a background of the design drawing, and the three-dimensional element includes an animation.
As shown in fig. 1, a 2.5D design drawing divides design elements into two-dimensional elements and three-dimensional elements according to the 2.5D design drawing (a large screen draft provided by a designer). Two-dimensional elements and three-dimensional elements are developed separately, and therefore first need to be distinguished according to a design drawing.
Generally, all static elements can be considered as two-dimensional elements, such as a background picture of a large screen.
Of the other elements with animation effects, the animation is obviously spatial, and the animation relates to the change of spatial coordinates or elements which are subjected to 3D modeling by designers, such as cubes and the like, and is suitable for being developed as three-dimensional elements.
The distinction between two-dimensional and three-dimensional elements is not absolute and should be negotiated by the skilled and the designer as the case may be.
Preparing a layer:
and placing a two-dimensional element label and a three-dimensional element label in the html document to be used as containers of the two-dimensional element and the three-dimensional element respectively.
Two labels are set as absolute positioning (position) by css, and the same left, top, width and height values are set, so that the two-dimensional element label and the three-dimensional element label are completely overlapped and are regarded as a 2D layer and a 3D layer.
The 3D layer is a set of web page elements drawn by the webgl technique, and generally, a canvas label may be used as the 3D layer, and when the 3D graph is drawn, a 3D context is obtained by the canvas, and the webgl drawing is started.
The 2D layer is a collection of elements made with other web technologies (html, css, 2D context for canvas).
Two-dimensional elements of the design drawing are developed in the two-dimensional element label by using a two-dimensional element development method (traditional front-end technical means html, css and canvas).
The two-dimensional element can be a common html tag or a picture in png and jpg formats with the html tag as a carrier.
The two-dimensional element may be a canvas label, the 2D context of which provides various 2D drawing interfaces.
The two-dimensional elements can be svg scalable vector graphics, and can realize graphics which cannot be realized by a plurality of ordinary html tags.
The two-dimensional elements can fully utilize the attributes provided by the cs development method, and can be flexibly matched to develop special effects.
Common key css attributes are:
the transition attribute of css can define different transition effects for an element when switching between different states.
The transform property of css allows a given element to be rotated, scaled, tilted, or translated.
The filter attribute of cs applies graphical effects such as blurring or color shifting to elements, typically used to adjust the rendering of images, backgrounds, and borders.
The animation property of the css is used to specify one or more sets of animations.
And selecting a geometric center point in the design drawing as an origin (0,0,0) of a three-dimensional world coordinate system, and establishing the three-dimensional world coordinate system.
The 2.5D design does not relate to 3D rendering of the entire scene, and the camera position of the 3D scene cannot be provided, so the position of the camera in the 3D world coordinate system needs to be set first.
The 2.5D plans generally employ parallel perspective, and correspondingly, the cameras of the 3D scene employ orthographic cameras.
The coordinates of the orthogonal projection camera in a three-dimensional world coordinate system are set as follows: (x, y, z), the upward direction of the orthogonal projection camera is the same as the y-axis direction (0,1,0) of the three-dimensional world coordinate system, the orthogonal projection camera is aligned with the coordinate origin (0,0,0) of the three-dimensional world coordinate system, the left, right, upper and lower sides of the visual cone of the camera are respectively width/-2, width/2, height/2 and height/-2, wherein the width and height values are the width and height values of the three-dimensional element label.
The direction in which the camera is aimed and the upward direction of the camera together determine the orientation of the camera lens. In a three-dimensional coordinate system, the camera has an up direction ( default 0,1, 0). The up vector is to assist the lookup at function (which is used to "look" an object at a point) to determine the direction of the result.
The arrangement of the view cone of the camera determines that the position of the orthogonal projection camera in the 2.5D design drawing is the geometric center, the horizontal direction is the x axis, the vertical direction is the y axis, the reverse direction of the z axis is perpendicular to the design drawing inward, and a local coordinate system of the camera is established.
After the local coordinate system of the camera is established, a conversion matrix C of the local coordinate system of the camera and the three-dimensional world coordinate system can be established, and the establishment process is as follows:
camera z-axis direction vector:
Vz＝(x,y,z)-(0,0,0)＝(x,y,z)
camera z-axis unit direction vector:
camera x-axis direction vector:
camera x-axis unit direction vector:
camera y-axis unit direction vector:
from this, a transformation matrix C is obtained:
the relationship between the three-dimensional world coordinates and the orthogonal projection camera local coordinates is as follows:
p three-dimensional world is CP orthographic projection camera.
With the transformation matrix C and the previously set coordinates (x, y, z) of the camera in the three-dimensional world coordinate system, the three-dimensional world coordinates can be calculated from the local coordinates of the camera.
Since the coordinates of the camera in the three-dimensional world coordinate system are unknown, it is necessary to set a camera three-dimensional coordinate to determine the value of the conversion matrix C. The coordinates of the camera in the three-dimensional world coordinate system can be set arbitrarily, but x and z cannot be 0 at the same time, otherwise some items of the matrix C will be meaningless (denominator 0).
Since the design has only two dimensions, the z-value of the camera local coordinates cannot be determined. However, for orthogonal projection, the z-axis value is only used for depth detection and does not affect imaging, so when the z-axis value is selected, only the z-axis coordinate under the local coordinate system of the camera is required to be guaranteed to be negative. Just because the z value is uncertain, the coordinate value of a certain point in the three-dimensional world coordinate system can have multiple values, but due to the principle of orthogonal projection, the image of any value after projection in the three-dimensional space is superposed with the design drawing.
Setting the coordinates of the orthogonal projection camera in a three-dimensional world coordinate system, solving a conversion matrix C, then obtaining the coordinates of key points of three-dimensional elements in a camera local coordinate system, and obtaining the three-dimensional world coordinates of the three-dimensional elements according to the solved conversion matrix C.
Acquiring coordinates of the key points of the three-dimensional element in the camera local coordinate system is to acquire x values and y values of the three-dimensional element in the camera local coordinate system by measuring (for example, by ps measurement) pixel values of the key points of the three-dimensional element, and any negative z value is taken.
The width and height pixel values of the design drawing and the width and height values of the canvas are kept consistent, and direct measurement is only needed. The width and height pixel values for the blueprint are proportional to the width and height values of canvas, and the measured width and height pixel values for the blueprint are multiplied by a certain proportion.
For example, the blueprint is 100 x 50, canvas is set to 300x150, and the measured x and y values of the blueprint are multiplied by 3 respectively.
The key points of the three-dimensional element include vertices of a cubic figure, and the like.
The following illustrates how three-dimensional world coordinates are determined from the camera local coordinates of a point.
The position of the camera in the three-dimensional world coordinate system is set to (300,300,300). The cuboid placed in the scene is 150,100,50 in size and placed at the origin of coordinates. So if one wants to see it completely, the position of the camera cannot be located inside the cuboid, so it is set to (300,300,300) in this position, the camera is outside the cuboid and the field of view of the camera can cover that cuboid.
As shown in fig. 4, point a, whose x, y values for the local coordinates of the camera are well defined, is measured as (36, 0) using the measurement tool, and the z-axis can be set to a negative number of-100.
As shown in fig. 5, the world coordinate value of point a is obtained by matrix operation: (267.72,242.26,216.8). The point drawn in the three-dimensional world coordinate system using this coordinate value will be located exactly at point a. Since the camera local z-coordinate is arbitrarily determined, the calculated three-dimensional world coordinate may not be at true point a, but he may just "block" point a, visually at point a.
Other points can be determined in the same way.
And after the camera coordinates are set, obtaining a conversion matrix C, selecting key points of the three-dimensional elements, obtaining coordinates of the key points in the three-dimensional design coordinates, and developing in the three-dimensional element labels by using WebGL according to the coordinates.
Further, 2.5D plans often contain a large number of elements that are visually cuboid. If the coordinate values of the camera in the three-dimensional world coordinate system are set randomly, it cannot be guaranteed that the rectangular solid element is indeed a rectangular solid in the three-dimensional world coordinate system.
When these rectangular parallelepiped elements satisfy the following conditions at the same time:
the cuboid has a group of (four) edges parallel to the y-axis of the camera coordinate system;
the angular bisector of each internal angle of the upper plane or the lower plane (parallelogram in the design drawing) of the cuboid is parallel to the x axis or the y axis of the camera coordinate system;
the upper inner angle and the lower inner angle of the upper plane or the lower plane (parallelogram in the design drawing) of the cuboid are obtuse angles, and the left inner angle and the right inner angle are acute angles.
In order to simplify the determination of the coordinate values of the key points of the elements in the three-dimensional world coordinate system and make the coordinate values of the three-dimensional elements conform to the visual feeling when viewing the design drawing, a set of edges of the elements in the three-dimensional world coordinate system are parallel to the y axis, and the upper plane and the lower plane are perpendicular to the y axis.
To achieve the above-described effects, the coordinate values of the camera in the three-dimensional world coordinate system may be set as follows.
In a three-dimensional world coordinate system, a projection point of an image xz plane of a camera is B, perpendicular lines are respectively drawn towards a z axis and an x axis through the B point, and the vertical feet are respectively A and C.
FIG. 6 is a projection of a square OABC onto the near plane of the camera view cone. The projection OABC in FIG. 6 is diamond shaped, as previously assumed. When the x coordinate of the camera is m, the actual lengths of OA and OC are m, and the actual length of AC is m
According to the projection principle, the AC projection length in FIG. 6 is still the same since the AC is parallel to the projection plane
Given that the projection of the x-axis of the three-dimensional world coordinate system onto the camera view cone forms an angle α (which is easily determined in the design drawing) with the x-axis of the local coordinate system of the camera, OB in FIG. 6 is long
Fig. 7 is a plane where the camera and the y-axis are located in the three-dimensional world coordinate system. OB length in FIG. 7
The calculated projection length t is
The height h of the camera is easily obtained from a similar triangle
In summary, the coordinates of the camera should satisfy
It will be understood by those skilled in the art that the present invention is not limited to the embodiments described above, and that various changes and modifications may be made without departing from the spirit and scope of the invention as defined in the appended claims. The scope of the invention is defined by the appended claims and equivalents thereof.
Claims (4)
1. A2.5D webpage development method based on a browser is characterized by comprising the following steps:
setting a two-dimensional element tag and a three-dimensional element tag in an html document;
developing two-dimensional elements of the design drawing in the two-dimensional element label;
developing three-dimensional elements of the design drawing in the three-dimensional element label;
the development method for developing the three-dimensional elements of the design drawing in the three-dimensional element label is to develop the three-dimensional elements of the design drawing by using WebGL in the three-dimensional element label;
the method for developing the three-dimensional elements of the design drawing by using the WebGL in the three-dimensional element label comprises the following steps of:
establishing a three-dimensional world coordinate system by taking the geometric center of the design drawing as an origin;
acquiring three-dimensional world coordinates of key points of the three-dimensional elements;
developing the three-dimensional elements of the design drawing in the three-dimensional element label according to the three-dimensional world coordinates of the key points of the three-dimensional elements;
the method for acquiring the three-dimensional world coordinates of the key points of the three-dimensional elements comprises the following steps:
setting parameters of a camera, wherein the camera is an orthogonal projection camera, the upper direction of the camera is the same as the y-axis direction (0,1,0) of a three-dimensional world coordinate system, the camera is aligned with the coordinate origin of the three-dimensional world coordinate system, the left, right, upper and lower side surfaces of a visual cone of the camera are width/-2, width/2, height/2 and height/-2 respectively, and the width and height values are width and height values of a three-dimensional element label;
establishing a camera local coordinate system by taking the geometric center of the design drawing as an origin to obtain a three-dimensional world coordinate system and a conversion matrix C of the camera local coordinate system;
setting the coordinates of the camera in a three-dimensional world coordinate system, and solving a transformation matrix C;
acquiring coordinates of key points of the three-dimensional elements in a local coordinate system of the camera;
solving the three-dimensional world coordinate of the three-dimensional element according to the solved conversion matrix C;
the transformation matrix C is:
acquiring coordinates of key points of the three-dimensional elements in a local coordinate system of the camera, namely acquiring x values and y values of the three-dimensional elements in the local coordinate system of the camera by measuring pixel values of the key points of the three-dimensional elements, and arbitrarily taking a negative z value;
when coordinates of the camera in a three-dimensional world coordinate system are set, the coordinates of the camera satisfy
And alpha is an included angle between the projection of the x axis of the three-dimensional world coordinate system in the visual cone of the camera and the x axis of the local coordinate system of the camera, and m is the x coordinate of the camera.
2. The browser-based 2.5D webpage development method according to claim 1, wherein the two-dimensional element development method for developing the design drawing in the two-dimensional element label uses at least one of the following methods: developing two-dimensional elements of the blueprint using html and css, developing two-dimensional elements of the blueprint using html and js, developing two-dimensional elements of the blueprint using svg and css, developing two-dimensional elements of the blueprint using svg and js, or developing two-dimensional elements of the blueprint using 2D context of canvas.
3. The browser-based 2.5D webpage development method of claim 1, wherein the two-dimensional element tags and the three-dimensional element tags set the same left, top, width and height values.
4. A browser-based 2.5D web page development method according to any one of claims 1 to 3, wherein said two-dimensional elements comprise the background of a design drawing and said three-dimensional elements comprise animations.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010356756.5A CN111563929B (en) | 2020-04-29 | 2020-04-29 | 2.5D webpage development method based on browser |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010356756.5A CN111563929B (en) | 2020-04-29 | 2020-04-29 | 2.5D webpage development method based on browser |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111563929A CN111563929A (en) | 2020-08-21 |
| CN111563929B true CN111563929B (en) | 2020-12-25 |
Family
ID=72071808
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010356756.5A Active CN111563929B (en) | 2020-04-29 | 2020-04-29 | 2.5D webpage development method based on browser |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111563929B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114529706B (en) * | 2022-04-22 | 2022-07-08 | 三一筑工科技股份有限公司 | Method, device, equipment and medium for splitting target object in three-dimensional model |
Family Cites Families (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8817021B1 (en) * | 2011-11-11 | 2014-08-26 | Google Inc. | System for writing, interpreting, and translating three-dimensional (3D) scenes |
| EP2859531B1 (en) * | 2012-06-06 | 2018-08-01 | Siemens Aktiengesellschaft | Method for image-based alteration recognition |
| CN104978357B (en) * | 2014-04-10 | 2018-08-24 | 阿里巴巴集团控股有限公司 | A kind of data visualization shows method and apparatus |
| CN105741228B (en) * | 2016-03-11 | 2019-03-12 | 腾讯科技（深圳）有限公司 | Graphic processing method and device |
| CN108830941A (en) * | 2018-06-25 | 2018-11-16 | 中国移动通信集团西藏有限公司 | 3D guide method |
| CN109145366B (en) * | 2018-07-10 | 2022-11-18 | 湖北工业大学 | Web 3D-based lightweight visualization method for building information model |
| CN109656665A (en) * | 2018-12-20 | 2019-04-19 | 成都四方伟业软件股份有限公司 | A kind of visual presentation method of data, component and readable storage medium storing program for executing |
| CN110851558B (en) * | 2020-01-14 | 2020-05-19 | 武大吉奥信息技术有限公司 | Universal loading method for map of coordinate system in earth |
-
2020
- 2020-04-29 CN CN202010356756.5A patent/CN111563929B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN111563929A (en) | 2020-08-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104268922B (en) | A kind of image rendering method and image rendering device | |
| CN104574501B (en) | A kind of high-quality texture mapping method for complex three-dimensional scene | |
| US8059119B2 (en) | Method for detecting border tiles or border pixels of a primitive for tile-based rendering | |
| EP3170151B1 (en) | Blending between street view and earth view | |
| CN106575448B (en) | Image rendering of laser scan data | |
| CN108230435B (en) | Graphics processing using cube map textures | |
| JP7390497B2 (en) | Image processing methods, apparatus, computer programs, and electronic devices | |
| GB2465793A (en) | Estimating camera angle using extrapolated corner locations from a calibration pattern | |
| CN102163340A (en) | Method for labeling three-dimensional (3D) dynamic geometric figure data information in computer system | |
| EP1988508A1 (en) | Universal rasterization of graphic primitives | |
| CN112991558B (en) | Map editing method and map editor | |
| KR20140073480A (en) | Rendering a text image following a line | |
| CN109741431B (en) | Two-dimensional and three-dimensional integrated electronic map frame | |
| CN115439609B (en) | Three-dimensional model rendering method, system, equipment and medium based on map service | |
| CN112184815A (en) | Method and device for determining position and posture of panoramic image in three-dimensional model | |
| WO2023010851A1 (en) | Webgl-based graphics rendering method, apparatus and system | |
| CN111563929B (en) | 2.5D webpage development method based on browser | |
| CN113436307B (en) | Mapping algorithm based on osgEarth image data to UE4 scene | |
| CN111932448B (en) | Data processing method, device, storage medium and equipment | |
| JP5893142B2 (en) | Image processing apparatus and image processing method | |
| CN116263984A (en) | Three-dimensional map visualization method and device, electronic equipment and storage medium | |
| CN115496829A (en) | Method and device for quickly manufacturing local high-definition image map based on webpage | |
| Elfarargy et al. | 3D surface reconstruction using polynomial texture mapping | |
| KR100943451B1 (en) | System for manufacturing ortho image using tiff format of dem-tiff and method therefor | |
| Trapp | Interactive rendering techniques for focus+ context visualization of 3d geovirtual environments |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |