CN102937968B - A kind of binocular 3D webpage implementation method based on Canvas and system - Google Patents

A kind of binocular 3D webpage implementation method based on Canvas and system Download PDF

Info

Publication number
CN102937968B
CN102937968B CN201210384687.4A CN201210384687A CN102937968B CN 102937968 B CN102937968 B CN 102937968B CN 201210384687 A CN201210384687 A CN 201210384687A CN 102937968 B CN102937968 B CN 102937968B
Authority
CN
China
Prior art keywords
canvas
frame
webpage
depending
positioning properties
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
Application number
CN201210384687.4A
Other languages
Chinese (zh)
Other versions
CN102937968A (en
Inventor
周军
张少博
张艳芳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Jiaotong University
Original Assignee
Shanghai Jiaotong University
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Shanghai Jiaotong University filed Critical Shanghai Jiaotong University
Priority to CN201210384687.4A priority Critical patent/CN102937968B/en
Publication of CN102937968A publication Critical patent/CN102937968A/en
Application granted granted Critical
Publication of CN102937968B publication Critical patent/CN102937968B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Abstract

The invention provides a kind of binocular 3D webpage implementation method based on Canvas and system, method step: design webpage design sketch, obtains 3D locating information; Create 3D webpage; Resolve 3D webpage, obtain left and right and look frame; According to different 3D transformats, left and right is plotted to system on Canvas depending on frame to comprise: 3D web-page parser; 3D transformat processor.Main points of the present invention are that the 2D positioning properties of element position on control Canvas is expanded to 3D positioning properties, thus obtain the stereoeffect with depth feelings.3D positioning properties is made up of 2D positioning properties and 3D depth attribute, and wherein 3D depth attribute can be default.The present invention is usually realized by the Canvas unit introduced new in HTML5, has compatible traditional 2D browser, seamless support 2D webpage and 3D webpage, is suitable for the advantages such as exploitation 3D user interface, web game.

Description

A kind of binocular 3D webpage implementation method based on Canvas and system
Technical field
The present invention relates to a kind of method and system of vision technique field, particularly, relate to a kind of binocular 3D webpage implementation method based on Canvas and system.
Background technology
Human eye is when an observation three-dimensional body, and because the horizontal level of right and left eyes is different, the subject image seen also is not quite similar.The image that right and left eyes is seen is called left view and right view, and the difference between them is called parallax.The left and right view that there is parallax is by the process of human brain people can be made the to perceive world that one has the depth of field and stereovision.
Stereoscopic three-dimensional device of televising applies this binocular parallax principle, and it can show the slightly different projection view angles of two of a certain three-dimensional scenic simultaneously, and makes the right and left eyes of people obtain left and right view respectively, thus is fused into stereo-picture in human brain.3D display compatiblely can play 2D, 3D video content, but not yet there is a kind of widely used method showing the user interface of 3D webpage or form web page on 3D TV.Along with the development of internet access and web application, obtain consistent 3D when using 3D TV in order to enable user and experience, 3D TV shows the demand that 3D webpage becomes day by day urgent.
Through retrieval, Chinese invention patent " the three-dimensional web page implementation method based on browser " (China Patent Publication No. is 101067827A), the Charles S.Palm of the U.S. has applied for patent " 3D stereo browser for the internet " (patent No. US7190371B2).Above-mentioned two patents are all utilize three-dimensional picture to show on the 2 d display with relief webpage.
Chinese invention patent " a kind of 3D browser implementation method based on binocular parallax principle " (Chinese patent is 102184082A), the method uses the position of CSS (cascading style sheet) CSS control 3D object and shows on 3D display, is suitable for writing the general webpage using CSS.
Summary of the invention
The present invention is directed to existing binocular solid display terminal call format, a kind of binocular 3D webpage implementation method based on Canvas and system are provided.The present invention adopts Canvas technology, and by increasing depth informations to the different objects in webpage, web analysis is output into the form with stereo display terminal compatibility, and the solid realizing binocular 3D webpage presents.
For achieving the above object, present invention employs following technical scheme:
The present invention is based on binocular parallax principle, 3D display shows, difference uses Canvas to the position of control 3D object, completes 3D webpage, solve the problem presenting the 3D webpage with stereoeffect on 3D display.Main points of the present invention are that the 2D positioning properties of element position on control Canvas is expanded to 3D positioning properties, thus obtain the stereoeffect with depth feelings.
According to an aspect of the present invention, a kind of binocular 3D webpage implementation method based on Canvas is provided, comprises the following steps:
A, obtain the positioning properties value of element, i.e. 3D object will drawn on Canvas, will drafting 3 D object thus present required stereoeffect be in place used for, wherein the 3D positioning properties value 3D depth attribute that comprises 2D positioning properties and newly increase;
B, according to described 3D positioning properties, JavaScript built-in function provided by the invention is used to write 3D webpage;
The above-mentioned 3D webpage of browser resolves of C, use support Canvas, calculates 3D object on a left side depending on frame and the right diverse location looked in frame;
D, according to different 3D transformats, left and right is differently drawn depending on frame and shows on 3D display.
The 3D object of described steps A comprises whole elements of Canvas support, i.e. line, geometric figure, word, picture and video etc., uses this method can realize the stereoeffect screen or enter to shield of these elements.
When the transformat of described step D is half high definition 3D frame compatibility, carry out as down conversion respectively:
1) left and right is spelled: then respectively the left and right obtained is carried out the sub-sampling in horizontal direction depending on frame, obtain left and right that width reduces by half depending on frame and the half right and left being plotted to Canvas divide;
2) spell up and down: then respectively the left and right obtained is carried out the sub-sampling in vertical direction depending on frame, the left and right highly reduced by half depending on frame and the inferior and superior halves being plotted to Canvas divide;
3) row are staggered: then respectively left and right is carried out the sub-sampling in horizontal direction depending on frame, obtain left and right that width reduces by half and are plotted on the odd and even number row of Canvas depending on frame;
4) line interlacing: then respectively left and right is carried out the sub-sampling in vertical direction depending on frame, the left and right highly reduced by half depending on frame and be plotted to the odd and even number of Canvas capable on;
When the transformat of described step D is full HD 3D frame sequence, then without the need to conversion, left and right is drawn directly on Canvas corresponding to left and right two-way depending on frame;
When the transformat of described step D is the encapsulation of full HD 3D frame, then without the need to conversion, left and right is directly plotted on Canvas as left and right or top and the bottom depending on frame.
According to an aspect of the present invention, provide a kind of system for realizing said method, this system comprises:
1) 3D web-page parser, primarily of JavaScript function composition, can calculate the position of 3D object in the view of left and right according to the 3D positioning properties of 3D object.The acceptance of this JavaScript function will draw the information such as content, 3D positioning properties of element as parameter, judge the type of element and the different Canvas built-in function (drawImage, fillText etc.) of Selection and call, and according to providing the positioning properties of 3D to draw, the horizontal parallax wherein in the view of left and right is calculated by linear corresponding relation by depth information parameter.
2) 3D transformat processor, is supplied to browser by left and right view according to the transformat formulated and carries out Canvas and play up, obtain final webpage.
The inventive method is expanded for existing Web wrapper method, by increasing the definition of new element property to element, for the stereo display form that three-dimensional display is supported, as left and right is spelled, spells up and down, arranged the forms such as staggered, line interlacing, make the webpage writing out by existing browser and the exportable 3D webpage corresponding with three-dimensional display, finally on 3D display, realize stereoeffect.
Because Canvas is as a kind of element defined in HTML5 standard, use-pattern is very flexible, and the present invention can be used to multiple situation.The size that can arrange Canvas is less than the size of 3D display, can make that a part for screen presents 3D effect and remainder is traditional 2D webpage; Can arrange the size that Canvas size equals 3D display, this kind of situation is applicable to the UI interface, 3D web game etc. of developing 3DTV; The size that Canvas is greater than 3D display can be set, thus the 3D webpage that rendering content is more, the page is larger; The present invention can also be applied on multiple painting canvas, thus reach the effect simplifying programming, improve operational efficiency.
Compared with prior art, the present invention has following beneficial effect: 1) be easy to the user interface creating webpage or form web page; 2) compatible traditional 2D browser; 3) seamless support 2D webpage and 3D webpage; 4) exploitation 3D web game etc. is suitable for.
Accompanying drawing explanation
By reading the detailed description done non-limiting example with reference to the following drawings, other features, objects and advantages of the present invention will become more obvious:
Fig. 1 is the schematic diagram that binocular parallax principle produces stereoeffect.
Fig. 2 is system architecture diagram of the present invention.
Fig. 3 is basic procedure of the present invention.
Fig. 4 is how left and right view is carried out the schematic diagram that horizontal direction sub-sampling generates left and right spelling form by the present invention.
Embodiment
Below in conjunction with specific embodiment, the present invention is described in detail.Following examples will contribute to those skilled in the art and understand the present invention further, but not limit the present invention in any form.It should be pointed out that to those skilled in the art, without departing from the inventive concept of the premise, some distortion and improvement can also be made.These all belong to protection scope of the present invention.
Fig. 1 shows and produces the different view in left and right, thus produces the binocular parallax principle of stereoeffect.
Fig. 2 is that the present invention realizes system architecture diagram, be made up of 3D web-page parser and 3D transformat processor, wherein 3D web-page parser is primarily of the JavaScript function composition described in embodiment, can calculate the position of 3D object in the view of left and right according to the 3D positioning properties of 3D object.
Fig. 3 is the process flow diagram carrying out 3D program and display according to the present invention, forms by designing webpage effect, acquisition 3D locating information, establishment 3D webpage, parsing 3D webpage and drawing 5 steps according to transmission mode.
Fig. 4 be left and right view is carried out horizontal direction sub-sampling, width reduces by half thus generates left and right and spell the schematic diagram of form.
Draw in left and right mode of spelling the picture that has depth information below, composition graphs 2, Fig. 3 and Fig. 4 do following detailed description to specific implementation of the present invention and basic step.Wherein set the resolution of 3D TV as 1920x1080, size is 42 inches, and calculating in the situation bottom left right view maximum disparity of guarantee comfort level according to industrywide standard is 107 pixels.In order to write convenient and versatility, positive negative parallax linearly corresponds in the degree of depth value of [-10,10] by the present invention.Negative parallax corresponds to out screen display effect, and positive parallax corresponds to into screen display effect.
1. design webpage design sketch
3D computer graphical software such as Autodesk Maya etc. can be adopted to carry out 3D modeling for webpage, percentage regulation and comfortableness.The introduction for the sake of simplicity of this example, does not use modeling software, and the depth attribute value of the picture simply will drawn is set to-2, namely goes out screen 2 depth unit.
2. obtain 3D locating information
Main points of the present invention are that the 2D positioning properties of element in Canvas is expanded to 3D positioning properties, thus present the 3D webpage with the depth of field and stereovision.3D positioning properties is made up of following set:
3D positioning properties={ 2D positioning properties, 3D depth attribute }, wherein:
The positioning properties of each element on Canvas in 2D positioning properties=HTML5 standard;
The depth value of 3D depth attribute=element, span is [-10,10], and 10 expression elements are in the maximum position after screen, and-10 expression elements are in the maximal value before screen.
3D positioning properties and related description see the following form 1:
The 2D positioning properties such as dx, dy, dw, dh in upper table are 2D locating information when drawing rectangle, image, video and word, slightly different when drawing other shapes and lines, but still can realize 3D effect by the mode adding depth attribute.
3. create 3D webpage
Different with traditional 2D webpage, call the JavaScript built-in function that comprises in the present invention to complete drafting, will draw size in (200,100) position be 300x400, and go out the picture of screen two depth unit, JavaScript code is as follows:
Wherein CSBS.drawSBS is function provided by the invention.The acceptance of this function will draw the information such as content, 3D positioning properties of element as parameter, judge the type of element and the different Canvas built-in function (drawImage, fillText etc.) of Selection and call, and draw according to the 3D positioning properties parameter provided, be the main body of carrying out resolving and drawing operation.Horizontal parallax wherein in the view of left and right is calculated by linear corresponding relation mentioned above by depth information parameter.After 3D program completes, be kept on network or in local hard drive.
4. resolve 3D webpage
This step completes primarily of JavaScript built-in function, and the net result of the code analysis in previous step is as follows:
this.bufferContext.drawImage(img,dx/2+c*depth,dy,dw/2,dh);
this.bufferContext.drawImage(img,width/2+dx/2-c*depth,dy,dw/2,dh);
Wherein width is the width of painting canvas, and c is that of converting between the degree of depth and parallax determines coefficient.Here the height of image and upright position constant, width reduces by half, and horizontal level is calculated jointly by former horizontal level and depth attribute.In this step, complete the sub-sampling in horizontal direction simultaneously and draw on Canvas according to left and right mode of spelling.
5., according to 3D transmission mode, Canvas draws
This step usually and previous step completed by the same generation code block simultaneously, implementation is because of 3D transmission mode difference slightly difference, specific as follows:
When transformat is half high definition 3D frame compatibility, carry out as down conversion respectively:
1) left and right is spelled: then respectively the left and right obtained is carried out the sub-sampling in horizontal direction depending on frame, obtain left and right that width reduces by half depending on frame and the half right and left being plotted to Canvas divide;
2) spell up and down: then respectively the left and right obtained is carried out the sub-sampling in vertical direction depending on frame, the left and right highly reduced by half depending on frame and the inferior and superior halves being plotted to Canvas divide;
3) row are staggered: then left and right is carried out respectively the sub-sampling in horizontal direction depending on frame, obtain left and right that width reduces by half and are plotted on the odd and even number row of Canvas depending on frame;
4) line interlacing: then left and right is carried out respectively the sub-sampling in vertical direction depending on frame, the left and right highly reduced by half depending on frame and be plotted to the odd and even number of Canvas capable on.
When transformat is full HD 3D frame sequence, then without the need to conversion, left and right is drawn directly on Canvas corresponding to left and right two-way depending on frame.
When transformat is the encapsulation of full HD 3D frame, then without the need to conversion, left and right is directly plotted on Canvas as left and right or top and the bottom depending on frame.
Write webpage by above-mentioned steps and show on 3D TV, the 3D webpage with stereovision can be obtained.
The present invention is a kind of method and system realizing binocular 3D webpage (comprising the application such as 3D graphic user interface, game of form web page), and it is usually realized by painting canvas (Canvas) unit introduced new in HTML5.By making the webpage write in this way, only need resolve at existing 2D browser, the three-dimensional webpage with the depth of field and stereovision can be presented on 3D TV.Maximum feature of the present invention is, directly can show 3D webpage on existing browser, inherit the advantage of Canvas, is namely applicable to writing 3D user interface, web game etc.
Above specific embodiments of the invention are described.It is to be appreciated that the present invention is not limited to above-mentioned particular implementation, those skilled in the art can make various distortion or amendment within the scope of the claims, and this does not affect flesh and blood of the present invention.

Claims (8)

1., based on a binocular 3D webpage implementation method of Canvas, it is characterized in that, comprise the following steps:
A, obtain the element that will draw on Canvas, i.e. the positioning properties value of 3D object, will drafting 3 D object thus present required stereoeffect be in place used for, wherein the 3D positioning properties value 3D depth attribute that comprises 2D positioning properties and newly increase;
B, according to described 3D positioning properties, JavaScript built-in function interface is used to write 3D webpage;
The browser of C, use support Canvas, resolves above-mentioned 3D webpage by JavaScript built-in function, calculates 3D object on a left side depending on frame and the right diverse location looked in frame;
D, according to different 3D transformats, left and right is differently drawn depending on frame and shows on 3D display.
2. the binocular 3D webpage implementation method based on Canvas according to claim 1, is characterized in that: the 3D object of described steps A comprises whole elements of Canvas support, i.e. line, geometric figure, word, picture and video.
3. the binocular 3D webpage implementation method based on Canvas according to claim 1, is characterized in that: when the transformat of described step D is half high definition 3D frame compatibility, carry out as down conversion respectively:
Left and right is spelled: then respectively the left and right obtained is carried out the sub-sampling in horizontal direction depending on frame, obtain left and right that width reduces by half depending on frame and the half right and left being plotted to Canvas divide;
Spell up and down: then respectively the left and right obtained is carried out the sub-sampling in vertical direction depending on frame, the left and right highly reduced by half depending on frame and the inferior and superior halves being plotted to Canvas divide;
Row are staggered: then respectively left and right is carried out the sub-sampling in horizontal direction depending on frame, obtain left and right that width reduces by half and are plotted on the odd and even number row of Canvas depending on frame;
Line interlacing: then respectively left and right is carried out the sub-sampling in vertical direction depending on frame, the left and right highly reduced by half depending on frame and be plotted to the odd and even number of Canvas capable on.
4. the binocular 3D webpage implementation method based on Canvas according to claim 1, is characterized in that: when the transformat of described step D is full HD 3D frame sequence, then without the need to conversion, left and right is drawn directly on Canvas corresponding to left and right two-way depending on frame.
5. the binocular 3D webpage implementation method based on Canvas according to claim 1, is characterized in that: when the transformat of described step D is the encapsulation of full HD 3D frame, then without the need to conversion, left and right is directly plotted on Canvas as left and right or top and the bottom depending on frame.
6. the binocular 3D webpage implementation method based on Canvas according to any one of claim 1-5, it is characterized in that: JavaScript built-in function in described step B and step C, this function accepts will draw the content of element, 3D positioning properties information as parameter, judge the type of element and the different Canvas built-in function of Selection and call, and according to providing 3D positioning properties to draw, the horizontal parallax wherein in the view of left and right is calculated by linear corresponding relation by depth information parameter.
7. for realizing a system for method described in claim 1, it is characterized in that: this system comprises:
3D web-page parser, forms primarily of a series of JavaScript function, can calculate the position of 3D object in the view of left and right according to the 3D positioning properties of 3D object;
3D transformat processor, is plotted to left and right view on final Canvas according to the transformat formulated.
8. system according to claim 7, it is characterized in that: described JavaScript function accepts to draw the content of element, 3D positioning properties information as parameter, judge the type of element and the different Canvas built-in function of Selection and call, and according to providing the positioning properties of 3D to draw, the horizontal parallax wherein in the view of left and right is calculated by linear corresponding relation by depth information parameter.
CN201210384687.4A 2012-10-11 2012-10-11 A kind of binocular 3D webpage implementation method based on Canvas and system Active CN102937968B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201210384687.4A CN102937968B (en) 2012-10-11 2012-10-11 A kind of binocular 3D webpage implementation method based on Canvas and system

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201210384687.4A CN102937968B (en) 2012-10-11 2012-10-11 A kind of binocular 3D webpage implementation method based on Canvas and system

Publications (2)

Publication Number Publication Date
CN102937968A CN102937968A (en) 2013-02-20
CN102937968B true CN102937968B (en) 2015-10-14

Family

ID=47696865

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201210384687.4A Active CN102937968B (en) 2012-10-11 2012-10-11 A kind of binocular 3D webpage implementation method based on Canvas and system

Country Status (1)

Country Link
CN (1) CN102937968B (en)

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103425491B (en) * 2013-07-30 2016-10-12 广州爱九游信息技术有限公司 A kind of game engine
CN104424288B (en) * 2013-08-30 2018-04-27 腾讯科技(深圳)有限公司 A kind of 3D display method and device of webpage
CN104837005B (en) * 2014-02-11 2017-06-16 深圳市云帆世纪科技有限公司 Method and its device that a kind of 2D videos are played with 3D Video Quality Metrics
CN104915373B (en) * 2015-04-27 2018-12-07 北京大学深圳研究生院 A kind of three-dimensional web page design method and device
CN105447898B (en) * 2015-12-31 2018-12-25 北京小鸟看看科技有限公司 The method and apparatus of 2D application interface are shown in a kind of virtual reality device
CN108235143B (en) 2016-12-15 2020-07-07 广州市动景计算机科技有限公司 Video playing mode conversion method and device and mobile terminal
CN107092643B (en) * 2017-03-06 2020-10-16 武汉斗鱼网络科技有限公司 Barrage rendering method and device
CN108197248B (en) * 2017-12-29 2021-07-16 杭州联络互动信息科技股份有限公司 Method, device and system for displaying 3D (three-dimensional) 2D webpage

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1902526A (en) * 2003-09-22 2007-01-24 吉恩·多戈夫 Omnidirectional lenticular and barrier-grid image displays and methods for making them
CN102184082A (en) * 2011-05-20 2011-09-14 广州市数字视频编解码技术国家工程实验室研究开发与产业化中心 Method for realizing 3D (three dimensional) browser based on binocular parallax principle
CN102323882A (en) * 2011-08-31 2012-01-18 北京华电万通科技有限公司 Data processing device and method applied to Web3D

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1902526A (en) * 2003-09-22 2007-01-24 吉恩·多戈夫 Omnidirectional lenticular and barrier-grid image displays and methods for making them
CN102184082A (en) * 2011-05-20 2011-09-14 广州市数字视频编解码技术国家工程实验室研究开发与产业化中心 Method for realizing 3D (three dimensional) browser based on binocular parallax principle
CN102323882A (en) * 2011-08-31 2012-01-18 北京华电万通科技有限公司 Data processing device and method applied to Web3D

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
虚拟现实中多通道实时手势绘图技术研究;姚挺等;《系统仿真学报》;20060131;第18卷(第01期);第132-135页 *

Also Published As

Publication number Publication date
CN102937968A (en) 2013-02-20

Similar Documents

Publication Publication Date Title
CN102937968B (en) A kind of binocular 3D webpage implementation method based on Canvas and system
CN103945208B (en) A kind of parallel synchronous zooming engine for multiple views bore hole 3D display and method
CN102184082B (en) Method for realizing 3D (three dimensional) browser based on binocular parallax principle
KR101547151B1 (en) Image processing method and apparatus
CN103412874B (en) Method and system for realizing three-dimensional page
CN103581650A (en) Method for converting binocular 3D video into multicast 3D video
CN107369205B (en) Mobile terminal city two-dimensional and three-dimensional linkage display method
CN103177467A (en) Method for creating naked eye 3D (three-dimensional) subtitles by using Direct 3D technology
US20120308115A1 (en) Method for Adjusting 3-D Images by Using Human Visual Model
CN102521876B (en) A kind of method and system realizing 3D user interface stereoeffect
US20120050284A1 (en) Method and apparatus for implementing three-dimensional image
CN104915373A (en) Three-dimensional webpage design method and device
CN102724539A (en) 3D (three dimension) display method and display device
CN105975259A (en) Implementation method and device of 3D (Three-dimensional) space user interface
CN104683785B (en) Real-time 3D (3-Dimensional) character inserting and playing method based on naked-eye 3D technology
Wang et al. Stereoscopic 3D Web: From idea to implementation
CN107046637A (en) A kind of asymmetric joining method for 3-D view
Liu et al. Deinterlacing of depth-image-based three-dimensional video for a depth-image-based rendering system
CN105354274A (en) 3D webpage synchronous display method and system
Shao et al. Object-based depth image-based rendering for a three-dimensional video system by color-correction optimization
CN104835192A (en) Three-dimensional web page figure drawing method and apparatus
Wang et al. Roaming of oblique photography model in unity3D
Chen et al. An approach to support stereoscopic 3D web
CN102231841A (en) Naked-eye 3D (three-dimensional) display television based on dual-viewpoint 3D data and implementation method thereof
CN108197248B (en) Method, device and system for displaying 3D (three-dimensional) 2D webpage

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant