text: [{"Owner":"Xeonzinc","Date":"2014-10-11T08:41:51Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Hi All_co__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_I_t_ve been spending some time trying to figure out the best way to add some decent 2D UI elements to a Babylon js game (i.e. alert boxes_co_ status bars_co_clickable graphics on the edge of the screen). Ideally I_t_m trying to create the feel I_t_ve seen on the HTML5 _lt_a href_eq__qt_https_dd_//ga.me/games/polycraft_qt_ rel_eq__qt_external nofollow_qt__gt_polycraft_lt_/a_gt_ game._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Currently my only options seems to be_dd__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt__lt_strong_gt_• Use a dynamic texture on a plane always facing the camera_lt_/strong_gt__lt_/p_gt__lt_p_gt_          - I can_t_t use existing components on here and it seems like it might be quite inefficient rendering all the 2D elements in 3D space._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt__lt_strong_gt_• Use multiple canvas layers_lt_/strong_gt__lt_/p_gt__lt_p_gt_         - The works and allows the use of pre-built HTML5 canvas components (such as _lt_a href_eq__qt_http_dd_//www.zebkit.com/_qt_ rel_eq__qt_external nofollow_qt__gt_zebkit components_lt_/a_gt_)_co_ but gets quite messy and your canvas layers have to be precisely sized as clicks don_t_t propagate through layers._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_What I think I probably really need is a way directly draw in 2D to the canvas as Babylon uses after the 3D rendering cycle completes_co_ is this possible/efficient? Or is there some a simpler way to make a nice UI I have completely missed?_lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Temechon","Date":"2014-10-11T10:16:41Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Hello_co_ _lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_You will need a new canvas to get the 2D context_co_ as I think it is not possible to draw 3D and 2D for the same canvas._lt_/p_gt__lt_p_gt_The dynamic texture is not a bad idea_co_ but not quite efficient._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Otherwise_co_ you can still use HTML elements _dd_ div_co_ input and so on._lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"joshcamas","Date":"2014-10-11T18:06:25Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_I_t_ve been doing the _qt_two layers approach_qt__co_ but have a problem_dd_ To allow the input to go through the GUI canvas_co_ you have to set _qt_pointer-events_dd_ none_sm__qt_. This of course makes it so you cant have buttons on the front canvas! D_dd__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_EDIT_dd_ A few minutes after typing this_co_ I had an idea! For any input needed in the webgl canvas code_co_ you could send the x+y the first canvas detected. Derp. xD_lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Temechon","Date":"2014-10-11T18:53:56Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_However_co_ I think the best way to handle this is to add HTML elements directly in the html page._lt_/p_gt__lt_p_gt_The only drawback I can see is if there are a lot of images_co_ you will need to implement a custom loader_co_ and add all images when there are all loaded._lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"joshcamas","Date":"2014-10-12T02:30:53Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_I personally disagree with you on that. Having a canvas is great due to not having to mess with divs. Simply draw a image or text or anything on a canvas_co_ and don_t_t update it until you want it. Not slow at all_co_ and you can access any clicks. Shiny!_lt_/p_gt__lt_p_gt_To be fair i used HTML gui for my editor_co_ and one very good reason to use HTML is for text boxes. This is all just my way ofdoing things of course. _lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Temechon","Date":"2014-10-12T11:53:30Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Maybe you are right Josh... But all click events seems like a pain in the ass to implement ^^_lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_New idea _dd_ use sprites ! Babylon can do that easily_co_ and I think you can easily implement action events on them. _lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"joshcamas","Date":"2014-10-12T19:45:08Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_If you built a simple 2Dengine_co_ click events would be fine. Every update check to see if there were any clicks on the top level_co_ then set a variable._lt_/p_gt__lt_p_gt_Also for camera attachevents_co_ simply attach the top canvas! _lt_img src_eq__qt_http_dd_//www.html5gamedevs.com/uploads/emoticons/default_biggrin.png_qt_ alt_eq__qt__dd_D_qt_ srcset_eq__qt_http_dd_//www.html5gamedevs.com/uploads/emoticons/biggrin@2x.png 2x_qt_ width_eq__qt_20_qt_ height_eq__qt_20_qt__gt__lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Xeonzinc","Date":"2014-10-16T00:24:12Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Thanks folks_co__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_I_t_ve gone and had a go at implementing Josh_t_s idea as I_t_m a fan of keeping it all canvas based._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt__lt_strong_gt_Good News_dd__lt_/strong_gt__lt_/p_gt__lt_p_gt_I now have a UI canvas completely covering the Babylon rendering canvas which dispatches mouse events to the Babylon canvas when it_t_s alpha is 0 (i.e. there is nothing on the UI canvas). I also added a section allowing _t_drags_t_ (for my purposes arc-camera rotations) to continue working across elements on the UI canvas_co_ which just feels a bit more natural. This works perfectly in Chrome._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt__lt_b_gt_Bad News_dd__lt_/b_gt__lt_/p_gt__lt_p_gt_IE doesn_t_t play nice with duplicating and dispatching the mouse events_co_ so this doesn_t_t work on IE. I_t_ve tried a few variations but no luck and am giving up for tonight. Anyone have any ideas? Problem code_dd__lt_/p_gt__lt_pre class_eq__qt_ipsCode prettyprint_qt__gt_new_event _eq_ new MouseEvent(evt.type_co_ evt)_sm_\t\t\tdocument.getElementById(_qt_babylon_canvas_qt_).dispatchEvent(new_event)_sm__lt_/pre_gt__lt_p_gt_Anyway here is the full current code for non-IE use_dd__lt_/p_gt__lt_pre class_eq__qt_ipsCode prettyprint_qt__gt_function transmitter() {\tvar self _eq_ this_sm_\tthis.click_down _eq_ false_sm_\t\tthis.transmit_mouse _eq_ function(evt) {\t\t\tvar tempx _eq_ evt.clientX_sm_\t\tvar tempy _eq_ evt.clientY_sm_\t\t//Return the alpha channel of pixel below pointer_sm_\t\tcty _eq_ document.getElementById(_qt_UI_canvas_qt_).getContext(_qt_2d_qt_)_sm_\t\talpha _eq_ cty.getImageData(tempx_co_tempy_co_1_co_1).data[3]_sm_  \t\t\t//Transmit when alpha is 0 or the mouse button is down and pointer is moving_sm_\t\tif (alpha_eq__eq_0 || (self.click_down _eq__eq_ true &amp_sm_&amp_sm_ (evt.type _eq__eq_ _qt_pointermove_qt_ || evt.type _eq__eq_ _qt_pointerup_qt_))) {\t\t\tif (evt.type _eq__eq_ _qt_pointerdown_qt_) {\t\t\t\tself.click_down\t_eq_ true_sm_\t\t\t}\t\t\t\t\t\tnew_event _eq_ new MouseEvent(evt.type_co_ evt)_sm_\t\t\t\t\t\tdocument.getElementById(_qt_babylon_canvas_qt_).dispatchEvent(new_event)_sm_\t\t}\t\t\t\tif (evt.type _eq__eq_ _qt_pointerup_qt_) {\t\t\tself.click_down\t_eq_ false_sm_\t\t}\t}_sm_\t}_sm_\tvar transmit_event _eq_ new transmiter()_sm_\tUI_canvas _eq_ document.getElementById(_qt_UI_canvas_qt_)_sm_UI_canvas.addEventListener(_qt_pointerup_qt__co_ transmit_event.transmit_mouse_co_ false)_sm_\t\tUI_canvas.addEventListener(_qt_pointerdown_qt__co_ transmit_event.transmit_mouse_co_ false)_sm_\t\tUI_canvas.addEventListener(_qt_pointerout_qt__co_ transmit_event.transmit_mouse_co_ false)_sm_UI_canvas.addEventListener(_qt_pointerover_qt__co_ transmit_event.transmit_mouse_co_ false)_sm_\tUI_canvas.addEventListener(_qt_pointercancel_qt__co_ transmit_event.transmit_mouse_co_ false)_sm_\t\tUI_canvas.addEventListener(_qt_pointermove_qt__co_ transmit_event.transmit_mouse_co_ false)_sm_UI_canvas.addEventListener(_qt_pointerenter_qt__co_ transmit_event.transmit_mouse_co_ false)_sm_UI_canvas.addEventListener(_qt_pointerleave_qt__co_ transmit_event.transmit_mouse_co_ false)_sm__lt_/pre_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Xeonzinc","Date":"2014-10-16T10:06:39Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Ok_co_ progress. I have now replaced the problem code_dd__lt_/p_gt__lt_pre class_eq__qt_ipsCode prettyprint_qt__gt_new_event _eq_ new MouseEvent(evt.type_co_ evt)_sm_\t\t\tdocument.getElementById(_qt_babylon_canvas_qt_).dispatchEvent(new_event)_sm__lt_/pre_gt__lt_p_gt_With this_dd__lt_/p_gt__lt_pre class_eq__qt_ipsCode prettyprint_qt__gt_if (event.initMouseEvent) {     // all browsers except IE before version 9\tpointerEvent _eq_ document.createEvent (_qt_MouseEvent_qt_)_sm_\tpointerEvent.initMouseEvent (evt.type_co_ evt.bubbles_co_ evt.cancelable_co_ evt.view_co_ evt.detail_co_ evt.screenX_co_ evt.screenY_co_ evt.clientX_co_                                         evt.clientY_co_ evt.ctrlKey_co_ evt.altKey_co_evt.shiftKey_co_ evt.metaKey_co_ evt.button_co_ evt.relatedTarget)_sm_\tdocument.getElementById(_qt_babylon_canvas_qt_).dispatchEvent(pointerEvent)_sm_}_lt_/pre_gt__lt_p_gt_This now appears to work in both IE and Chrome_co_ _lt_strong_gt_however_lt_/strong_gt_ IE 11 seems unable to handle the sheer number of event creation and initiations for _t_pointermove_t_ and slows down to a crawl. As far as I can tell this is the recommend method for event creation in IE_co_ which makes me think the problem may be in the browser rather than my coding._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Unless anyone has any bright ideas I_t_m going to leave this one here with the knowledge that it isn_t_t suitable for _qt_pointermove_qt_ events on IE._lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Temechon","Date":"2014-10-16T11:40:33Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Very nice work_co_ thank you for contributing. I might use this for a next project _lt_img src_eq__qt_http_dd_//www.html5gamedevs.com/uploads/emoticons/default_smile.png_qt_ alt_eq__qt__dd_)_qt_ srcset_eq__qt_http_dd_//www.html5gamedevs.com/uploads/emoticons/smile@2x.png 2x_qt_ width_eq__qt_20_qt_ height_eq__qt_20_qt__gt__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Cheers_co_ _lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Junior","Date":"2014-12-04T06:38:16Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Hi Guys_co__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_I am trying to create a user interface and I have started a thread on the forum _lt_a href_eq__qt_http_dd_//www.html5gamedevs.com/topic/10823-need-help-with-design-of-a-graphical-user-interface/_qt__gt_here_lt_/a_gt_ on Wednesday_co_ Dec. 3_co_ 2014. So far_co_ no one has responded to my request for help. I find your discussion very interesting_co_ and I would like know if you found a solution that you could share with me. I am not a programmer but I use blender a lot for creating 3D models. The project that I am currently working on is the development of an interactive 3D car Model that will allow the user to customize it and then press a button to automatically generate an invoice of all the parts in the model. Are you able to give any assistance?_lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Cheers.  _lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Stephen Andrews","Date":"2014-12-04T11:28:50Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_blockquote data-ipsquote_eq__qt__qt_ class_eq__qt_ipsQuote_qt_ data-ipsquote-contentcommentid_eq__qt_63376_qt_ data-ipsquote-contenttype_eq__qt_forums_qt_ data-ipsquote-contentclass_eq__qt_forums_Topic_qt_ data-ipsquote-contentid_eq__qt_9772_qt_ data-ipsquote-username_eq__qt_Junior_qt_ data-cite_eq__qt_Junior_qt_ data-ipsquote-timestamp_eq__qt_1417675096_qt__gt__lt_div_gt__lt_div_gt__lt_p_gt_Hi Guys_co__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_I am trying to create a user interface and I have started a thread on the forum _lt_a href_eq__qt_http_dd_//www.html5gamedevs.com/topic/10823-need-help-with-design-of-a-graphical-user-interface/_qt__gt_here_lt_/a_gt_ on Wednesday_co_ Dec. 3_co_ 2014. So far_co_ no one has responded to my request for help. I find your discussion very interesting_co_ and I would like know if you found a solution that you could share with me. I am not a programmer but I use blender a lot for creating 3D models. The project that I am currently working on is the development of an interactive 3D car Model that will allow the user to customize it and then press a button to automatically generate an invoice of all the parts in the model. Are you able to give any assistance?_lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Cheers.  _lt_/p_gt__lt_/div_gt__lt_/div_gt__lt_/blockquote_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_To be quite frank_co_ I can_t_t understand what you_t_re saying._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_You want the car to be customize-able_co_ that is clear_co_ but then you want a list of all the parts? Or you_t_re trying to customize each part? Or you just need help making a button? _lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_What exactly is the issue that you need help with?_lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Junior","Date":"2014-12-04T13:33:06Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_@ Stephen_lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_There are 3 requests. I realize that they are not easy to achieve but I will list them in priority order._lt_/p_gt__lt_ol_gt__lt_li_gt_Make 4 buttons so that users can view the car from 4 angles. Top_co_ Front_co_ Right_co_ Left and Back _lt_/li_gt_\t_lt_li_gt_Make 1 button so that users can see labels on the parts as illustrated  _lt_a href_eq__qt_http_dd_//blog.sketchfab.com/post/92050205754/meet-our-annotations-feature_qt_ rel_eq__qt_external nofollow_qt__gt_here_lt_/a_gt_ . (The user should be able to click on the labels to see a description or annotation of the parts.)_lt_/li_gt_\t_lt_li_gt_Make 1 button so that a list of all the parts in the model can be generated and sent to a shopping cart for processing._lt_/li_gt__lt_/ol_gt__lt_p_gt_If you are able to assist with any of the requests_co_ then I would greatly appreciate it._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Thanks_lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"JCPalmer","Date":"2014-12-04T18:57:55Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Junior_co__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_On point 1_dd_  You will cut your work in half_co_ by having the camera _qt_track to constraint_qt_ the car_co_ (select mesh_co_ select camera_co_ crtl-t) on the Blender side.  The exporter will convert that to camera.lockedTarget.  Then all you have to do is move the camera.  In Javascript_co__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_camera.position.x _eq_  ..._sm__lt_/p_gt__lt_p_gt_camera.position.y _eq_  ..._sm__lt_/p_gt__lt_p_gt_camera.position.z _eq_  ..._sm__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_or_lt_/p_gt__lt_p_gt_camera.position _eq_ new BABYLON.VECTOR3(x_co_ y_co_ z)_lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Junior","Date":"2014-12-04T23:08:23Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_@ JC Palmer_co__lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Thanks for the tip. I will give it a try._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Cheers_lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"},{"Owner":"Junior","Date":"2014-12-05T18:02:34Z","Content":"_lt_div class_eq__qt_mages_qt__gt_\n\t\t\t\n_lt_p_gt_Thanks_co_ Triblade_co_ I_t_ll take you up on the offer soon._lt_/p_gt__lt_p_gt_ _lt_/p_gt__lt_p_gt_Cheers._lt_/p_gt_\n\n\n\t\t\t\n\t\t_lt_/div_gt_\n\n\t\t_lt_div class_eq__qt_ipsI_qt__gt__lt_/div_gt__lt_/div_gt_"}]