simple animation for rigid body movement for the webgl generated html file

[asmwarrior]

Hi, just followed the discussion in sourceforge forum, see here:

Asymptote / Discussion / Help: Animation the asymptote 3D output: Is it possible to hack the gl.js to make some object move or rotate in the html output?

I did some test, and what I need to find a way to tweak the transformation of each Geometry class instances.

You can see the animation when I press the "Arrow up" and "Arrow down" key, so that the objects in the scene get shifted.

Here is the code/patch I used to modify the gs file, I'm not sure it is correct, so I hope the devs can help.

--- F:/code/asymptote/webgl/gl.js	Fri Mar 14 19:30:07 2025
+++ F:/code/asy-test/asygl.js	Sat Mar 15 19:47:39 2025
@@ -92,14 +92,16 @@
 
 let projViewMat=mat4.create(); // projection view matrix
 let normMat=mat3.create();
 let viewMat3=mat3.create(); // 3x3 view matrix
 let cjMatInv=mat4.create();
 let Temp=mat4.create();
 
+let gMotionMatrix = mat4.create(); // identity matrix
+
 let zmin,zmax;
 let center={x:0,y:0,z:0};
 let size2;
 let ArcballFactor;
 let shift={
   x:0,y:0
 };
@@ -450,14 +452,15 @@
                                     data.indicesBuffer,copy,
                                     gl.ELEMENT_ARRAY_BUFFER);
   data.rendered=true;
 
   gl.drawElements(normal ? (wireframe ? gl.LINES : data.type) : gl.POINTS,
                   indices.length,
                   indexExt ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT,0);
+  console.log("drawElements() function call: normal], wireframe], data.type], indices.length]", normal, wireframe, data.type, indices.length);
 }
 
 let TRIANGLES;
 
 class vertexBuffer {
   constructor(type) {
     this.type=type ? type : TRIANGLES;
@@ -579,14 +582,16 @@
 }
 
 class Geometry {
   constructor() {
     this.data=new vertexBuffer();
     this.Onscreen=false;
     this.m=[];
+      // Local transformation matrix (4x4) - initialized as identity matrix
+    this.localTransform = mat4.create();
   }
 
   // Is 2D bounding box formed by projecting 3d points in vector v offscreen?
   offscreen(v) {
     let m=projViewMat;
     let v0=v[0];
     let x=v0[0], y=v0[1], z=v0[2];
@@ -611,23 +616,35 @@
       this.Onscreen=false;
       return true;
     }
     return false;
   }
 
   T(v) {
-    let c0=this.c[0];
-    let c1=this.c[1];
-    let c2=this.c[2];
-    let x=v[0]-c0;
-    let y=v[1]-c1;
-    let z=v[2]-c2;
-    return [x*normMat[0]+y*normMat[3]+z*normMat[6]+c0,
-            x*normMat[1]+y*normMat[4]+z*normMat[7]+c1,
-            x*normMat[2]+y*normMat[5]+z*normMat[8]+c2];
+    let c0 = this.c[0];
+    let c1 = this.c[1];
+    let c2 = this.c[2];
+
+    // Translate vertex relative to the object center
+    let x = v[0] - c0;
+    let y = v[1] - c1;
+    let z = v[2] - c2;
+    let w = 1.0;  // Homogeneous coordinate
+
+    // Apply localTransform (4×4 matrix)
+    let lx = this.localTransform[0] * x + this.localTransform[4] * y + this.localTransform[8] * z  + this.localTransform[12] * w;
+    let ly = this.localTransform[1] * x + this.localTransform[5] * y + this.localTransform[9] * z  + this.localTransform[13] * w;
+    let lz = this.localTransform[2] * x + this.localTransform[6] * y + this.localTransform[10] * z + this.localTransform[14] * w;
+
+    // Apply normal transformation matrix
+    return [
+        lx * normMat[0] + ly * normMat[3] + lz * normMat[6] + c0,
+        lx * normMat[1] + ly * normMat[4] + lz * normMat[7] + c1,
+        lx * normMat[2] + ly * normMat[5] + lz * normMat[8] + c2
+    ];
   }
 
   Tcorners(m,M) {
     return [this.T(m),this.T([m[0],m[1],M[2]]),this.T([m[0],M[1],m[2]]),
             this.T([m[0],M[1],M[2]]),this.T([M[0],m[1],m[2]]),
             this.T([M[0],m[1],M[2]]),this.T([M[0],M[1],m[2]]),this.T(M)];
   }
@@ -663,18 +680,23 @@
     }
 
     let p=this.controlpoints;
     let P;
 
     if(this.CenterIndex == 0) {
       if(!remesh && this.Onscreen) { // Fully onscreen; no need to re-render
+        console.log("render(): calling this.append, remesh, this.Onscreen, but return early", remesh, this.Onscreen);
         this.append();
         return;
       }
-      P=p;
+      // modify every point's coordinates by local transform matrix
+      let n=p.length;
+      P=Array(n);
+      for(let i=0; i < n; ++i)
+        P[i]=this.localT(p[i]);
     } else { // Transform billboard labels
       let n=p.length;
       P=Array(n);
       for(let i=0; i < n; ++i)
         P[i]=this.T(p[i]);
     }
 
@@ -684,16 +706,34 @@
                    s*(viewParam.ymax-viewParam.ymin))/size2;
     this.res2=res*res;
     this.Epsilon=FillFactor*res;
 
     this.data.clear();
     this.notRendered();
     this.Onscreen=true;
+    console.log("render(): calling this.process(P), which copies data", P);
     this.process(P);
   }
+    // Function to modify local transformation matrix
+  setLocalTransform(matrix) {
+    this.localTransform = matrix;
+    // this.data.clear();  // Clear old data
+  }
+
+  localT(v) {
+    if (!this.localTransform) return v; // If no transformation, return original vertex
+
+    let x = v[0], y = v[1], z = v[2], w = 1.0;
+    // Apply the local transformation matrix (this.localTransform)
+    return [
+        this.localTransform[0] * x + this.localTransform[4] * y + this.localTransform[8] * z + this.localTransform[12] * w,
+        this.localTransform[1] * x + this.localTransform[5] * y + this.localTransform[9] * z + this.localTransform[13] * w,
+        this.localTransform[2] * x + this.localTransform[6] * y + this.localTransform[10] * z + this.localTransform[14] * w
+    ];
+  }
 }
 
 function boundPoints(p,m)
 {
   let b=p[0];
   let n=p.length;
   for(let i=1; i < n; ++i)
@@ -2830,14 +2870,16 @@
   if(W.embedded && zoomEnabled && event.keyCode == ESC) {
     disableZoom();
     return;
   }
 
   let keycode=event.key;
   let axis=[];
+  let translation = [0, 0, 0];  // Translation vector
+  let translMatrix = mat4.create();  // Create an empty 4x4 matrix
 
   switch(keycode) {
   case 'x':
     axis=[1,0,0];
     break;
   case 'y':
     axis=[0,1,0];
@@ -2868,14 +2910,34 @@
   case '_':
   case '<':
     shrink();
     break;
   case 'c':
     showCamera();
     break;
+  case 'ArrowUp':
+      translation = [0, 0, 5];
+      mat4.fromTranslation(translMatrix, translation);  // Fill translMatrix with the translation matrix
+      gMotionMatrix = translMatrix // Move up
+      console.log("up key arrow up, gMotionMatrix = ", gMotionMatrix);
+      remesh=true;
+      drawScene();
+      break;
+  case 'ArrowDown':
+      translation = [0, 0, -5];
+      mat4.fromTranslation(translMatrix, translation);  // Fill translMatrix with the translation matrix
+      gMotionMatrix = translMatrix // Move up
+      console.log("up key arrow down, gMotionMatrix = ", gMotionMatrix);
+      remesh=true;
+      drawScene();
+      break;
+  case 'ArrowLeft':
+      break;
+  case 'ArrowRight':
+      break;
   default:
     break;
   }
 
   if(axis.length > 0) {
     mat4.rotate(rotMat,rotMat,0.1,axis);
     updateViewMatrix();
@@ -3086,18 +3148,21 @@
     offscreen.width=W.canvasWidth;
     offscreen.height=W.canvasHeight;
     setViewport();
   }
 
   gl.clearColor(W.background[0],W.background[1],W.background[2],W.background[3]);
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+  console.log("loop on all geometry P list");
+  for (let i = 0; i < P.length; i++) {
+    P[i].setLocalTransform(gMotionMatrix);
+    P[i].render();
+  }
 
-  for(const p of P)
-    p.render();
-
+  console.log("drawBuffers()");
   drawBuffers();
 
   if(W.embedded) {
     context.clearRect(0,0,W.canvasWidth,W.canvasHeight);
     context.drawImage(offscreen,0,0);
   }
 

The main change here is:

In the class Geometry, I added a new field named this.localTransform

So, the constructor becomes like below:

class Geometry {
  constructor() {
    this.data=new vertexBuffer();
    this.Onscreen=false;
    this.m=[];
      // Local transformation matrix (4x4) - initialized as identity matrix
    this.localTransform = mat4.create();
  }

In the event handler for the keyboard, I try to modify a global matrix variable:

  case 'ArrowUp':
      translation = [0, 0, 5];
      mat4.fromTranslation(translMatrix, translation);  // Fill translMatrix with the translation matrix
      gMotionMatrix = translMatrix // Move up
      console.log("up key arrow up, gMotionMatrix = ", gMotionMatrix);
      remesh=true;
      drawScene();
      break;
  case 'ArrowDown':
      translation = [0, 0, -5];
      mat4.fromTranslation(translMatrix, translation);  // Fill translMatrix with the translation matrix
      gMotionMatrix = translMatrix // Move up
      console.log("up key arrow down, gMotionMatrix = ", gMotionMatrix);
      remesh=true;
      drawScene();
      break;
  case 'ArrowLeft':
      break;
  case 'ArrowRight':
      break;

And when drawScene() get called inside the keyboard event handler, I try to update every object's localTransform matrix

function drawScene()
{
  if(W.embedded) {
    offscreen.width=W.canvasWidth;
    offscreen.height=W.canvasHeight;
    setViewport();
  }

  gl.clearColor(W.background[0],W.background[1],W.background[2],W.background[3]);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  console.log("loop on all geometry P list");
  for (let i = 0; i < P.length; i++) {
    P[i].setLocalTransform(gMotionMatrix);
    P[i].render();
  }
...

Now, you can see: P[i].setLocalTransform(gMotionMatrix); will copy the global matrix to the P[i], and later, inside the render() function call, I just re-calculate the position, like below:

  render() {
    this.setMaterialIndex();

    // First check if re-rendering is required
    let v;
    if(this.CenterIndex == 0)
      v=corners(this.Min,this.Max);
    else {
      this.c=W.Centers[this.CenterIndex-1];
      v=this.Tcorners(this.Min,this.Max);
    }

    if(this.offscreen(v)) { // Fully offscreen
      this.data.clear();
      this.notRendered();
      return;
    }

    let p=this.controlpoints;
    let P;

    if(this.CenterIndex == 0) {
      if(!remesh && this.Onscreen) { // Fully onscreen; no need to re-render
        console.log("render(): calling this.append, remesh, this.Onscreen, but return early", remesh, this.Onscreen);
        this.append();
        return;
      }
      // modify every point's coordinates by local transform matrix
      let n=p.length;
      P=Array(n);
      for(let i=0; i < n; ++i)
        P[i]=this.localT(p[i]);
    } else { // Transform billboard labels
      let n=p.length;
      P=Array(n);
      for(let i=0; i < n; ++i)
        P[i]=this.T(p[i]);
    }
...

So, here is the test asymptote code:

import three; // Import 3D drawing module

size(300);
//currentprojection = perspective(10, 10, 10);
currentprojection=
  perspective(camera=(0.26829265777219125,16.279223021307676,6.398560022438133),
              up=(0.00008257171178993584,-0.0013914064579275548,0.003844414421333313),
              target=(0.5042383,-0.004253902,0.5000156),
              zoom=0.5846792890864372,
              angle=6.953767995927329,
              autoadjust=false);


// Define triangle vertices
triple A = (0, 0, 0);
triple B = (0, 0, 1);
triple C = (1, 0, 0);
triple D = (1, 0, 1);

// Draw two triangles
draw(A--B, red);
draw(C--D, blue);

The issue here is:

In the event handler, I try to move the objects up and down, but it looks like for some unknown reasons I don't know, the objects dose not shifted as expected on the Z axis, not sure why.

In the future, I need to find a way to choose which geometry instances should move/rotate when I press the mouse. For example, if I have a robot arm to move, I need to know which pieces of the patches/triangles belongs to which robot links. so that I can assign a single/same mat4 matrix for those components, so that I can move the robot arms.

What do you think about the idea? Thanks.

[asmwarrior]

OK, I solved one issue mentioned in the previous post:

diff --git a/asygl.js b/asygl.js
index 2450db9..42439e8 100644
--- a/asygl.js
+++ b/asygl.js
@@ -3375,6 +3375,10 @@ let Temp=mat4.create();
 
 let gMotionMatrix = mat4.create(); // identity matrix
 
+// Compute inverse of W.Transform using mat4.invert
+let gWInv = mat4.create();  // Create an empty matrix
+mat4.invert(gWInv, W.Transform); // Invert W.Transform into W_inv
+
 let zmin,zmax;
 let center={x:0,y:0,z:0};
 let size2;
@@ -4000,11 +4004,28 @@ class Geometry {
     if (!this.localTransform) return v; // If no transformation, return original vertex
 
     let x = v[0], y = v[1], z = v[2], w = 1.0;
-    // Apply the local transformation matrix (this.localTransform)
+
+    // Step 1: Convert v from current coordinates to user coordinates
+    let userV = [
+        W.Transform[0] * x + W.Transform[4] * y + W.Transform[8] * z +  W.Transform[12] * w,
+        W.Transform[1] * x + W.Transform[5] * y + W.Transform[9] * z +  W.Transform[13] * w,
+        W.Transform[2] * x + W.Transform[6] * y + W.Transform[10] * z + W.Transform[14] * w,
+        1.0
+    ];
+
+    // Step 2: Apply localTransform in user coordinates
+    let transformedUserV = [
+        this.localTransform[0] * userV[0] + this.localTransform[4] * userV[1] + this.localTransform[8] * userV[2] + this.localTransform[12] * userV[3],
+        this.localTransform[1] * userV[0] + this.localTransform[5] * userV[1] + this.localTransform[9] * userV[2] + this.localTransform[13] * userV[3],
+        this.localTransform[2] * userV[0] + this.localTransform[6] * userV[1] + this.localTransform[10] * userV[2] + this.localTransform[14] * userV[3],
+        1.0
+    ];
+
+    // Step 3: Convert back to current coordinates using gWInv
     return [
-        this.localTransform[0] * x + this.localTransform[4] * y + this.localTransform[8] * z + this.localTransform[12] * w,
-        this.localTransform[1] * x + this.localTransform[5] * y + this.localTransform[9] * z + this.localTransform[13] * w,
-        this.localTransform[2] * x + this.localTransform[6] * y + this.localTransform[10] * z + this.localTransform[14] * w
+        gWInv[0] * transformedUserV[0] + gWInv[4] * transformedUserV[1] + gWInv[8] * transformedUserV[2] + gWInv[12] * transformedUserV[3],
+        gWInv[1] * transformedUserV[0] + gWInv[5] * transformedUserV[1] + gWInv[9] * transformedUserV[2] + gWInv[13] * transformedUserV[3],
+        gWInv[2] * transformedUserV[0] + gWInv[6] * transformedUserV[1] + gWInv[10] * transformedUserV[2] + gWInv[14] * transformedUserV[3]
     ];
   }
 }
@@ -6192,7 +6213,7 @@ function handleKey(event)
     showCamera();
     break;
   case 'ArrowUp':
-      translation = [0, 0, 5];
+      translation = [0, 0, 0.1];
       mat4.fromTranslation(translMatrix, translation);  // Fill translMatrix with the translation matrix
       gMotionMatrix = translMatrix // Move up
       console.log("up key arrow up, gMotionMatrix = ", gMotionMatrix);
@@ -6200,7 +6221,7 @@ function handleKey(event)
       drawScene();
       break;
   case 'ArrowDown':
-      translation = [0, 0, -5];
+      translation = [0, 0, -0.1];
       mat4.fromTranslation(translMatrix, translation);  // Fill translMatrix with the translation matrix
       gMotionMatrix = translMatrix // Move up
       console.log("up key arrow down, gMotionMatrix = ", gMotionMatrix);
@@ -7113,6 +7134,8 @@ function webGLStart()
 
   initGL();
 
+  mat4.invert(gWInv, W.Transform); // Invert W.Transform into gWInv
+
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);
   gl.enable(gl.DEPTH_TEST);

It looks like there is a matrix which translate the coordinates from the current to the user space. So, I need to make an inverse matrix.

[asmwarrior]

Here is the updated animation gif file when I press the UP and DOWN key to move the whole objects up (0,0,0.1) and down (0,0,-0.1).

[asmwarrior]

I find a way to modify some object's local transform matrix.

Here is the modified html file:

<!DOCTYPE html>

<!-- Use the following line to embed this file within another web page:

<iframe src="test-cubic.html" width="301" height="286" frameborder="0"></iframe>

-->

<html lang="">

<head>
<title>test-cubic</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="user-scalable=no"/>
<style>
body {margin: 0;}
</style>

<script
src="asygl.js">
</script>

<script>

document.asy.canvasWidth=301;
document.asy.canvasHeight=286;

document.asy.webgl2=false;
document.asy.ibl=false;
document.asy.absolute=false;

document.asy.minBound=[-150.8603,-144.5197,-5405.144];
document.asy.maxBound=[153.348,143.5926,-4969.842];
document.asy.orthographic=false;
document.asy.angleOfView=0.07101764;
document.asy.initialZoom=0.5846793;
document.asy.viewportMargin=[0.5,0.5];

document.asy.zoomFactor=1.05;
document.asy.zoomPinchFactor=10;
document.asy.zoomPinchCap=100;
document.asy.zoomStep=0.1;
document.asy.shiftHoldDistance=20;
document.asy.shiftWaitTime=200;
document.asy.vibrateTime=25;

document.asy.background=[1,1,1,1];

document.asy.Transform=[-0.003337908,
6.741956e-05,
-4.548356e-05,
0.5042383,
-6.571972e-05,
-0.00113608,
0.003138988,
-0.004253902,
4.790688e-05,
0.003138952,
0.00113707,
0.5000156,
0,
-1.355253e-20,
2.710505e-20,
1];

light(
[0.4477358,0.4972609,0.7431448],
[1,1,1]);

console.log("begin first object");

document.asy.currentObjectName = "objA";

material(
[0,0,0,1],
[1,0,0,1],
[0,0,0,1],
1,
0,
0.04);

cylinder([148.8008,-144.2697,-5235.238],0.25,299.5,0,0,
[1.223292,1.555535],true);

sphere([148.8008,-144.2697,-5235.238],0.25,0,0,
[1.918301,-1.586057]);

sphere([153.0981,137.2951,-5133.242],0.25,0,0,
[1.223292,1.555535]);

console.log("begin second object");
document.asy.currentObjectName = "objB";

material(
[0,0,0,1],
[0,0,1,1],
[0,0,0,1],
1,
0,
0.04);

cylinder([-150.6104,-138.2221,-5239.317],0.25,299.5,0,1,
[1.223292,1.555535],true);

sphere([-150.6104,-138.2221,-5239.317],0.25,0,1,
[1.918301,-1.586057]);

sphere([-146.3131,143.3426,-5137.322],0.25,0,1,
[1.223292,1.555535]);

</script>
</head>

<body style="overflow: hidden;" onload="webGLStart();">
<canvas id="Asymptote" width="301" height="286" style="border: none; cursor: pointer;">
</canvas>
</body>

</html>

You see that I have special statement:

document.asy.currentObjectName = "objA";

In the code, and here is the modified js file(diff file)

diff --git a/asygl.js b/asygl.js
index 42439e8..33493c1 100644
--- a/asygl.js
+++ b/asygl.js
@@ -3315,7 +3315,9 @@ document.asy={
   // coordinates, with T[i][j] stored as element 4*i+j.
   Transform:[],
 
-  Centers:[] // Array of billboard centers
+  Centers:[], // Array of billboard centers
+
+  currentObjectName:"",
 }
 
 let W=document.asy;
@@ -3869,6 +3871,7 @@ class Geometry {
     this.m=[];
       // Local transformation matrix (4x4) - initialized as identity matrix
     this.localTransform = mat4.create();
+    this.objectName = W.currentObjectName;
   }
 
   // Is 2D bounding box formed by projecting 3d points in vector v offscreen?
@@ -6452,7 +6455,8 @@ function drawScene()
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   console.log("loop on all geometry P list");
   for (let i = 0; i < P.length; i++) {
-    P[i].setLocalTransform(gMotionMatrix);
+    if (P[i].objectName == "objA")
+        P[i].setLocalTransform(gMotionMatrix);
     P[i].render();
   }
 

You can see, I have added a new option named currentObjectName in the Geometry class. When the document.asy.currentObjectName = "objA" get called, the global object name is set to "objA", and all the Geometry instances were assigned with objA in their constructors.

So, the setLocalTransform function is called only on those objects which belongs to the "objA".

This is a simple way to manipulate the rigid body objects(such as move the robot arms), which depends on the assigned "object name". But I think for animation of those rigid bodies, the Asymptote language core should support a way to assign the "object name" for each "Geometry" instances. (Like the way I manually added those statements in html file, such as: document.asy.currentObjectName = "objA";)

When user need to "move" some of the objects, it should loop all the instances, and set the local transform matrix for the geometry instances which belong to the specified objects.

Also, we need to find a way in the js library to support updating the objects' transform matrix,

Is this method OK?

Here is the result of the animation gif file, which I only move one "object". see below:

[asmwarrior]

Another way to handle which geometry belong to which object is that in the generated js code, we can add a new argument/field:

sphere([148.8008,-144.2697,-5235.238],0.25,0,0,
[1.918301,-1.586057], "objA");

Which means the whole Geometry instances generated in this sphere function call belongs to the object named "objA".

In the Asymptote code, we can have such grammar:

// Define triangle vertices
triple A = (0, 0, 0);
triple B = (0, 0, 1);
triple C = (1, 0, 0);
triple D = (1, 0, 1);

// Draw two triangles
draw(A--B, red, objectTag = "objA");
draw(C--D, blue);

So, when the draw function get called, it see a new parameter objectTag = "objA", which means all the internal function calls generated in javascript will have this "objA" as a parameter.

[asmwarrior]

When I searched for the issue system, I see quite a similar issue here:

Add class names to drawing commands for svg shipout · Issue #402 · vectorgraphics/asymptote

It looks like the user files that issue need to give each text an id and a class name, so that he can tweak the text elements later in the generated svg file.

I think my request is similar, but user need to specify a self defined name if he want to manipulate that "object" later in the webgl 3D scene.

[asmwarrior]

asymptote/examples/Klein.asy

Lines 34 to 46 in c1868d4

	begingroup3("parametrization");
	draw(surface(xscale(-0.38)*yscale(-0.18)*lo,s,0,1.7,h,bottom=false),
	"[0,pi]");
	draw(surface(xscale(0.26)*yscale(0.1)*rotate(90)*hi,s,4.9,1.4,h,bottom=false),
	"[pi,2pi]");
	endgroup3();
	begingroup3("boundary");
	draw(s.uequals(0),blue+dashed);
	draw(s.uequals(pi),blue+dashed);
	endgroup3();
	add(new void(frame f, transform3 t, picture pic, projection P) {

When searching the existing code, I see there are similar functions like begingroup3() and endgroup3(), I'm not sure those kinds of functions pair can be reused in the webgl output to wrap an object. Maybe we can add some similar function pairs.

[asmwarrior]

Search for the related posts in sourceforge forum, I see a similar feature request here:

Asymptote / Discussion / Help: Programatically control parts of webgl scene using javascript

The idea is the same as mine, the object in the webgl 3D scene should have a "tag" name. So that the user has a way to modify/move/tweak those objects.

Thanks.

[asmwarrior]

Another question is that:

struct GLRenderArgs
{
  string prefix;
  camp::picture* pic;
  string format;
  double width;
  double height;
  double angle;
  double zoom;
  camp::triple m;
  camp::triple M;
  camp::pair shift;
  camp::pair margin;
  double *t;
  double *tup;
  double *background;
  size_t nlights;
  camp::triple *lights;
  double *diffuse;
  double *specular;
  bool view;
};

void glrender(GLRenderArgs const& args, int oldpid=0);

extern const double *dprojView;
extern const double *dView;

extern double BBT[9];
extern double T[16];

extern bool format3dWait;

What dose the T[16] mean, and I see it is from the GLRenderArgs::t, and finally it becomes below:

document.asy.Transform=[-0.009288465,
-0.02076234,
0.02232449,
-1.077101,
0.0304176,
-0.004737369,
0.008249862,
2.663592,
-0.002056038,
0.02371109,
0.02119647,
0.6829498,
0,
0,
0,
1];

in the generated html file.

I though it is a homogeneous transform 4*4 matrix, but my guess maybe wrong. Any ideas? I can't see any comments about those variables. But I only know this matrix is a translation from the 3D space to user space, my guess is that it contains some scale values?

Thanks.

[johncbowman]

The documentation for Transform and the other WebGL attributes is here:

document.asy={
  canvasWidth:0,
  canvasHeight:0,
  absolute:false, // true: absolute size; false: scale to canvas

  minBound:[0,0,0], // Component-wise minimum bounding box corner
  maxBound:[0,0,0], // Component-wise maximum bounding box corner

  orthographic:false, // true: orthographic; false: perspective
  angleOfView:0,      // Field of view angle
  initialZoom:0,      // Initial zoom

  viewportShift:[0,0],  // Viewport shift (for perspective projection)
  viewportMargin:[0,0], // Margin around viewport

  background:[], // Background color

  zoomFactor:0,      // Zoom base factor
  zoomPinchFactor:0, // Zoom pinch factor
  zoomPinchCap:0,    // Zoom pinch limit
  zoomStep:0,       // Zoom power step

  shiftHoldDistance:0, // Shift-mode maximum hold distance (pixels)
  shiftWaitTime:0,     // Shift-mode hold time (milliseconds)
  vibrateTime:0,       // Shift-mode vibrate time (milliseconds)

  ibl:false,
  webgl2:false,

  imageURL:"",
  image:"",

  // Transformation matrix T[4][4] that maps back to user
  // coordinates, with T[i][j] stored as element 4*i+j.
  Transform:[],

  Centers:[] // Array of billboard centers
}

[asmwarrior]

Hi, John, thanks for the reply. I see this code and the comments around the Transform variable.

For this result:

document.asy.Transform=[-0.009288465,
-0.02076234,
0.02232449,
-1.077101,
0.0304176,
-0.004737369,
0.008249862,
2.663592,
-0.002056038,
0.02371109,
0.02119647,
0.6829498,
0,
0,
0,
1];

It makes a 4*4 matrix like below:

-0.009288465,      -0.02076234,     0.02232449,    -1.077101,
0.0304176,         -0.004737369,    0.008249862,    2.663592,
-0.002056038,      0.02371109,      0.02119647,     0.6829498,
0,                 0,               0,              1

Is that mean, this 3*3 matrix is the rotation matrix?

-0.009288465,      -0.02076234,     0.02232449, 
0.0304176,         -0.004737369,    0.008249862,
-0.002056038,      0.02371109,      0.02119647, 

and this 3*1 vector is the origin shift vector?

-1.077101,
 2.663592,
 0.6829498,

I'm not sure my above guess is correct, because that the rotation matrix has some scale values?

I mean the total 4*4 matrix looks like the one mentioned in this web page Spatial Transformation Matrices ?

Thanks.

[johncbowman]

The 4x4 matrix is the usual transformation matrix used in 3D graphics for projective geometry (homogenous coordinates).

[asmwarrior]

Hi, guys, I see I can translate the object by "pure translation", but I don't know why the "pure rotation" does not work.

Here is the code:

  case 'ArrowUp':
    // Define a translation vector (moving along the Z-axis)
    // translationVector = [0, 0, 0.5];
    // mat4.fromTranslation(translMatrix, translationVector); // Create a translation matrix from the translation vector
    mat4.fromXRotation(translMatrix, 0.1);                    // Rotate around an axis
    
    mat4.copy(gMotionMatrix, gInvTu2w); // we need a deep copy, so no assignment operator
    mat4.multiply(gMotionMatrix, gMotionMatrix, translMatrix);
    mat4.multiply(gMotionMatrix, gMotionMatrix, gTu2w);

    console.log("Up key arrow pressed, gMotionMatrix = ", gMotionMatrix);
    remesh=true;
    drawScene();
    break;

If I use the commented code:

    Define a translation vector (moving along the Z-axis)
    translationVector = [0, 0, 0.5];
    mat4.fromTranslation(translMatrix, translationVector); // Create a translation matrix from the translation vector
    // mat4.fromXRotation(translMatrix, 0.1);                    // Rotate around an axis

Then, I can "move" the object along the Z axis by "0.5" in the user space correctly.

But if I use the "rotation" matrix instead of the "pure translation", I see the "rotated objects" does not rotate around the X axis, instead the object moves to a large distance, sometimes out the the scene. Note I only rotate by 0.1 rad, which is very small angle rotation.

    // Define a translation vector (moving along the Z-axis)
    // translationVector = [0, 0, 0.5];
    // mat4.fromTranslation(translMatrix, translationVector); // Create a translation matrix from the translation vector
    mat4.fromXRotation(translMatrix, 0.1);                    // Rotate around an axis

I see that the object is not rotated around the X axis in the world coordinates.

My algorithm is simple:

$$ {}^W P_{new} = {}^W T_U \times T_{Local} \times {}^U T_W \times {}^W P_{old} $$

The $T_{Local}$ is defined as translMatrix variable. The gTu2w is the ${}^U T_W$ which is constructed from the W.Transform variable defined in the html file. The gInvTu2w is the inverse of the ${}^U T_W$, which is ${}^W T_U$.

The position is modified in the function, the input v is the ${}^W P_{old}$ and the function returned a ${}^W P_{new}$. The member variable localTransform is the matrix defined as ${}^W T_U \times T_{Local} \times {}^U T_W$ which I stored in each geometry instance I want to move.

    localT(v) {
        if (!this.localTransform) return v; // No transformation, return original vertex

        let x = v[0], y = v[1], z = v[2], w = 1.0;

        return [
            this.localTransform[0] * x + this.localTransform[4] * y + this.localTransform[8] * z +  this.localTransform[12] * w,
            this.localTransform[1] * x + this.localTransform[5] * y + this.localTransform[9] * z +  this.localTransform[13] * w,
            this.localTransform[2] * x + this.localTransform[6] * y + this.localTransform[10] * z + this.localTransform[14] * w
        ];
    }

In the render update function, I have such code:

  render() {
    this.setMaterialIndex();

    // First check if re-rendering is required
    let v;
    if(this.CenterIndex == 0)
      v=corners(this.Min,this.Max);
    else {
      this.c=W.Centers[this.CenterIndex-1];
      v=this.Tcorners(this.Min,this.Max);
    }

    if(this.offscreen(v)) { // Fully offscreen
      this.data.clear();
      this.notRendered();
      return;
    }

    let p=this.controlpoints;
    let P;

    if(this.CenterIndex == 0) {
      if(!remesh && this.Onscreen) { // Fully onscreen; no need to re-render
        console.log("render(): calling this.append, remesh, this.Onscreen, but return early", remesh, this.Onscreen);
        this.append();
        return;
      }
      // modify every point's coordinates by local transform matrix
      let n=p.length;
      P=Array(n);
      for(let i=0; i < n; ++i)
        P[i]=this.localT(p[i]);
    } else { // Transform billboard labels
      let n=p.length;
      P=Array(n);
      for(let i=0; i < n; ++i)
        P[i]=this.T(p[i]);
    }

You see the core code snippet to modify the position is the function call: P[i]=this.localT(p[i]);.

Any ideas? Thanks.

[asmwarrior]

The core issue here:

$$ {}^W P_{new} = {}^W T_U \times T_{Local} \times {}^U T_W \times {}^W P_{old} $$

For the above formula, if the $T_{Local}$ is a pure translation matrix defined as:

    translationVector = [0, 0, 0.5];
    mat4.fromTranslation(translMatrix, translationVector); // Create a translation matrix from the translation vector

I see the ${}^W T_U \times T_{Local} \times {}^U T_W$ is correct.

But if the $T_{Local}$ is a pure rotation matrix defined as:

    mat4.fromXRotation(translMatrix, 0.1);                    // Rotate around an axis

Then the result of ${}^W T_U \times T_{Local} \times {}^U T_W$ is NOT correct.

I'm not sure why.

For a general transformation matrix, it could has "scale", "rotation" and "translation" components, such as:

M = T⋅R⋅S

Which is something defined as: What is the correct order to multiply scale, rotation and translation matrices for a proper world matrix? - Game Development Stack Exchange

Am I correct?

[asmwarrior]

https://github.com/vectorgraphics/asymptote/blob/109d4e3ff02b8571d34a651f7aa1ec095183bb81/base/three.asy#L2892C1-L2912C4

I just try to understand the code how the W.Transform is constructed, in the above code.

transform3 s=inv*shift(0,0,zcenter);

    shipout3(prefix,f,preview ? nativeformat() : format,
             S.width-defaultrender.margin,S.height-defaultrender.margin,
             P.infinity ? 0 : 2aTan(Tan(0.5*P.angle)*P.zoom),
             P.zoom,m,M,P.viewportshift,S.viewportmargin,
             tinv*s,s,Light.background(),Light.position,
             Light.diffuse,Light.specular,
             view && !preview);

Is this the code?

tinv*s

Is the W.Transform?

transform3 s=inv*shift(0,0,zcenter); I'm not sure, what does this mean? Is this the scale matrix?

While, the transform3 tinv=inverse(S.t);, the tinv is the transform matrix from the global coordinates to user coordinates without scaling?

Thanks.

[asmwarrior]

It looks like the "s" is a camera shift for alignment the final output.

This means document.asy.Transform is not a simple world coordinates to user coordinate transform?

So, I mean I have NO way to simply move the rigid body by the javascript code by tweak the positions, any idea to remove the s component in the output "document.asy.Transform"? Or maybe we can add other fields for support this feature?

Thanks.