I have created a simple scene with a cube and a sphere using Blender. Exported it as Blender 4 web json. I have done a simple a simple webpage as follows.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="b4w.full.min.js"></script>
<iframe allowfullscreen src="webplayer/webplayer.html?load=../SampleCube/samplecube.json" width="800" height="500"></iframe>
</html>
Above file is creating using these guidlines Blender 4 Web Tutorial.
Where do you get the Web Player? You can copy the whole directory blend4web/deploy/apps/webplayer/ with the Web Player files from your Blend4Web SDK and deploy it on your website.
JSON files can be exported in the same way as the HTML files File > Export > Blend4Web (.json). Upload your exported .json file (with the accompanying .bin file and possible textures) to your website and specify the path to it with the load attribute. Both absolute and relative URLs are supported.
When i ran the above HTML(i have started a simple HTTP server in the directory containing the index.html using python), it's ok if the cpu goes high and comes down. But, the problem is this webpage keeps consuming constant amount(say 20%) of CPU. Why is CPU consumed even after a webpage is loaded. Do i need to disable anything in b4w to reduce the cpu usage when i'm not doing any action on webpage(Such as scrolling, clicking).
It consumes CPU Constantly because blender engine will keep running even when we are not interacting with the model.
Blender engine can be paused when not needed as follows. Blender engine can be paused after loading is done.
var m_main = b4w.require("main");
m_main.pause();
When you want to enable it again. call
m_main.resume();
Try not to load that b4w.full.min.js file in the same page.
Explanation: The player already contains the b4w engine and it seems that the use of both is very intensive for the CPU.
Related
Is there a way to save and load stringified objects with three.js?
I found this: https://github.com/josdirksen/learning-threejs/blob/master/chapter-08/03-load-save-json-object.html
but they use localstorage to save and load, which won't work between sessions or different computers.
Is there a way to load files just like the model is loaded? This should be like loading data files for a game.
I run the webgl client with Autodesk viewer locally with http-server.
If the Object can be written to localstorage it can just as well be exported as a file. You can send them to a server and store them there (maybe something like firebase would be useful here), or you can intiate a "download" directly from the browser. This is explained in Create a file in memory for user to download, not through server.
For loading a file, you can use the file-api, which is shown here: How to open a local disk file with Javascript?.
You just need to replace the localstorage-parts in your example accordingly.
Adding to Martin's answer, the Autodesk Viewer uses files translated and hosted by Model Derivative API. It's possible to show multiple files into the same scene. The Viewer is read-only. There is a getState and loadState functions to get the objects that represents the current zoom/explode/view information, and that can be serialized and stored somewhere.
There are some samples showing how to move a geometry on the model, for instance, move the geometry of a wall (from a building model). But that is not persistent, meaning you need to implement a JavaScript (client) + back-end infrastructure to save and restore those transformations.
I have modified my modified my html5 library to point my kaltura server. Now I am able to play videos as static html webpage. but I tried in my project which is developed using php, it doesn't play the videos in even PC's too.
It says kwidget is not defined.
I used the kWidget embed code. But it s not happened in auto embed or flash embed.
But I read that kwidget is good to reduce the page load timings
If you are using any MVC, you need to add the mwEmbedLoader script in the service or controller's head. I think you used the kwidget code in view sector and not add your script in controller page. you need to add your script in all the pages wherever the player function calls as below.
You can add that in couple of ways.
<script src="http://youkalturaserver.example.com/p/partnerId/sp/partnerId+00/embedIframeJs/uiconf_id/11170264/partner_id/partnerId"></script>
<script type="text/javascript" src="http://youkalturaserver.example.com/html5/html5lib/v2.69.7/mwEmbedLoader.php"></script>
replace v2.6.7 with current release version:
https://github.com/kaltura/mwEmbed/releases
It will solve this error
When someone navigates to my Meteor app, I would like the home page to be loaded first, rendered, and displayed. And then as soon as this is done (the user can start clicking around), all the other resources and databases for all pages of my app are loaded (cached) in the background to LocalStorage (as much as can fit), so that all the pages, images, etc, of my app will appear instantly when navigated to.
What's the no-brainer convention for doing this in Meteor? Is there a package?
And secondly, how do I indicate which resources I want to be highest priority in the background loading queue? For example, how do I make sure that a "splash page" and its images shows up right away?
Meteor apps are, by design, single-page sites. If you view-source on a deployed Meteor app, for example http://docs.meteor.com, the <head> always looks something like this:
<link rel="stylesheet" href="/5a6084946b1bc47e30e45c05bdecb13536a2dc64.css">
<script type="text/javascript">
__meteor_runtime_config__ = {"meteorRelease":"galaxy-follower-5","ROOT_URL":
"http://docs.meteor.com","ROOT_URL_PATH_PREFIX":"","serverId":
"964b34dc-ffbb-b860-a313-9eedca254d83","DDP_DEFAULT_CONNECTION_URL":
"ddp+sockjs://ddp--****-docs.meteor.com/sockjs"};
</script>
<script type="text/javascript" src="/3353c2b059d42f3fe42e0d5eba87882b955d7cbe.js">
</script>
That .css file is all of your app's CSS, concatenated into one file; and that .js file is all of your app's JavaScript, including all of your templates, concatenated into one file. That's just the way Meteor is designed, and it's not something you can change without delving deep into Meteor's source and rewriting some major chunks.
The only suggestion I have for you is to have your homepage served by something else, such as an Apache or Nginx server, which really does serve up just the bare minimum that you're after; and fetches the above .css and .js files and preloads them. Use a router package in your Meteor app, and take care that all the links in your homepage point to routes that are defined in the Meteor app. You can also speed things up a bit by separating out and loading from a CDN or your Apache/Nginx server any resources not directly needed by Meteor—images, additional CSS, external JavaScript like libraries—and having those preloaded by your non-Meteor-hosted homepage.
Finally take a look at meteor-external-file-loader. It's designed for loading external JavaScript libraries on the fly in Meteor apps, for example loading Google Maps only on the pages where you're actually showing maps. I'm not sure if it can be used to load JavaScript that's core to your app like templates, but if your app is so large that you're thinking of splitting it up anyway then presumably there are parts of your code that you can separate into packages like your own custom JavaScript libraries, which can then be loaded dynamically from your Apache/Nginx server using meteor-external-file-loader.
I am creating a mobile singlepage web app using jquery mobile. The webapp includes a number of javascript files and a number of css files. I have written a deploy script that concatenates and minifies js and css files, and now I am wondering whether I should inline the concatenated js and css directly in the HTML file - please note that I am talking about a singlepage app here (I know that this would be a bad idea in a traditional web 1.0 app with dynamically generated HTML). I am also using appcache/manifest file to cache the singlepage app so that subsequent access to the web app will be served from the cache, so it is the initial load time that is my primary concern.
When I inline everything (jquery, jquery mobile etc.), my 7kb HTML file increases to 350kb (100kb zipped) but now everything can be loaded in a single request.
But am I missing some other benefits such as parallel downloading of js files - and would it therefore be better to not inline the css and js, but instead just concatenate all js and css to a single js file and a single css file and then fetch each of them in separate requests?
Are there any limits regarding file size that I should be aware of? Maybe caching in network routers works better with smaller file sizes or whatever?
So my question boils down to whether it is a good idea to inline everything when making singlepage mobile web apps?
The answer to how much should be concatenated and how much should be inlined varies depending on a number of conditions. The final answer is you should do A/B testing and find what works best for you. From what you describe I recommend you definitely NOT inline 350K of CSS & JS. If you do this then any change to the HTML or JS or CSS requires downloading the entire payload. Instead, compartmentalize those changes and forced updates by keeping HTML, JS, & CSS as separate requests. You could do dynamic | inlining to make the first response fast but leverage (app or localStorage) cache for subsequent requests, but that's going to get complicated when coupled with app cache (because the HTML doc is saved to app cache). Otherwise, just keep them separate, save each resource to app cache, and update individual resources as needed.
I would not recommend inlining everything into the html if your webapp could be accessed from different urls with different querystring.
Example :
http://webapp.com/?fb_token=fdsf
http://webapp.com/?referer=bla
http://webapp.com/?tracker=toto
Each of those will add a master copy in the appcache (you can veryfy it by looking at chrome://appcache-internals/ in chrome). You then risk to reach the quota limit for appcache in term of cache. Furthermore on appcache update, the browser goes through its appcache entry list and ask a fresh copy of it.
A good compromise that i am following for mobile device & appcache , is to keep the html tiny and then have one big css (containing base 64 inlined images) and one js file.
FYI, there is currently a quota limit on the size on the sum of all your listed resources in appcache in the order from 5MB to 25MB (25 being the new iOS6 limit)
-seb
People are telling me that I need a script loading for web app, but I already have <script /> and <link /> tags already, can anyone tell me when I should use a script or resource loader? and What is the load you recommend.
I'm assuming they are referring to loading and executing javascript files as and when needed, to reduce the initial load times of pages by not loading all your scripts in the head section of the html.
Not totally sure if thats what your getting out, could you give more information on the situation? does your web app have a large number of javascript tags?
I think the requirement of the scripts loader is for multiple <script src=""> tags in the html page, one of more of the scripts have the loading order required, like: the jquery.js must be loaded before the jquery-plugin.js. Another case is the scripts which will be loaded are different in different client devices, like the javascript run for desktop client will be different than the javascript run in the touch pad
When you are working on a single-page application with a lot of dependencies between JS files.