[Chimera-users] WebGL viewer

[Tom Goddard]

Hi Thomas,

  That’s cool.  When you change the density threshold slider it switches to showing a new surface model for that threshold.  For that new surface to have the same orientation as the previously shown surface you have to add a little code that sets the positioning matrix of the new surface to be the same as the matrix for the previous surface.  Here’s how I did it.  Here’s the original code that  handles the slider motion

  $("#slider").change(function(){
    var i = $('#slider')[0].value;
    myscene.models = new Array();
    myscene.add(mymodels[i]);
    myscene.defineBuffers(mymodels[i]);
    myscene.render();
    setThreshold(requiredJsonFiles[i]);
  });

and here is the revised code that preserves the orientation

  var last_model = null;

  $("#slider").change(function(){
    var i = $('#slider')[0].value;
    myscene.models = new Array();
    if (last_model != null)
       mymodels[i].matrix = mymodels[last_model].matrix
    last_model = i;
    myscene.add(mymodels[i]);
    myscene.defineBuffers(mymodels[i]);
    myscene.render();
    setThreshold(requiredJsonFiles[i]);
  });

I added a new variable “last_model” that keeps track of the index for the previously shown surface and a copy the position matrix from that surface to the new one.  I tried it and it works.

  I’m impressed you were able to modify the Chimera exported webgl html file to do this.  I have been working on an html and webgl map viewer for density map time series (for 5d optical microscopy) .  It shows the maps, has a slider to display different times, and lets you place colored markers on features and save those to the server.  Here’s a screenshot of it.  I’d be happy to let you try it but the data I’m using is unpublished cell motion data from another researcher.  If you want I could make a fake time series where time corresponds to different density thresholds and let you try that.  I can provide you the webgl code if you want to tinker with it.

  Sorry for the delay replying to your email. I just returned from vacation.

	Tom






> On Dec 27, 2014, at 11:29 AM, Thomas Hrabe <thrabe at sanfordburnham.org> wrote:
> 
> Hi everyone,
> 
> I am trying to implement a EM density viewer in a HTML page based on the chimera webgl & html export feature.
> The original page chimera exports when you save a webgl / html scene has been modified to load multiple JSON objects with densities as they come from chimera.
> The bar at the bottom of the page essentially performs a coarse density sliding similar to chimera. 
> Almost all works great but what I am missing is how to connect the rotation that was applied to one model and to propagate it to all other models.
> What is happening now is that when one rotates one model and slides the bar, the next model will not be rotated but will be in it’s original position.
> 
> Here’s my page I am currently working on
> http://localize.pytom.org/php/displayWebGL.php?jobID=tutorial <http://localize.pytom.org/php/displayWebGL.php?jobID=tutorial>
> 
> I tried catching the mouse event with a loop, but it seems it fails to propagate the rotation to the other models.
> Check the block at line 916 in the code
> 
>   try {
>     var rotMat = vsphere(mouse_position, new_position);
>     var camera = this.camera;
>     var matrix = new Mat4;
>     matrix.$translate(camera.target[0], camera.target[1],
>       camera.target[2]);
>     matrix.$mulMat4(rotMat);
>     matrix.$translate(-camera.target[0], -camera.target[1],
>       -camera.target[2]);
>     for (var i = 0, models = this.scene.models, l = models.length; i < l; ++i) {
>       var elem = models[i];
>       elem.matrix = matrix.mulMat4(elem.matrix);
>     }
>   }
> 
> Thank you in advance for your help,
> Thomas
> 
> 
> _______________________________________________
> Chimera-users mailing list
> Chimera-users at cgl.ucsf.edu
> http://plato.cgl.ucsf.edu/mailman/listinfo/chimera-users

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://plato.cgl.ucsf.edu/pipermail/chimera-users/attachments/20150105/2b89f4dd/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: webmap.png
Type: image/png
Size: 517149 bytes
Desc: not available
URL: <http://plato.cgl.ucsf.edu/pipermail/chimera-users/attachments/20150105/2b89f4dd/attachment.png>