CN112614218B - Display method for realizing two-dimensional character conversion and three-dimensional character conversion - Google Patents
Display method for realizing two-dimensional character conversion and three-dimensional character conversion Download PDFInfo
- Publication number
- CN112614218B CN112614218B CN202011567279.3A CN202011567279A CN112614218B CN 112614218 B CN112614218 B CN 112614218B CN 202011567279 A CN202011567279 A CN 202011567279A CN 112614218 B CN112614218 B CN 112614218B
- Authority
- CN
- China
- Prior art keywords
- characters
- dimensional
- user
- model
- web
- 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
- G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
Abstract
The invention belongs to the technical field of vision, relates to a word processing tool, and particularly relates to a display method for converting two-dimensional words into three-dimensional words; the two-dimensional characters customized by a user are converted into three-dimensional character display effects by data modeling and Web GL technology. The user only needs to input characters, set the related attributes of the characters, texture maps and the like at a Web end, then a program renders the contents set by the user into a 3D character through calculation, the user considers complicated three-dimensional coordinate calculation and font model establishment in an unordered manner, and a three-dimensional model is established through the set fonts and the characters; mapping the texture picture to the three-dimensional character model; the user self-defines the three-dimensional rotation of the character model; saving the 3D characters into a picture by a user after the user saves the 3D characters; the program finishes the production after saving the data of the user. The method is simple to manufacture and does not need calculation; the reuse rate is high; the rendering performance is high; the compatibility is strong.
Description
Technical Field
The invention belongs to the technical field of vision, relates to a word processing tool, and particularly relates to a display method for converting two-dimensional words into three-dimensional words.
Background
In the technical field of front ends, a style sheet or element superposition mode can be used for simply simulating a 3D character, but the character effect realized by the mode is poor, and the functions of 3D rotation and the like are not supported.
The traditional 3D character making process is complex and has high difficulty, and a maker is required to have a certain mathematical modeling basis and certain programming capability. And the reuse rate of the model is low, the model is often in the effect of independent customization, the general cost is high, and the period is not too short.
Nowadays, consumers have higher requirements on originality or visual effect along with the increasing aesthetic quality, so the basic style effect cannot attract the consumers. With the continuous development of Web page technologies, a three-dimensional visual effect processing scheme Web GL with high efficiency and excellent performance is gradually provided at a Web end, and how to provide a solution which is simple in operation, compatible with multiple ends and has good performance through a three-dimensional rendering engine of the Web GL becomes an increasingly urgent need.
Disclosure of Invention
Aiming at the performance of various browsers and the operation habits of users at the present stage, the invention provides a method for converting two-dimensional plane characters into SVG (scalable vector graphics) and converting the SVG into a three-dimensional path model based on the Web GL technology, and finally realizing 3D characters with stereoscopic impression.
In order to achieve the aim, the invention adopts the technical proposal that,
1. a display method for converting two-dimensional characters into three-dimensional characters specifically comprises the following steps:
1) adding an adding entry of the 3D characters and configuration items of the 3D characters at a Web end;
2) a user inputs characters, sets fonts and a Web worker is started by a Web end;
3) starting to obtain fonts, loading binary stream according to the font fragment path and carrying out conversion;
4) acquiring data configured by a user and an SVG path, starting the creation of a font model by a Web worker, starting to draw the path model according to the SVG, rendering the path model, starting to calculate the space between characters and the line spacing, and then establishing a three-dimensional coordinate, a model vertex shader and a fragment shader according to the above contents to obtain a complete three-dimensional font model;
5) the obtained 3D font model is transmitted back to the main thread, and after the main thread obtains the model, a relevant tool for rendering the 3D characters is initialized;
6) the method comprises the steps of a Web GL rendering engine, a three-dimensional graph drawing scene is created, an environment light source is well defined, a camera is initialized, a camera view port is adjusted, and the scene is created;
7) adding a font model and light in the created scene, rendering the 3D characters by a Web GL rendering engine according to the obtained scene and a camera;
8) loading a texture map, namely loading a picture through a Uniform Resource Locator (URL), creating the texture map according to the picture, mapping the texture map to a corresponding font model according to a fragment shader, and triggering a Web GL engine to refresh to obtain a complete 3D character;
9) the size of adjustment canvas, according to the font size of 3D characters promptly, calculate the required two-dimensional plane dimension of corresponding font size, set up the canvas size, the user can begin to operate the 3D characters, carries out the 3D rotation, when rotating to suitable angle, the user can save the 3D characters, with data storage to the server to save into a picture with the 3D characters.
Preferably, the configuration items of the 3D characters include character font setting, font size setting, character spacing adjustment, character line spacing adjustment, character 3D rotation, and 3D character texture mapping.
Preferably, the Web worker is responsible for starting a new sub-thread at a Web end for complex calculation, and is responsible for calculating a character vertex shader and creating a three-dimensional character path model.
Preferably, the binary stream comprises a font fragment binary stream and a font binary stream, the binary stream is converted into an SVG path through opentype.
Preferably, the related tools include Web GL Render, Camera, Scene, Light, Texture;
the Web GL Render is a rendering engine;
camera is a Camera;
scene is Scene;
light is lamplight;
texture is Texture mapping.
Compared with the prior art, the invention has the advantages and positive effects that,
the method and the system separate the making of the font model from other steps, and the realization scheme has the advantages that the main thread is not blocked in the process of creating the font model, and a user can continue to perform other interactions. The integral method comprises the following steps: the user is simple to manufacture and does not need to calculate; the reuse rate is high; the rendering performance is high; the compatibility is strong.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive labor.
Fig. 1 is a flowchart of a display method for converting two-dimensional characters into three-dimensional characters.
Detailed Description
In order that the above objects, features and advantages of the present invention can be more clearly understood, the present invention will be further described with reference to the accompanying drawings and examples. It should be noted that the embodiments and features of the embodiments of the present application may be combined with each other without conflict.
In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present invention, however, the present invention may be practiced in other ways than those specifically described herein, and thus the present invention is not limited to the specific embodiments of the present disclosure.
Embodiment 1, as shown in fig. 1, the present invention provides a method for displaying a three-dimensional text converted from a two-dimensional text, that is, the difficulty of editing a three-dimensional model on a browser is solved, a user only needs to perform simple setting and then uses a program to perform conversion calculation, and meanwhile, the use efficiency of the model is also improved; and rendering the three-dimensional model through the Web GL on a terminal capable of supporting a Web GL engine, and displaying the three-dimensional model as a picture on an unsupported terminal.
The method is realized by the following scheme:
A. designing a Web page, providing a 3D character adding entry, inputting a text for a user, setting a font, a line spacing, a character size and a texture mapping or texture color, and starting to process the 3D characters after the user sets the 3D characters.
B. And starting a Web worker, wherein the Web worker is responsible for opening up a sub-thread, is positioned at a background and is responsible for large calculation amount, the method mainly comprises the steps of obtaining font binary stream, converting the binary stream into an SVG path through opentype.js, then entering a step of model creation, converting the path into a three-dimensional path model according to the obtained SVG path, then starting positioning, and calculating the three-dimensional space coordinates of each character under the three-dimensional path model according to the content in the implementation scheme A.
C. After the Web worker initializes the model, the model is transmitted back to the main thread, after the main thread obtains the model, the model is temporarily stored, and then other necessary contents are initialized.
D. Initializing other dependent objects, including: web GL rendering engine, perspective projection camera, scene, light, texture mapping, loading the picture of the texture mapping, creating texture after loading, merging the texture and the model of the implementation scheme C, adding the merged texture to the scene, and adding the light to the scene. Then, the camera is initialized, and the position of the camera and the size of the view port are set according to the font size. After the steps are completed, the camera and the scene are handed to a rendering engine, and the rendering engine is responsible for rendering until the 3D character is created.
E. At the moment, the user can start to operate the 3D characters to perform 3D rotation, when the 3D characters are rotated to a proper angle, the user can store the 3D characters, data are stored in the server, the 3D characters are stored into one picture, multi-end multiplexing is achieved, and resource waste when the user enters the server again is reduced.
As can be seen from the above description, the method mainly includes two major steps, namely, the Web-side interactive page creation, and the 3D text data storage and display.
Making a Web-side interactive page:
A. the interactive tag is added through HTML, and comprises a character input box, a character size setting input box, a drop-down box selection character size, a line space and a character space setting sliding strip, a texture mapping selection box and a 3D character final display area.
B. The element style is set through the CSS, and the element style is converted into a more attractive page.
C. And connecting the contents through JavaScript to realize specific user interaction logic, and mapping the interactive specific contents into the 3D characters when the user triggers interaction.
D. After the above contents are realized, the server needs to be connected, the data set by the user is stored in the database of the server through AJAX, and the data of the user can be restored when entering next time, so that a persistent effect is achieved.
By this we describe the steps of content production, what then needs to be done is the preservation of the content. We need to save the contents made by us into the database, and when rendering the 3D text, we get the data from the database to render. The preservation steps are as follows:
A. after the user interaction is completed, data set by the user are obtained, abstracted into a data object and sent to the server through AJAX, and the server stores the data object into a database table associated with the account according to the account information of the user.
B. The method comprises the steps of converting 3D characters created by a user into a picture before storage, sending a binary stream of the picture to a server, storing the file by the server, and storing the URL of a stored picture address into a database table after storage is completed.
C. When a user enters the editor next time, the stored pictures are preferentially displayed, and after the user triggers the interaction, the data are rendered into a 3D character again through the steps of the implementation scheme in the invention content for interaction.
The above description is only a preferred embodiment of the present invention, and not intended to limit the present invention in other forms, and any person skilled in the art may apply the above modifications or changes to the equivalent embodiments with equivalent changes, without departing from the technical spirit of the present invention, and any simple modification, equivalent change and change made to the above embodiments according to the technical spirit of the present invention still belong to the protection scope of the technical spirit of the present invention.
Claims (5)
1. A display method for realizing two-dimensional character conversion and three-dimensional characters is characterized by comprising the following steps:
1) adding an adding entry of the 3D characters and configuration items of the 3D characters at a Web end;
2) a user inputs characters, sets fonts and a Web worker is started by a Web end;
3) starting to obtain fonts, loading binary stream according to the font fragment path and carrying out conversion;
4) acquiring data configured by a user and an SVG path, starting the creation of a font model by a Web worker, starting to draw the path model according to the SVG, rendering the path model, starting to calculate the space between characters and the line spacing, and then establishing a three-dimensional coordinate, a model vertex shader and a fragment shader according to the above contents to obtain a complete three-dimensional font model;
5) the obtained 3D font model is transmitted back to the main thread, and after the main thread obtains the model, a relevant tool for rendering the 3D characters is initialized;
6) the method comprises the steps of a Web GL rendering engine, a three-dimensional graph drawing scene is created, an environment light source is well defined, a camera is initialized, a camera view port is adjusted, and the scene is created;
7) adding a font model and light in the created scene, rendering the 3D characters by a Web GL rendering engine according to the obtained scene and a camera;
8) loading a texture map, namely loading a picture through a Uniform Resource Locator (URL), creating the texture map according to the picture, mapping the texture map to a corresponding font model according to a fragment shader, and triggering a Web GL engine to refresh to obtain a complete 3D character;
9) the size of adjustment canvas, according to the font size of 3D characters promptly, calculate the required two-dimensional plane dimension of corresponding font size, set up the canvas size, the user can begin to operate the 3D characters, carries out the 3D rotation, when rotating to suitable angle, the user can save the 3D characters, with data storage to the server to save into a picture with the 3D characters.
2. The method as claimed in claim 1, wherein the configuration items of the 3D text include a text font setting, a font size setting, a text pitch adjustment, a text line spacing adjustment, a text 3D rotation, and a 3D text texture mapping.
3. The method as claimed in claim 2, wherein the Web worker is responsible for starting a new sub-thread at the Web end for complex computation, computing a vertex shader, and creating a three-dimensional text path model.
4. The method as claimed in claim 3, wherein the binary stream includes a font fragment binary stream and a font binary stream, the binary stream is converted into an SVG path through opentype.
5. The method as claimed in claim 4, wherein the related tools include Web GL Render, Camera, Scene, Light, Texture;
the Web GL Render is a rendering engine;
camera is a Camera;
scene is Scene;
light is lamplight;
texture is Texture mapping.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011567279.3A CN112614218B (en) | 2020-12-25 | 2020-12-25 | Display method for realizing two-dimensional character conversion and three-dimensional character conversion |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011567279.3A CN112614218B (en) | 2020-12-25 | 2020-12-25 | Display method for realizing two-dimensional character conversion and three-dimensional character conversion |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112614218A CN112614218A (en) | 2021-04-06 |
| CN112614218B true CN112614218B (en) | 2022-05-20 |
Family
ID=75247889
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011567279.3A Active CN112614218B (en) | 2020-12-25 | 2020-12-25 | Display method for realizing two-dimensional character conversion and three-dimensional character conversion |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112614218B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113867673B (en) * | 2021-09-27 | 2022-09-16 | 湖南省舟际智控电气科技有限公司 | Method and device for displaying three-dimensional character font of liquid crystal display |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2004028650A1 (en) * | 2002-09-30 | 2004-04-08 | Igt | 3-d text in a gaming machine |
| CN103177467A (en) * | 2013-03-27 | 2013-06-26 | 四川长虹电器股份有限公司 | Method for creating naked eye 3D (three-dimensional) subtitles by using Direct 3D technology |
| CN109308734A (en) * | 2017-07-27 | 2019-02-05 | 腾讯科技（深圳）有限公司 | The generation method and its device of 3D text, equipment, storage medium |
-
2020
- 2020-12-25 CN CN202011567279.3A patent/CN112614218B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2004028650A1 (en) * | 2002-09-30 | 2004-04-08 | Igt | 3-d text in a gaming machine |
| CN103177467A (en) * | 2013-03-27 | 2013-06-26 | 四川长虹电器股份有限公司 | Method for creating naked eye 3D (three-dimensional) subtitles by using Direct 3D technology |
| CN109308734A (en) * | 2017-07-27 | 2019-02-05 | 腾讯科技（深圳）有限公司 | The generation method and its device of 3D text, equipment, storage medium |
Non-Patent Citations (3)
| Title |
|---|
| VC++中用OpenGL编制CHzGL类实现旋转立体汉字;陈忠;《电脑编程技巧与维护》;20011231(第06期);全文 * |
| 在VC++中实现动态中文立体字;张波云;《多媒体世界》;20001231(第08期);全文 * |
| 影视片头三维文字的简单快速制作流程;吴江东;《视听界(广播电视技术)》;20160210(第01期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112614218A (en) | 2021-04-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20210240913A1 (en) | Font rendering method and apparatus, and computer-readable storage medium | |
| US9275493B2 (en) | Rendering vector maps in a geographic information system | |
| US7688317B2 (en) | Texture mapping 2-D text properties to 3-D text | |
| CN108959392B (en) | Method, device and equipment for displaying rich text on 3D model | |
| CN110717963B (en) | Mixed rendering display method, system and storage medium of replaceable model based on WebGL | |
| CN111324837B (en) | Three-dimensional chart visualization method and device based on GIS system at web front end | |
| CN105808217A (en) | Flow chart drawing method and system based on XML | |
| CN111221596B (en) | Font rendering method, apparatus and computer readable storage medium | |
| TW201527990A (en) | A font cloud service system | |
| CN109636894B (en) | Dynamic three-dimensional thermodynamic calculation method and system based on pixel rasterization | |
| CN112330532A (en) | Image analysis processing method and equipment | |
| CN112614218B (en) | Display method for realizing two-dimensional character conversion and three-dimensional character conversion | |
| US20220245874A1 (en) | Method of converting and replaying styles of vector images | |
| CN111583379A (en) | Rendering method and device of virtual model, storage medium and electronic equipment | |
| Bakhromovna | Innovative Process of Computer Graphics | |
| CN117390322A (en) | Virtual space construction method and device, electronic equipment and nonvolatile storage medium | |
| CN116954605A (en) | Page generation method and device and electronic equipment | |
| He et al. | WordArt Designer: User-Driven Artistic Typography Synthesis using Large Language Models | |
| CN115761188A (en) | Method and system for fusing multimedia and three-dimensional scene based on WebGL | |
| CN115391692A (en) | Video processing method and device | |
| CN115311395A (en) | Three-dimensional scene rendering method, device and equipment | |
| CN114170381A (en) | Three-dimensional path display method and device, readable storage medium and electronic equipment | |
| EP2816521A1 (en) | Editing method of the three-dimensional shopping platform display interface for users | |
| Limberger et al. | OpenLL: an API for dynamic 2D and 3D labeling | |
| KR20150101064A (en) | System for making cartoon character |
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 | ||
| CP02 | Change in the address of a patent holder | ||
| CP02 | Change in the address of a patent holder |
Address after: Room 301, Building 8, No. 67 Industrial Avenue North Road, Haizhu District, Guangzhou City, Guangdong Province, 510000 Patentee after: GUANGZHOU FAISCO INTERNET TECHNOLOGY CO.,LTD. Address before: 510000 first floor, building 5, NO.67, North Industrial Avenue, Haizhu District, Guangzhou, Guangdong Province (office use only) Patentee before: GUANGZHOU FAISCO INTERNET TECHNOLOGY CO.,LTD. |