CN103543998A - WEB3D image engine generating method based on HTML5 - Google Patents

Abstract

The invention relates to a WEB3D image engine generating method based on the HTML5. The method includes the steps that firstly, a model object is generated; secondly, global variable assignment is carried out, and a program base is initialized; thirdly, a scene container is built to manage the 3D model object; fourthly, a rendered image is built and perspective proportion and view field transforming is established; fifthly, an effect is built, and coloring information is loaded; sixthly, textures and shapes are built, a texture draw list is set, and other texture parameters are set; seventhly, a transformed value and a shape value are added to a transforming graph; eighthly, a draw element of an object model is built, a callback function is set, and specific tasks are executed when 3D scenes are rendered each time. A system comprises a program module, a tool module, an image interface module, an image engine module, a Direct3D rendering module, an OpenGL rendering module, a GPU image processing module and a display module.

Description

WEB3D graphics engine generation method based on HTML5

Technical field

The present invention relates to a kind of field of Computer Graphics, especially relate to a kind of WEB3D graphics engine generation method based on HTML5

Background technology

Virtual display technology, is normally used for commodity network three-dimensional display, also has the little scene virtual emulation of part project to adopt Web3D to make.3D technology is not a new topic, and when a melon is ripe it falls off its stem already in its application at graphics workstation to such an extent as on Pc.Yet the appearance of internet, has injected new vitality, the variation well afoot that some are delicate and deep but to 3D graph technology.Web3D " appearance of these neologisms just reflected the overall picture of this variation.Nobody's strict difinition Web3D, but we can be interpreted as the 3D graph technology on internet it.

At present, both at home and abroad the mainstream technology of Web3D mainly contains VRML, X3D, Viewpoint, Shockwave3D, Java3D etc., wherein take again Java3D in conjunction with the array mode of vRML as main.

VRMIL is the form of the swap file that 3D figure and multimedia technology are general, and it describes size and dimension, color, material, light, animation and the interactivity thereof of the geometric object of interactively 3D object and scene.It is not only applied on the internet, also can be used in native client system, and its range of application is extremely wide.1996, VRMLI.0 issue, 1997, VRML 97 was born.The significant innovation of VRML97 is: transmission over networks be model file, rather than media file (as picture etc.), therefore its transmission quantity reduces greatly, can make any one 3D developer can make the 3D model of place of real-time rendering on the internet.Yet VRML self also has some limitation, the 3D scene that first client is obtained by Internet can be seen its former code in fact, and this is mortal wound to business-like application; Its two VRML only supports to carry out view navigation, viewpoint conversion etc. by browser, and the input of restriction keyboard. after 1997, VRML making slow progress on 3D graphics standard.In August calendar year 2001, Web3D association has issued international standard one X3D of new generation (its implication is extendible 3D), and has obtained the support of many software vendors.X3b and MPEG-4 and) C letter is compatible, and by being integrated among the 3D content of MPEG--4, uses eight L grammer.It and VP30.97 back compatibles, X3D can provide the standard VRML repertoire of 97Browser.Its main task is among the function package to of VRML light-duty, an extendible core. due to its extensibility, any one developer can, according to the demand of oneself, expand its function.

The Java3D of Sun Microsystems's issue, due to its platform-neutral, makes it be particularly suitable for writing the application program based on Web.Java is a kind of efficient, healthy and strong, safe programming language, be particularly suitable for Internet exploitation. the expansion as Java in field of three dimension, Java3D has inherited the features such as its " Write once.Run anywhere " and powerful network function, even if very large three-dimensional model file also can be downloaded from the Internet and watch, and used view frustums null method treatment technology.Adopt multithreading simultaneously, realized the optimization of speed.Java3D provides high-rise OO three-dimensional picture describing method, and developer only need to concentrate one's energy to set up the object in scene graph and needn't design concrete geometrical body and write coded description.Therefore Java3D has at the aspects such as mutual merit that realize the three-dimensional visualization of computation process, complexity the ability that other Web3D technology cannot be compared.Although Java3D is having the many merits of Java, the problem that equally also has Java to face, such as program all will depend on JVM, and is shut in JW, and committed memory is large, and speed is slow etc.Java3D realizes and will depend on this out-of-date form for a long time of Java Applet in Web simultaneously.And the simple interactive three-dimensional animation that Java Applet realizes not only need to download a huge support environment, and picture is very coarse, performance is also very poor.Java3D only provides some simple basic bodies, for complicated body, is difficult to directly by programming, realize, and the three-dimensional picture file that need to call other form obtains complex object.

Summary of the invention

Object of the present invention is exactly to provide a kind of WEB3D graphics engine generation method based on HTML5 in order to overcome the defect of above-mentioned prior art existence.

Object of the present invention can be achieved through the following technical solutions: a kind of WEB3D graphics engine generation method based on HTML5, it is characterized in that, and the method comprises the following steps:: 1) generation model object.2) give global variable assignment, and initialize routine storehouse.3) create scene container with management 3D model object.4) create and play up pattern and set up perspective ratio and new perspective.5) create an effect, be written into painted information.6) create material and shape, material is set and draws list, and other material parameters are set.7) transformed value and shape value are joined in conversion chart.8) for object prototype creates, draw element, call back function is set, when 3D scene is played up, carry out specific task at every turn.

A kind of WEB3D graphics engine generation method based on HTML5, described Web browser comprises netscape browser, IE browser and proud trip browser etc.

Described step 1) model in comprises: HTML code and JavaScript code.

A kind of method of the WEB3D graphics engine based on HTML5, it is characterized in that, this system comprises program module, tool model, graphic interface module, graphics engine module, Direct3D rendering module, OpenGL rendering module, GPU pattern process module, display module.Described program module, tool model are connected with graphic interface module, described graphic interface module is connected with graphics engine module, described graphics engine module is connected with Direct3D rendering module, OpenGL rendering module, described Direct3D rendering module, OpenGL rendering module are connected with GPU pattern process module, and described GPU pattern process module is connected with display module.

Compared with prior art, the present invention is based on HTML5 standard and JavaScript exploitation, have without using plug-in unit just can realize the Web interactive three-dimensional animation that effect is true to nature.Bottom by OpenGL or DirectX realize 3d software, hardware mix is accelerated.Solved well the three-dimensional visualization problem of Internet Transmission, platform-neutral.Adopt, multithreading, has realized the optimization of speed simultaneously.And support scripting operation.Support Windows, Mac OS x and this three large system platform of Linux

Accompanying drawing explanation

Fig. 1 is process flow diagram of the present invention;

Fig. 2 is system construction drawing of the present invention;

Embodiment

Below in conjunction with the drawings and specific embodiments, the present invention is described in detail.

Embodiment

1, generation model object

Model object program is based on HTML, main function be html document <head>< between head> label, be included in that the code of <script> tag element realizes.First the master tool function library of quoting, when loading, the Html page uses Init call method, Init calls makeClients and carrys out model of creation object, and makeClients in Html, find all id with " model " the div label of beginning, and the model object creating is inserted in page code.While closing, can trigger onunload event, thereby call uninit () function, complete cleaning work as the deletion of object, internal memory release etc.As code below

<body>

<div?id＝″bf3d″style＝″width：1024px；height：768px″/>

<script?type＝″text/davascript″>

modeljs.require(″bf3djs.util″)；

window.onload＝init；

window.onunload＝uninit；

var?g_model；

vat?g_sath；

vBIr?g_client；

var?g_pack；

vat?g?cubeTransform；

vat?g_finished；

function?init0＜modeljs.util.makeClients(init-Stepl)：)

function?uninit0{if(g_client)(g_client.cleanup()；))

</script>

2, give global variable assignment, and initialize routine storehouse

3d graphics engine has comprised a series of public libraries, if use certain power function, just need in <script> label, load this code in the beginning of program.As follows, in the storehouse of the loading in first <script> label, defined require () function, with this function, load other interface API storehouse.As code below

<script?type＝″text/javascript″src＝″bf3djs/base.js″></script>

<script?type＝″text/javascript″>

bf3djs.require(’bf3djs.util’)；

bf3djs.require(’bf3djs.math’)；

bf3djs.require(’bf3djs.rendergraph’)；

Generate interface library function, init () function call 3d graphics engine built-in function bfdjs.util.makeClients (), with this, produce 3d graphics engine object.When this function returns, it can call call back function initStep2 ().User browser must allow script to carry out.As code below

function?init(){

bf3djs.util.makeClients(initStep2)

}

User area window is set, and the 3d graphics engine object generating in HTML with built-in function bf3djs.util.makeClients () can cross-platformly be used.This function is for example searched all id in html document, with (bf3d, bf3d-element etc.) <div> label of " bf3d " beginning, and inserts a user area inside, to move 3d graphics engine program.Client region size default setting is 100%, so <div> must have size setting, as code below

<！--A?div?of?a?specific?size-->

<div?id＝″bf3d″style＝″width：1024px；height：768px″/>

<！--A?div?that?fills?its?containing?element-->

<div?id＝″bf3d″style＝″width：100％；height：100％″/>

MakeClients () function imports a call back function into as parameter, once 3d graphics engine object is created, this call back function will be triggered.

3, create scene container with management 3D model object

Creating scene container is 3d graphics engine element to global variable assignment: bfdElement, it is a part of DOM, g_client is the entrance of 3d graphics engine application program, and g_o3d is the NameSpace of 3d graphics engine, and g_math is the NameSpace of 3d graphics engine math library.

var?bfdElement＝clientElements?[0]；

g_client＝bfdElement.client；

g_bf3d＝bfdElement.bf3d；

g_math＝bfdjs.math；

Produce object bag, object contains has received all objects of o3d, and controls the life cycle of these objects.

g_pack＝g_client.createPack()；

4, create and play up pattern and set up perspective ratio and new perspective

With built-in function renderGraph.createBasicView (), produce the figure that plays up of a standard.This plays up figure two drawing lists, and one for drawing the element (performance drawing list) of nontransparent material, and another is for drawing transparent material element (transparent effect drawing list) as code below

var?viewInfo＝bfdjs.renderGraph.createBasicView(

g_pack，

g_client.root，

g_client.renderGraphRoot)；

Drawing background, background has been specified the position of view projection and virtual video camera.DrawContext uses built-in function renderGraph.createBasicView () to produce to liking.Example code has below been shown the parameter how it is set:

// set up skeleton view

viewInfo.drawContext.projection＝g_math.matrix4.perspective(

G_math.degToRad (30), // 30 degree visual fields

g_client.width/g_client.height，

1, // near plane

5000); // away from plane

// set up view transformation watch attentively model region

ViewInfo.drawContext.view=g math.matrix4.lookAt ([0,1,5], // eyes

[0,0,0], // target

[0,1,0]); // upwards

5, create an effect, be written into painted information

Vertex and pixel shader is defined between the <textarea> of html document.Tinter is controlled the color of each pixel and is calculated.Code below tells on (redEffect) and rendering content is read in to tinter.As code below

var?redEffect＝g_pack.createObject(’Effect’)；

The element of // searching " Effect " in html document

var?shaderString＝document.getElementById(’effect’).value；

// all the elements in element <textarea id=" effect " > are loaded in Effect object

redEffect.loadFromFXString(shaderString)；

6, create material and shape, material is set and draws list, and other material parameters are set

The material of model creates in initStep2 (), and is assigned to and plays up list, the nontransparent material of this list controls.The material effect of code model is below set to redness ' redEffect ', graphic hardware can carry out suitable playing up to model like this.In code below, due to all pixels of model are all set to redness, so do not carry out the complicated calculating of playing up.CreateCube () function in code, has created cube how much, and has played up red material.Cube can be replaced to SketchUp, the model that the instruments such as 3ds Max or Maya are built.As code below

var?redMaterial＝g_pack.createObject(’Material’)；

redMaterial.drawList＝viewInfo.performanceDrawList；

redMaterial.effect＝redEffect；

var?cubeShape＝createCube(redMaterial)；

7, transformed value and shape value are joined in conversion chart

Code has below been given simple action conversion to model.As code below

g_cubeTransform＝g_pack.createObject(’Transform’)；

g_cubeTransform.addShape(cubeShape)；

g_cubeTransform.parent(g_client.root)；

8, for object prototype creates, draw element, call back function is set, when 3D scene is played up, carry out specific task at every turn.

Each graphic primitive has one for describing the drafting element (draw element) of material and the effect of this figure.The drafting element (draw element) that built-in function createDrawElements () is different for each graphic primitive generates is also drawn element by these and is added in the drafting list (draw list) relevant with graphic primitive material.When window is played up, system can be drawn list (draw list) generation for each and once be drawn and refresh (draw pass), and all like this drafting elements (draw element) in drawing list (draw list) will be played up.As code below

cubeShape.createDrawElements(g_pack，null)；

During each hardware refresh screen, scene all can be played up automatically.In example code below setRenderCallback () function setup a readjustment, action and the shape of Renewal model during for each scene rendering.As code below

g_client.setRenderCal?lback(renderCallback)。

Claims (4)

1. the WEB3D graphics engine generation method based on HTML5: adopt and it is characterized in that, the method comprises the following steps:

1) generation model object.

2) give global variable assignment, and initialize routine storehouse.

3) create scene container with management 3D model object.

4) create and play up pattern and set up perspective ratio and new perspective.

5) create an effect, be written into painted information.

6) create material and shape, material is set and draws list, and other material parameters are set.

7) transformed value and shape value are joined in conversion chart.

8) for object prototype creates, draw element, call back function is set, when 3D scene is played up, carry out specific task at every turn.

2. the WEB3D graphics engine generation method based on HTML5 according to claim 1, is characterized in that, described Web browser comprises netscape browser, the IE browser based on HTML5 and proud trip browser etc.

3. the WEB3D graphics engine generation method based on HTML5 according to claim 1, is characterized in that described step 1) in model comprise: HTML code and JavaScript code.

4. the system of the WEB3D graphics engine based on HTML5, it is characterized in that, this system comprises program module, tool model, graphic interface module, graphics engine module, Direct3D rendering module, OpenGL rendering module, GPU pattern process module, display module.Described program module, tool model are connected with graphic interface module, described graphic interface module is connected with graphics engine module, described graphics engine module is connected with Direct3D rendering module, OpenGL rendering module, described Direct3D rendering module, OpenGL rendering module are connected with GPU pattern process module, and described GPU pattern process module is connected with display module.

Images