44 < meta charset ="utf-8 ">
55 < meta name ="viewport " content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no " />
66 < meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 ">
7- < title > Unity WebGL Player | WebGL Test AR</ title >
7+ < title > Unity WebGL Player | {{{ PRODUCT_NAME }}}</ title >
8+ < script src ="Build/{{{ LOADER_FILENAME }}} "> </ script >
89 < script src ="js/lib/aframe.min.js "> </ script >
910 < script src ="js/lib/aframe-ar.js "> </ script >
10- < script src ="Build/UnityLoader.js "> </ script >
11- < script src ="js/app.js "> </ script >
12-
1311 </ head >
12+ < body >
13+ <!-- style for the loader -->
14+ < style >
15+ html , body {
16+ overflow : hidden;
17+ }
18+
19+ .arjs-loader {
20+ height : 100% ;
21+ width : 100% ;
22+ position : absolute;
23+ top : 0 ;
24+ left : 0 ;
25+ background-color : rgba (0 , 0 , 0 , 1 );
26+ z-index : 9999 ;
27+ display : flex;
28+ justify-content : center;
29+ align-items : center;
30+ }
31+
32+ .arjs-loader div {
33+ text-align : center;
34+ font-size : 1.25em ;
35+ color : white;
36+ }
37+ </ style >
38+
39+ < div class ="arjs-loader " id ="arjs-loader ">
40+ < div > Loading, please wait...</ div >
41+ </ div >
42+
43+ < div id ="unity-container " class ="unity-desktop " style ="z-index: 2; position: absolute; top: 0; left: 0; ">
44+ < canvas id ="unity-canvas "> </ canvas >
45+ </ div >
46+
47+ < script >
48+ var container = document . querySelector ( "#unity-container" ) ;
49+ var unityCanvas = document . querySelector ( "#unity-canvas" ) ;
50+
51+ var buildUrl = "Build" ;
52+ var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}" ;
53+ var config = {
54+ dataUrl : buildUrl + "/{{{ DATA_FILENAME }}}" ,
55+ frameworkUrl : buildUrl + "/{{{ FRAMEWORK_FILENAME }}}" ,
56+ codeUrl : buildUrl + "/{{{ CODE_FILENAME }}}" ,
57+ #if MEMORY_FILENAME
58+ memoryUrl : buildUrl + "/{{{ MEMORY_FILENAME }}}" ,
59+ #endif
60+ #if SYMBOLS_FILENAME
61+ symbolsUrl : buildUrl + "/{{{ SYMBOLS_FILENAME }}}" ,
62+ #endif
63+ streamingAssetsUrl : "StreamingAssets" ,
64+ companyName : "{{{ COMPANY_NAME }}}" ,
65+ productName : "{{{ PRODUCT_NAME }}}" ,
66+ productVersion : "{{{ PRODUCT_VERSION }}}" ,
67+ } ;
68+
69+
70+ var script = document . createElement ( "script" ) ;
71+ var unityInstance ;
72+
73+ script . src = loaderUrl ;
74+ script . onload = ( ) => {
75+ createUnityInstance ( unityCanvas , config , ( progress ) => {
76+
77+ } ) . then ( ( ui ) => {
78+ unityInstance = ui ;
79+
80+ } ) . catch ( ( message ) => {
81+ alert ( message ) ;
82+ } ) ;
83+ } ;
84+ document . body . appendChild ( script ) ;
85+
86+ let isCameraReady = false ;
87+ let isDetectionManagerReady = false ;
88+ let gl = null ;
89+
90+ function cameraReady ( ) {
91+ isCameraReady = true ;
92+ gl = unityInstance . Module . ctx ;
93+ console . log ( "Camera Ready" ) ;
94+ }
95+
96+ let isObjectAvailable = false ;
97+ function objectAvailable ( ) {
98+
99+ isObjectAvailable = true ;
100+
101+ }
102+
103+ function detectionManagerReady ( ) {
104+ isDetectionManagerReady = true ;
105+ }
106+
107+ let camName = null ;
108+ function getCamName ( name ) {
109+ camName = name ;
110+ }
111+
112+ function createUnityMatrix ( el ) {
113+ const m = el . matrix . clone ( ) ;
114+ const zFlipped = new THREE . Matrix4 ( ) . makeScale ( 1 , 1 , - 1 ) . multiply ( m ) ;
115+ const rotated = zFlipped . multiply ( new THREE . Matrix4 ( ) . makeRotationX ( - Math . PI / 2 ) ) ;
116+ return rotated ;
117+ }
118+
119+ AFRAME . registerComponent ( 'markercontroller' , {
120+ schema : {
121+ name : { type : 'string' }
122+ } ,
123+ tock : function ( time , timeDelta ) {
124+
125+ let position = new THREE . Vector3 ( ) ;
126+ let rotation = new THREE . Quaternion ( ) ;
127+ let scale = new THREE . Vector3 ( ) ;
128+
129+ createUnityMatrix ( this . el . object3D ) . decompose ( position , rotation , scale ) ;
130+
131+ const serializedInfos = `${ this . data . name } ${ this . el . object3D . visible } ${ position . toArray ( ) } ${ rotation . toArray ( ) } ${ scale . toArray ( ) } ;
132+
133+ if ( isDetectionManagerReady ) {
134+ unityInstance . SendMessage ( "DetectionManager" , "markerInfos" , serializedInfos ) ;
135+ }
136+ }
137+ } ) ;
138+
139+ AFRAME . registerComponent ( 'cameratransform' , {
140+ tock : function ( time , timeDelta ) {
141+
142+ let camtr = new THREE . Vector3 ( ) ;
143+ let camro = new THREE . Quaternion ( ) ;
144+ let camsc = new THREE . Vector3 ( ) ;
145+
146+ this . el . object3D . matrix . clone ( ) . decompose ( camtr , camro , camsc ) ;
147+
148+ const projection = this . el . components . camera . camera . projectionMatrix . clone ( ) ;
149+ const serializedProj = `${ [ ...projection . elements ] }
150+
151+ const posCam = `${ [ ...camtr . toArray ( ) ] }
152+ const rotCam = `${ [ ...camro . toArray ( ) ] }
153+
154+ if ( isCameraReady ) {
155+
156+ setTimeout ( ( ) => {
157+ document . querySelector ( "#arjs-loader" ) . style . display = "none" ;
158+ } , 1000 ) ;
159+
160+ unityInstance . SendMessage ( camName , "setProjection" , serializedProj ) ;
161+ unityInstance . SendMessage ( camName , "setPosition" , posCam ) ;
162+ unityInstance . SendMessage ( camName , "setRotation" , rotCam ) ;
163+
164+ let w = window . innerWidth ;
165+ let h = window . innerHeight ;
166+
167+ const ratio = unityCanvas . height / h ;
168+
169+ w *= ratio ;
170+ h *= ratio ;
171+
172+ const size = `${ w } ${ h } ;
173+
174+ unityInstance . SendMessage ( camName , "ObjectCheck" , "Canvas" ) ;
175+
176+ if ( isObjectAvailable ) {
177+ unityInstance . SendMessage ( "Canvas" , "setSize" , size ) ;
178+ }
179+ }
180+
181+ if ( gl != null ) {
182+ gl . dontClearOnFrameStart = true ;
183+ }
184+ }
185+ } ) ;
186+
187+ AFRAME . registerComponent ( 'copycanvas' , {
188+ tick : function ( time , timeDelta ) {
189+
190+ unityCanvas . style . width = window . innerWidth + 'px' ;
191+ unityCanvas . style . height = window . innerHeight + 'px' ;
192+
193+ }
194+ } ) ;
195+
196+ </ script >
14197
15- < body style ="margin: 0px; overflow: hidden; ">
16- < a-scene embedded arjs vr-mode-ui ="enabled: false " copycanvas >
17- < div id ="unityContainer " style ="z-index: 2 " > </ div >
18- <!-- <a-marker preset="hiro"> <a-box></a-box> </a-marker> -->
19- <!-- <a-marker type="pattern" url="data/markers/pattern-arjs.patt"><a-box></a-box></a-marker> -->
20- <!-- <a-marker type="pattern" url="data/markers/test.patt" markercontroller="name : hiro"></a-marker> -->
198+ < a-scene embedded arjs ='trackingMethod: best; patternRatio: 0.5; debugUIEnabled: false; ' vr-mode-ui ="enabled: false " copycanvas >
21199
22- --MARKERS--
23- < a-entity camera cameratransform > </ a-entity >
200+ --MARKERS--
201+ < a-entity camera cameratransform > </ a-entity >
24202 </ a-scene >
25203 </ body >
26204</ html >
0 commit comments