Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre actif Avatar de pierre.E
    Homme Profil pro
    Développeur en systèmes embarqués
    Inscrit en
    janvier 2016
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur en systèmes embarqués
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2016
    Messages : 81
    Points : 209
    Points
    209

    Par défaut Blend4web la 3d via navigateur

    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
    Nom : 1.png
Affichages : 420
Taille : 341,3 Ko
    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
    Nom : 2.png
Affichages : 384
Taille : 341,0 KoNom : 2.png
Affichages : 384
Taille : 341,0 Ko
    Et dans file export le choix blend4web(.json) ou blend4web(.html)
    Nom : 3.png
Affichages : 384
Taille : 375,2 Ko
    c) il existe un gestionnaire de projet qu’on peut lancer via la fenêtre properties onglet render ( appareil photo)
    Nom : 4.png
Affichages : 394
Taille : 366,9 Ko
    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 à
    Nom : 5.png
Affichages : 422
Taille : 60,2 Ko
    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

  2. #2
    Membre actif Avatar de pierre.E
    Homme Profil pro
    Développeur en systèmes embarqués
    Inscrit en
    janvier 2016
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur en systèmes embarqués
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2016
    Messages : 81
    Points : 209
    Points
    209

  3. #3
    Membre actif Avatar de pierre.E
    Homme Profil pro
    Développeur en systèmes embarqués
    Inscrit en
    janvier 2016
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur en systèmes embarqués
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2016
    Messages : 81
    Points : 209
    Points
    209

    Par défaut

    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

  4. #4
    Membre actif Avatar de pierre.E
    Homme Profil pro
    Développeur en systèmes embarqués
    Inscrit en
    janvier 2016
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur en systèmes embarqués
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2016
    Messages : 81
    Points : 209
    Points
    209

    Par défaut quelques nouvelles et présentation de verge3d

    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

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    février 2007
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2007
    Messages : 35
    Points : 66
    Points
    66

    Par défaut

    Citation Envoyé par pierre.E Voir le message
    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

  6. #6
    Responsable 2D/3D/Jeux


    Avatar de LittleWhite
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    mai 2008
    Messages
    24 257
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : mai 2008
    Messages : 24 257
    Points : 177 856
    Points
    177 856
    Billets dans le blog
    49

    Par défaut

    J'ai chargé la page... y a des objets dans le soleil
    Sinon, c'est sympa, le système solaire
    Vous souhaitez participer à la rubrique 2D/3D/Jeux ? Contactez-moi

    Ma page sur DVP
    Mon Portfolio

    Qui connaît l'erreur, connaît la solution.

  7. #7
    Membre actif Avatar de pierre.E
    Homme Profil pro
    Développeur en systèmes embarqués
    Inscrit en
    janvier 2016
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur en systèmes embarqués
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2016
    Messages : 81
    Points : 209
    Points
    209

    Par défaut

    Citation Envoyé par Piraaate Voir le message
    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é

  8. #8
    Membre actif Avatar de pierre.E
    Homme Profil pro
    Développeur en systèmes embarqués
    Inscrit en
    janvier 2016
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur en systèmes embarqués
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2016
    Messages : 81
    Points : 209
    Points
    209

    Par défaut bon j ai travaille d'arrache pied



    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

  9. #9
    Membre actif Avatar de pierre.E
    Homme Profil pro
    Développeur en systèmes embarqués
    Inscrit en
    janvier 2016
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur en systèmes embarqués
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2016
    Messages : 81
    Points : 209
    Points
    209

    Par défaut

    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.

  10. #10
    Membre actif Avatar de pierre.E
    Homme Profil pro
    Développeur en systèmes embarqués
    Inscrit en
    janvier 2016
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur en systèmes embarqués
    Secteur : Industrie

    Informations forums :
    Inscription : janvier 2016
    Messages : 81
    Points : 209
    Points
    209

Discussions similaires

  1. Connexion Internet aléatoire via navigateur sous Vista
    Par Kirou dans le forum Windows Vista
    Réponses: 4
    Dernier message: 28/02/2010, 21h03
  2. Langage pour un jeu via navigateur?
    Par Balthek dans le forum Général Conception Web
    Réponses: 15
    Dernier message: 31/07/2009, 22h57
  3. Projet de MMORPG via navigateur
    Par Franzo dans le forum Projets
    Réponses: 5
    Dernier message: 25/07/2007, 15h06
  4. Réponses: 1
    Dernier message: 10/06/2007, 07h22
  5. Edition d'un fichier via navigateur
    Par belpif dans le forum Struts 1
    Réponses: 1
    Dernier message: 29/01/2007, 23h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo