I tried out the stairs.html post and it worked… pretty amazing! Thanks for doing this!
Hi,
A web application is basically an HTML file which is scripted for interactivity. In the example below you can see a very simple Blend4Web app which just loads an exported scene (and it is not actually interactive).
<!DOCTYPE html> <html> <head> <script src="b4w.min.js"></script> <script> function hello() { var m_main = b4w.require("main"); var m_data = b4w.require("data");var canvas_elem = document.getElementById("canvas_id");
m_main.init(canvas_elem);
m_data.load("some_scene.json");
}
</script>
</head>
<body onload=“hello()”><canvas id=“canvas_id”></canvas></body>
</html>
We are planning to release a programming tutorial in near future. Meanwhile you can look at Scene Viewer’s source code and read the API doc.
Well I now understand what’s going on.
You get such rendering due to LOW quality mode which was enabled by default for the first Blend4Web release.
In low quality mode all post-processing is turned off as well as anti-aliasing, reflections and shadows 
We started making our tutorials after we decided to use the HIGH Q mode for the HTML exporter - but this version is not released yet! That explains the disparity you see.
The addon and the SDK builds should be out next week.
You can try a pre-release addon build if you wish (unstable).
blend4web_pre_release.zip (598 KB)
Would be nice to see a demo someday for something interactive like a configurator or product viewer!
@UFOa. Thank you for your answer and the HTML file sample, but I still cannot get my head around the “create-target-application” part.
I can quite follow the HTML app code you forwarded; but I cannot see how that ties-in to the rest of the workflow; on step 3, I loaded the scene in the viewer, and tweaked it; what do I do with next?
The point in case: I have a project called “cube” loaded into the viewer fully tweaked and ready for the application; what is my next step? At this stage I am not pursuing an in-depth knowledge, but just a clear idea of the basic workflow, to be able to start dealing with the programming part. I fully understand the three steps, but I am at a loss as to how to proceed from the viewer to the target application.
Sorry if my question is too noobie; but I really need that basic information to be able to move forward with this incredible software; and, who knows, maybe this information could help somebody else out there.
Hi there
Understood re pre-release and thanks for your fast response.
I have to say that I’m just blown away by this add-on. You’ve done incredible work so far.
So much to be said for having a one-click web publishing solution straight from Blender.
A hearty congratulations to you and your team.
Hi,
An application part is fully dependent on what you want Create a web app as HTML+CSS+JavaScript files. Load your “Cube” scene into your app using the Blend4Web API. Try to move/rotate it, try to change its color.
A simple cases such as Hello World! app are described in the manual’s section for app devs. We’ll publish some programming tutorials asap.
In apps you can do a lot of things - select objects with the mouse, hide/unhide objects, animate, run particle effects, move the sun - whatever you want! Use a Scene Viewer app source code as reference for what you can do, read the API doc for detailed info about function calls.
Of course you must have some background in web development If you are not a developer - you can still use Blend4Web for publishing your scenes right into the web!
Thanks for your interest!
@UFOa. Thank you for your answer. I have managed to actually make the application work, with the absolute path to b4w.min.js. I can see how the application is actually built. But there is something I do not quite understand yet: the function of the viewer.
Does the viewer produce any output? What is the purpose of tweaking the JSON in the viewer if eventually everything will be coded manually? I have the feeling that I must be missing something here.
I have been looking through the dev docs and I am sure once I get these basic questions answered, I should be able to move forward fast; I am not having coding issues, but more of a lack of understanding of the fourth step in the general workflow.
Please help.
The answer is posted by Yuri (Dev Lead) using UFOa’s account.
Hi Sept,
Thanks for your interest and for your feedback. You help us a lot.
I’m posting here a resume of our last email conversation to inform the community.
Q: Can the Scene Viewer save the result of tweaking?
A: No. The Scene Viewer is a web app itself and cannot save to the file system directly. Technical solutions to this are possible but difficult to implement reliably. The parameters you tweak must be manually transferred to the Blender part in order to be saved. The good news is that a vast majority of tweakables can be set and viewed right in the Blender viewport (in the GLSL mode). Also exporting is fast - there are no additional steps between Blender and the browser like in other engines such as Unity 3D.
Q: So why do I need the Scene Viewer at all?
A: In our workflow we use the Scene Viewer for tweaking, debugging and optimizing models, parts of the target scene and the target scene for an app. It stores a catalogue of models and scenes ready for the Web.
Q: What’s the app.js addon you mentioned in the developers section of the manual?
A: This is a utility JavaScript module intended for fast creating new Blend4Web apps. It can be found in the src/addons directory of the SDK.
Q: Can you provide more programming examples?
A: Please have a look at the source code of the Scene Viewer and the Embed apps which can be found in the apps_dev directory of the SDK. The source code of our demo apps (as well as source blend files) is also available under the commercial license. We’ll post some programming tutorials soon.
Yuri
Blend4Web { Development Lead }
Hi,
I’ve tried your addons, and it worked fine. Great works! I found by default the html export blender scene with W A S D and arrow keys as navigation, how to disable them? “Controls API. Inspired by blender game engine”, so i assumed this is like a js version of python scripting in BGE. Is that right?
Hi alanhzh,
For the camera enable the Target control mode using the Blend4Web > Move style drop-down menu under the Object Data tab. This will allow to rotate the camera with the mouse. BTW this option will be enabled by default in the upcoming Blend4Web release.
The B4W’s JavaScript API actually differs from the BGE’s Python API a lot. However some concepts are very similar (such as Event-driven model aka sensors).
Thanks for your interest!
Yuri
Blend4Web { Development Lead }
New Blend4Web Release Available
We are proud to announce that the second public release of Blend4Web – the 3D web framework - is out!
The framework is intended for authoring interactive 3D content to work in browsers without the use of plug-ins. Blend4Web is integrated tightly with Blender which is used as a primary tool for editing 3D scenes. The content is rendered with WebGL, Web Audio and other browser technologies.
We tried to address the issues indicated by the community fully.
In this release:
The “Fashion Show” demo scene is upgraded! The artists used a lot of fancy Blend4Web features such as vertex and skeletal animation, dynamic reflection and shadows, node materials, particle systems, multiple light sources of different types and so on.
Basic support of Blender’s non-linear animation editor (NLA) is added. The NLA editor makes it possible to develop simple scenarios without the use of programming. Animation, sound and particles playback is supported.
The TIME special node is implemented for the node materials. The new node allows the animation of arbitrary material parameters.
The SMAA (Subpixel Morphological Anti-Aliasing) anti-aliasing method by Crytek is implemented. The method is used by default on ultra settings.
Target mode is used by default instead of Static mode for the camera. In this mode the camera rotates around a predefined pivot.
A more functional profile is now used for the HTML export instead of the low quality profile.
The binary builds of the Blender addon now include 32-bit x86 Linux architecture support (in addition to 64-bit).
Performance and stability for the addon on 64-bit Windows are improved. Now it is compiled using the Windows SDK instead of MinGW. The 32-bit Windows builds are cross-compiled as before.
A preliminary support for Internet Explorer 11 is implemented.
The scene loader is upgraded to display partial file loading which is useful for slow network connections.
The manual is reworked and updated, particularly the installing, troubleshooting and application development sections.
The tutorial source files are included into the distribution.
Hi,
Check out a particle system tutorial! The majority of Blender’s native particle settings can be used, even procedural textures for dynamics and coloring. The source blend file is available. Create amazing particle effects in Blender and publish them right into the web!
very nice progress!! Thank you for the continued development !! 
I wish blender had better visual programming tools than the logic bricks. There are a couple of really good visual programming studios that export to 2d html5:
https://www.scirra.com/
http://www.en.compilgames.net/
But there is not one that exports to 3d html5 like this.
I find blender’s logic bricks/nodes so counter intuitive in comparison to the approach construct2 and gamedevelop have taken.
UFOa, what do you think, is it possible to re-create my game Dead Cyborg using your system?
Hi blurymind,
Thanks for your support!
There were a lot of discussion at visual programming in the B4W team. From a devs view it is somewhat difficult to understand why it is needed at all. If you want something, just code it!
We started to understand the importance of visual approach while making our demos. In Blender we design levels, model and paint terrain, setup collisions-vehicles-doors-ladders-sensors, place positional sounds and bots. We use node materials extensively because they give the Blender artists freedom to construct every material they imagine. Recently a basic NLA support was implemented for making complex scenarios without scripting.
As for logic bricks… our programmers don’t like this idea much… A visual program is difficult to debug and optimize. It cannot be put under version control effectively because it is stored in a binary form, and so it is a pain for a team to merge the developers’ work…
Also Blender’s logic bricks are specific to the BGE API which is Python based and needs to be converted to work in browsers. The same problem arose for Unreal and Unity when they finally decided to support HTML5. Porting C++/.NET to JavaScript is a cumbersome task itself, and also results in a large code base needed to download (besides graphics) when you visit a web page. An additional programming layer potentially slows things too.
However I believe there is a place for visual programming in Blend4Web. It could be useful for small web projects such as visualizations with a little interactivity. Something close to the Adobe Flash workflow - click here and some action is performed.
I think Blender is great! It is free and open source and is not controlled by big vendors. I can do EVERYTHING EVERYWHERE. Blend4Web was born occasionally. We just wanted to do 3D in Blender for the web 
Meantime we are working hard to provide the programming examples to the community. We are preparing new tutorials and demos. Stay tuned
Hi Endre,
I’ve downloaded your wonderful game and enjoyed playing much! I also looked at the source blend files. Nice work!
I think Blend4Web can provide all features you used in Dead Cyborg. There are some browser-specific issues though. We recommend to use JPEG/PNG textures because not all browsers support the DDS format. The same thing with WAV sounds - use OGG instead.
Neither logic bricks nor Python scripting is supported. You’ll need some web programming skills. JavaScript syntax is very simalar to Python so I don’t think you’ll have any problems.
Similar to BGE you can place physics collision meshes, detect items close to camera, take-hide-unhide-throw these items, play sounds, play animation.
When we make a new interactive application we do some simple steps. We create a single HTML file with a short JavaScript code which just loads a simple Blender scene. If you can walk on it in the first person view mode - you already made a great step forward because all other features can be added later.
Usually we store assets in the Viewer which can be found in the SDK. You may tweak and check them separately before loading into an app. Also I would recommend you to place all the models into different blend files and then link them into the master blend file in a step-by-step manner. This will help to have a streamlined error-free workflow and also allow your teammates to work with different assets without disturbing each other.
We’ll provide some programming tutorials soon. If you have any questions feel free to ask. We’d like Dead Cyborg to work in browsers!
The fashion show runs slow like 8 - 9 fps. Im sure, that with the webgl we will be able to create interactive 3d websites for the future.
Hi Akira_San,
Thanks for your feedback. We keep working on performance. BTW what are your machine spec?