Discussion :

[pierre.E]

Tuto rapide pour utiliser blend4web
Un rapide tuto pour utiliser le framework blend4web qui utilise le moteur de rendu 3d webgl
Intérêt : créer une animation 3d visible sur le navigateur sans installer de plug in
http://blend4web.pagesperso-orange.fr/
Les moins : sur appareil mobile ca rame
Important : pour des raisons de same-origin policy il faut utiliser firefox pour tester votre animation sans utiliser le projectmanager et sans la mettre en ligne ( fonctionne pas avec chrome et ie si pas en ligne)
1/installation
a)installer blender et se familiariser avec blender( compter un mois pour un débutant)
https://www.blender.org/
b) installer blend4web et son « plug in » dans blender
https://www.blend4web.com/en/services/doc/
Si vous avez réussi cette étape dans blender vous devriez voir dans blender
Blend4web dans onglet engine en haut au milieu

Un fast preview dans la fenêtre 3d ( le petit cube à gauche) qui est intéressant car il permet de changer
en live matériel et d’autres paramètres et voir les différentes animations présentes

Et dans file export le choix blend4web(.json) ou blend4web(.html)

c) il existe un gestionnaire de projet qu’on peut lancer via la fenêtre properties onglet render ( appareil photo)

2/contenu d’un projet
Votre dossier va contenir les fichiers suivant qu’ on trouve dans répertoire de blend4web( petit jeux froid chaud  je vous laisse les chercher)) c’est cette arborescence qu il faudra mettre sur votre serveur web
uranium.js
uranium.js.mem uranium gère le moteur physique donc optionnel si pas utilisation moteur physique
b4w.min.js le moteur webgl de b4w
la page index.html qui ne contient qu un iframe
<div id="container" style="width: 560px; height: 300px;background-color:powderblue ;margin:auto">
<iframe allowfullscreen src="webplayer.html?load=assets/mascene.json&show_fps&no_social" width="100%" height="100%">
</iframe>

Pour les options voir tutoblend4web

webplayer.html (la page qui contient div canvas 3d et div boutons)(ps rien ne vous interdit de rajouter canvas 2d pour superposer un canvas 2d au 3d)
webplayer.css (ou le et webplayer.min.css si vous souhaitez rien modifier)

webplayer.js (il y a le webplayer.min.js mais bon pas utilisable si on fait modification)

un dossier assets qui contiendra
Dossier textures
Dossier sons
et les 2 fichiers
mascene.json et mascene.bin obtenus en exportant depuis blender
un dossier blender qui contiendra mascene.blend qui n’est pas à mettre en ligne donc ne pas l’ uploader sur le serveur web.
3/utilisation du project manager qui est un serveur web
On le lance à partir de blender via la fenêtre properties onglet render ( appareil photo)
on crée un nouveau projet qui va créer un dossier assets blender et build dans lesquels vous copiez les fichiers décris ci-dessus
on peut via le projectmanager editer fichier b4w.project

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
[info]
author = 
name = test1
title = 
icon = 
 
[paths]
assets_dirs = projects/test1/assets;
blend_dirs = projects/test1/blender;
blender_exec = blender
build_dir = projects/test1/build
deploy_dir = 
 
[compile]
apps = 
css_ignore = 
engine_type = webplayer_html
ignore = 
js_ignore = 
optimization = simple
use_physics = 
use_smaa_textures = 
version = 
 
[deploy]
assets_path_dest = assets
assets_path_prefix = assets
ignore = 
override = 
 
[url_params]
no_social = 
show_fps =

et les autres
et quand on a fini on peut lancer un deploy qui crée un .zip mais il faut le dezipper et rajouter fichier pour avoir arborescense du 2/
il ne vous reste plus qu a uploader sur votre serveurweb
3/animation via javascripts( un langage pour les gouverner tous)
Pour animer votre scène vous avez le choix d’utiliser les « logic node ou animations » de blender soit en javascripts et utiliser les api mis à disposition par blend4web
https://www.blend4web.com/api_doc/index.html
mon script est écrit à la suite dans le webplayer.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function mon_script() {
//J’utilise api blend4web pour animer
  /*----je peux utiliser  requestanimationframe 60 fois par seconde
 /*cf http://creativejs.com/resources/requestanimationframe pour explication*/
  function draw() { // console.log("function draw");
 truc a faire tous les1/60 seconde……
    requestAnimationFrame(draw);
    }
 draw();//tout est en place je peux lancer l'animation via requestframe*/
}

Et appeler à la fin de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function loaded_callback(data_id, success) {
//….plein de trucs
mon_script() ;
}

4/une fois votre animation fini il ne vous reste plus qu’a l uploader sur votre serveur web en conservant l’arborescence via ftpzilla ou autre….
Ps : pour tester sans utiliser le project manager et sans mettre en ligne j’utilise firefox car il y a une histoire de crosssite policie et ça ne marche pas avec chrome ou ie, vous aurez droit à

5/le résultat :
http://blend4web.pagesperso-orange.fr/
En conclusion
Pour un débutant il faut compter un mois pour apprendre à utiliser blender et 1 mois pour s’en sortir avec les api blend4web ( attention exporter en webgl apporte des limitations par rapport à blender donc toujours tester votre scène).j’ai personnellement assez galéré avec les animations et le nla editor.
Annexe : quelques bons tutos
http://blenderlounge.fr/blend4web-2-...-avec-blender/
https://www.youtube.com/channel/UCvQ..._Z1uewYQkYrzlA

difficultés rencontrées:
pour les animations et les baked vertices animations car b4w produit deux animations et pour avoir les noms pour les appeler via le script il faut utiliser le fastviewer

intérêt par rapport a unity3d: ben je sais pas car j utilise pas unity pour le moment

[pierre.E]

http://blend4web.pagesperso-orange.f...&amp;no_social

[pierre.E]

ps explication pour le 4/
due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception.
How_to_run_things_locally

[pierre.E]

bon maintenant j'utilise verge3d
verge3d a été crée par des programmeurs de blende4web qui ont quitté blende4web (demandez pas je sais pas pourquoi )
je suis passé à verge3d car ça fonctionne avec blender 2.8 alors que pour le moment blende4web prend pas en charge blender 2.8.
verge3d et le verge3d.js est basé sur threejs et utilise webgl donc pas besoin plug in dans navigateur. le learning curve(temps d'apprentissage) est rapide ( enfin il faut comprendre que certains trucs de blender marche pas dans verge3d : eg specular ,follow curve.....)
sinon le principe est le même de blender on lance un serveur web et ont créer une nouvelle application un peu comme blende4web avec en bonus on peut publier dans le cloud ( mais uniquement 30 jours pour version gratuite) et pour l'interface c'est du html css adossé à du javascript.
ci joint le système solaire modélisé dans blender 2.8



https://cdn.soft8soft.com/AROAJSY2GO...ire_final.html

[Piraaate]

URL="https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:d33bbd217b/applications/systeme_solaire_final/systeme_solaire_final.html"]https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:d33bbd217b/applications/systeme_solaire_final/systeme_solaire_final.html[/URL]

Perso l'écrou tourne jusqu'à 100%, puis continue de tourner mais rien d'autre ne se passe
Je suis sous Chrome 73, Windows 10

EDIT: la page http://blend4web.pagesperso-orange.fr marche

[LittleWhite]

J'ai chargé la page... y a des objets dans le soleil
Sinon, c'est sympa, le système solaire

[pierre.E]

Perso l'écrou tourne jusqu'à 100%, puis continue de tourner mais rien d'autre ne se passe
Je suis sous Chrome 73, Windows 10

Bonjour effectivement sous chrome ça bloc à 100% il y a du rouge dans la console je vais signaler le probleme aux développeurs
(pour moi ca fonctionne tres bien dans firefox et edge)

bon ca provenait d'un "baking" de "curve" qui s'etait mal passé le probleme à été corrigé

[pierre.E]

systeme_solaire.html
ah flute j'ai droit à erreur

Blocage du chargement du contenu mixte actif (mixed active content) « http://vo.imcce.fr/webservices/miria...lane=2&-teph=1 »

bon la à 1er vue ca marche
http://blend4web.pagesperso-orange.f...e_solaire.html
si quelqu un peut m expliquer pourquoi ca marche dans un lien et pas dans l'autre je suis preneur
quand j'integre dans un iframe ca marche plus non plus
(pour l iframe ca doit venir de https://developer.mozilla.org/fr/docs/Web/HTTP/CORS

v3d.js:1 DOMException: Blocked a frame with origin "http://blend4web.pagesperso-orange.fr" from accessing a cross-origin frame.
at init (http://blend4web.pagesperso-orange.f...aire.js:224:36)
at runCode (http://blend4web.pagesperso-orange.f...olaire.js:24:9)
at http://blend4web.pagesperso-orange.f...olaire.js:19:9
at i.renderer._resizeCb (http://blend4web.pagesperso-orange.f...d.js:1:1003007)
at http://blend4web.pagesperso-orange.f...3d.js:1:955278
at http://blend4web.pagesperso-orange.f...3d.js:1:968248

[pierre.E]

bon j'ai résolu le probleme pour l'iframe
en créant une page systeme_solaire_iframe dans laquelle j'ai juste rajouté
document.domaine = 'http://monsiteouestliframe.io';

par contre apres j'ai du supprimer le parent dans appel variable parent.mavariable donc mavariable

pour le Blocage du chargement du contenu mixte actif (mixed active content) « http://vo.imcce.fr/webservices/miria...lane=2&-teph=1 »
cela provient que le site n est pas https

non-secure protocol, which conflicts with HTTPS-enabled Verge3D Network.

[pierre.E]

systeme_solaire.html