Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#1 Le 15/01/2017, à 00:13

Atomistique

Télécharger une application WebGL sur mon PC, est-ce possible ?

Bonjour,

Je suis à la fac' et ma BU propose des services numériques dont une application WebGL extrêmement utile. Le problème c'est qu'elle fait 130 Mo et que c'est donc très long à charger (sans parler de quand ça crash et que je dois relancer le chargement), j'aimerais savoir s'il existait un moyen d'en récupérer les fichiers pour pouvoir la lancer directement depuis mon PC et donc m'en servir quand je n'ai pas accès à internet.

Merci à vous smile

Hors ligne

#2 Le 15/01/2017, à 01:25

J5012

Re : Télécharger une application WebGL sur mon PC, est-ce possible ?

edite le code de la page qui charge l'application webgl ...

la balise canvas positionne l'application
des script js initialisent opengl
du code non js et opengl dans des balises scripts

Hors ligne

#3 Le 17/01/2017, à 00:58

Atomistique

Re : Télécharger une application WebGL sur mon PC, est-ce possible ?

Merci pour ta réponse mais j'ai pas compris grand chose big_smile

Éditer le code de la page ça je sais faire mais les balises et les script même si je les vois dans le code source je ne sais pas quoi en faire.

Si jamais ça peut aider je mets ici le code source de ladite page.

<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Human Anatomy Atlas 2015</title>
    <link rel="stylesheet" href="TemplateData/style.css">
        <link rel="shortcut icon" href="TemplateData/favicon.ico" />
    <style>
        /* a style sheet needs to be present for cursor hiding and custom cursors to work. */
        * {
            margin: 0;
            padding: 0;
        }
    html,
    body {
        width: 100%;
        height: 100%;
    }
    #wrapper {
        width: 100%;
        height:100%;
        margin:0;
        padding:0;
        border:0;
    }
    canvas {
        position:absolute;
        height: 100%;
        width: 100%;
        top:0px;
        left:0px;
        margin-bottom:0;
        
        display: block;
    }
    .template-wrap canvas{
        margin-bottom:0;
    }
    </style>
    <link rel="stylesheet" href="TemplateData/style.css">
    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
    <script src="TemplateData/UnityProgress_spinner.js"></script>
    
    

			<script type="text/javascript" src="../../scripts/jquery.min_1.4.2.js"></script>
			<script type="text/javascript">
					var timeout = 120000;
					var hb_url = "http://ovidsp.tx.ovid.com/sp-3.23.1b/ovidweb.cgi?T=JS&PAGE=checksession&S=BDFGFPDKPNDDCIGONCHKGEDCBKENAA00";
					var return_url = "http://ovidsp.tx.ovid.com/sp-3.23.1b/ovidweb.cgi?T=JS&PAGE=dblist&S=BDFGFPDKPNDDCIGONCHKGEDCBKENAA00";
					var intervalID = setInterval(checkHeartbeat, timeout);
							
					function checkHeartbeat(){
						$.get("../../proxy.php?osptok=862ac8603eb6f4371780e2ca56811a785a5377755c183cdc2eada63f0ce32bb8c4027e73e233cec4ccee8671ea4d781e6430bcabf862609ec1c14e44b28866814759a7c0877a78e1b955046a6ae7bc1985e2820df7b1fd814001c1ab425c03c6003e865c17364233ef11e7af70615f399c5cb7e1a00d99ddd99a6275cb5ccd6da2fbcfc1a7613b746833f3860228556251fe44b365758e8951fc1cb868bdceb724bf9865573660d8f1adeb997b31d0fba310670f37d5268b8b1acd1487b2fecfe1f2428739a29b28bf90180cf02c43880108194fbbc9c1e5fb5f15f76012ecaf526b9caa79761adc", function(data){
																						console.log(data.trim());
																						if(data.trim() != "OK"){
																							console.log("Goodbye!");
																							clearInterval(intervalID);
																							setTimeout(function(){window.location = return_url;}, 5000);
																							window.close();
																						}
																					});
					}
			</script>    

    
  </head>  
  
  <body class="template">
  
  
  
      <div class="template-wrap clear" id="wrapper">
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="768px" width="1024px"></canvas>
    </div>

<img id="spinner" src="TemplateData/logo.gif" style="display:block; position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px;"/>

    <script type='text/javascript'>
  // connect to canvas
  var Module = {
    filePackagePrefixURL: "Release/",
    memoryInitializerPrefixURL: "Release/",
    preRun: [],
    postRun: [],
    print: (function() {
      return function(text) {
        console.log (text);
      };
    })(),
    printErr: function(text) {
      console.error (text);
    },
    canvas: document.getElementById('canvas'),
    progress: null,
    setStatus: function(text) {
      if (this.progress == null) 
      {
        if (typeof UnityProgress != 'function')
          return;
        this.progress = new UnityProgress (canvas);
      }
      if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
      if (text === Module.setStatus.text) return;
      this.progress.SetMessage (text);
      var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
      if (m)
        this.progress.SetProgress (parseInt(m[2])/parseInt(m[4]));
      if (text === "") 
        this.progress.Clear()
    },
    totalDependencies: 0,
    monitorRunDependencies: function(left) {
      this.totalDependencies = Math.max(this.totalDependencies, left);
      Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
    }
  };
  Module.setStatus('Downloading (0.0/1)');
</script>
<script src="Release/UnityConfig.js"></script>
<script src="Release/fileloader.js"></script>
<script>if (!(!Math.fround)) {
  var script = document.createElement('script');
  script.src = "Release/webgl.js";
  document.body.appendChild(script);
} else {
  var codeXHR = new XMLHttpRequest();
  codeXHR.open('GET', 'Release/webgl.js', true);
  codeXHR.onload = function() {
    var code = codeXHR.responseText;
    if (!Math.fround) { 
try {
  console.log('optimizing out Math.fround calls');
  var m = /var ([^=]+)=global\.Math\.fround;/.exec(code);
  var minified = m[1];
  if (!minified) throw 'fail';
  var startAsm = code.indexOf('// EMSCRIPTEN_START_FUNCS');
  var endAsm = code.indexOf('// EMSCRIPTEN_END_FUNCS');
  var asm = code.substring(startAsm, endAsm);
  do {
    var moar = false; // we need to re-do, as x(x( will not be fixed
    asm = asm.replace(new RegExp('[^a-zA-Z0-9\\$\\_]' + minified + '\\(', 'g'), function(s) { moar = true; return s[0] + '(' });
  } while (moar);
  code = code.substring(0, startAsm) + asm + code.substring(endAsm);
  code = code.replace("'use asm'", "'almost asm'");
} catch(e) { console.log('failed to optimize out Math.fround calls ' + e) }
 }

    var blob = new Blob([ code], { type: 'text/javascript' });
    codeXHR = null;
    var src = URL.createObjectURL(blob);
    var script = document.createElement('script');
    script.src = URL.createObjectURL(blob);
    script.onload = function() {
      URL.revokeObjectURL(script.src);
    };
    document.body.appendChild(script);
  };
  codeXHR.send(null);
}
</script>

		<!-- GOOGLE ANALYTICS -->
		<script type="text/javascript">
			var session_info = "BDFGFPDKPNDDCIGONCHKGEDCBKENAA00,paris12,1034201," + document.title;
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-692542-24']);
			_gaq.push(['_setDomainName', '.visiblebody.com']);
			_gaq.push(['_setAllowHash', false]);
			_gaq.push(['_setAllowLinker', true]);
			
			_gaq.push(['_setCustomVar',
							4,						// This custom var is set to slot #1.  Required parameter.
							'Ovid Info',			// The name acts as a kind of category for the user activity.  Required parameter.
							session_info,			// This value of the custom variable.  Required parameter.
							3                   	// Sets the scope to page-level.  Optional parameter.
						]);
			
			_gaq.push(['_trackPageview']);
			   
			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
		
		<!-- END GOOGLE ANALYTICS -->


  </body>
</html>

Hors ligne

#4 Le 17/01/2017, à 23:03

J5012

Re : Télécharger une application WebGL sur mon PC, est-ce possible ?

tu as plusieurs canvas :
- la definition pour le style css

    canvas {
        position:absolute;
        height: 100%;
        width: 100%;
        top:0px;
        left:0px;
        margin-bottom:0;
        
        display: block;
    }

- la definition principale pour positionner l'application webgl : un affichage 1024x768

      <div class="template-wrap clear" id="wrapper">
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="768px" width="1024px"></canvas>
    </div>

- l'initialisation canvas dans une fonction print

  // connect to canvas
  var Module = {
    filePackagePrefixURL: "Release/",
    memoryInitializerPrefixURL: "Release/",
    preRun: [],
    postRun: [],
    print: (function() {
      return function(text) {
        console.log (text);
      };
    })(),
    printErr: function(text) {
      console.error (text);
    },
    canvas: document.getElementById('canvas'),
...

l'application webgl se nomme webgl.js , ses scripts de configuration : unityconfig.js et fileloader.js

<script src="Release/UnityConfig.js"></script>
<script src="Release/fileloader.js"></script>
<script>if (!(!Math.fround)) {
  var script = document.createElement('script');
  script.src = "Release/webgl.js";
  document.body.appendChild(script);
...

mais et il s'agit d'un tres gros "mais" : l'application webgl semble utiliser le moteur de rendu graphique"unity3d" ...

...
        if (typeof UnityProgress != 'function')
          return;
        this.progress = new UnityProgress (canvas);
      }
      if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
      if (text === Module.setStatus.text) return;
      this.progress.SetMessage (text);
      var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
      if (m)
        this.progress.SetProgress (parseInt(m[2])/parseInt(m[4]));
      if (text === "") 
        this.progress.Clear()
...

si tu veux recuperer les scripts de l'application, l'url est composé de :
adresse-http-complete-page-application/Release/UnityConfig.js
adresse-http-complete-page-application/Release/fileloader.js
adresse-http-complete-page-application/Release/webgl.js

https://unity3d.com/
https://docs.unity3d.com/Manual/webgl-g … arted.html
https://docs.unity3d.com/Manual/webgl-building.html

Hors ligne