support for Chrome

10 replies [Last post]

Thu, 15/08/2024 - 07:42

aplesch

Offline

Joined: 05/10/2015

Hi Andy,

it is great to see that you are keeping your VRMATH Logo editor site functional. Since it was mentioned by a user in the x3dom-user group, I took the opportunity to take a look. It works fine in Firefox but newer Chrome does not support certain DOM modification functions anymore which x3dom 1.7 still uses.

I collected a few small fixes which make VRMATH work with x3dom 1.8.3 which will work well in Chrome:

https://gist.github.com/andreasplesch/7a7f954c6b6d300bde6dacc1ff6b4cb6

One is small update to the x3d css to fit it properly and one is is make convex=true the default which essentially replicates the old behaviour. convex=false has an intricate bug in x3dom exposed by the dynamic DOM updates of VRMATH but works well in exported finished scenes. convex=true will still work for many concave geometries in the editor.

Perhaps you can consider these fixes, all the best, Andreas

Fri, 16/08/2024 - 01:12

Andy

Offline

Joined: 02/10/2010

Applied

Hi Andreas,

Thank you for the fixes. I have applied the css and convex=true and V1.8.3 seems to run in Chrome now. However, glitches can be expected for this sudden upgrade, like the one you found in the gears.

I have not updated any codes since about 2020.. Glad to know if anyone is using VRMath2.

Best,

Andy

Fri, 16/08/2024 - 04:50

aplesch

Offline

Joined: 05/10/2015

Mutations

I drlled down and found that heading relies on x3dom and the rotation attribute of the turtle trafo.

With the new Mutation handling something gets out of sync between x3dom, logo and drawing and I could not figure out how to fix that. This is also affects Firefox.

The only solution I found is to switch off MutationObserver support in x3dom-full.js:

x3dom.userAgentFeature = {

supportsDOMAttrModified: !1,

supportsMutationObserver: !1

}

x3dom still will work by intercepting .setAttribute and .getAttribute calls.

That seemed to work well since it is more synchronous.

That would be also possible with x3dom 1.7 but x3dom 1.8.3 has a lot of other fixes as well.

Cheers, Andreas

Fri, 16/08/2024 - 06:44

aplesch

Offline

Joined: 05/10/2015

potentially better fix for heading

In vrm2.js

function pSETHEADING(ori) {

setRotation(ori);

_rp._x3domNode.updateField("rotation", ori); //force immediate update

var m = _x3d.runtime.getCurrentTransform(_rp);

_rotmat.values = [[m._00, m._01, m._02], [m._10, m._11, m._12], [m._20, m._21, m._22]];

updateProp()

The problem is that after setRotation the expectation is that currentTransform gets immediately updated. However, this has to go through the DOM to be observed and the update is triggered a little bit later. So the old currentTransform is returned.

With the fix the update is forced immediately and x3dom-full.js does not have to be modified as shown earlier, eg. supportsMutationObserver can say true.

I think this is perhaps the only place where there is such a close link between x3dom and logo. As such I think this may be a better fix.

Cheers, Andreas

Sat, 17/08/2024 - 00:56

Andy

Offline

Joined: 02/10/2010

Fixed

Amazing! just one line to fix updating heading. The involute gear codes now run well.

My coding in vrm2.js is very chaotic honestly, at times I could not recall how I did years ago.

Thank you so much for resolving this dom update issue. Potentailly there are similar issues in other parts of vrm2 I think.

Cheers,

Andy :-)

Fri, 16/08/2024 - 10:14

Andy

Offline

Joined: 02/10/2010

Will try later

I have a lot to catch up with current x3dom and will try later today after work. I did some tests on some existing logo files, mostly works but the sun-earth one caused some issue:

; Sun and Earth
; By Andy (2018)
CS RESET CT
SETBG 46  ; set background to Universe 1
HEADLIGHTOFF ; turn off headlight
; set scale ratio
MAKE "r 1/12756  ; earth's diameter is 12756 km 
; for time, let's experiment and start with 1 second for 1 hour
; Sun at the centre of solar system
MAKE "sundiameter 695700*2
MAKE "scale :sundiameter*:r
SETSCALE :scale :scale :scale
SETMAT 4 8
BALL
MAKE "sun OBJECT
SELECT :sun
SETITURL "/sites/default/files/webfm/public/media/texture/solar/1k/sunmap.jpg
DESELECT
SPIN :sun "lt 24*24
SHOWOBJECT :sun
(VIEWPOINT {POSITION: 0 0 294.0085, ORIENTATION: 0 0 0 0, centerofrotation: 0 0 0})
; pointlight as sun light
(POINTLIGHT {radius:1000000000000})
; Earth
SETMAT 0 35
MAKE "dist 149600000*:r/30  ;
WEST :dist
SETSCALE 1 1 1
BALL
MAKE "earth OBJECT
SELECT :earth
SETITURL "/sites/default/files/webfm/public/media/texture/solar/1k/earthmap1k.jpg
DESELECT
SPIN :earth "lt 24
SHOWOBJECT :earth
(VIEWPOINT [POSITION: -11728.2434 0.3285 2.0197, ORIENTATION: -0.6021 -0.7969 -0.0488 0.2617, centerofrotation: -11727.8144 0 0])
; Earth revolution
HOME
MAKE "coordinates []
LEFT 90
 
REPEAT 360 [
  FD :dist
  QUEUE "coordinates POS
  BK :dist
  LEFT 1
]
FD :dist QUEUE "coordinates POS
; create orbit
SETPCNAME "white
PD
REPEAT 361 [
  SETPOS ITEM REPCOUNT :coordinates
]
PU
 
TRAVEL :earth :coordinates 365.25 * 24
 
SHOWOBJECT :earth

it reported:

VIEWPOINT: has incorrect attribute: centerofrotation
POINTLIGHT: has incorrect attribute: radius

Perhaps this is also the same issue and need to force immediate update.

Andy

Fri, 16/08/2024 - 13:38

aplesch

Offline

Joined: 05/10/2015

similar

Yes, this is a similar issue. The attributes for fields are only created by x3dom after the dom node is parsed when the mutation is observed by the browser. That happens a little after parsePara is called, so it does not see it. Ideally, parsePara should not rely on x3dom to check for valid attributes, for example by setting all valid attributes when the element is first created.

But it seems to work pretty well to wait a little and then check:

function parsePara(name, obj, para) {

for (var i = 0; i < para.length; i++) {

var colon = para[i].indexOf(":");

if (colon == -1) {

appendMsg('' + name.toUpperCase() + ": has incorrect parameter!", 1);

return

}

var value = para[i].substr(colon + 1).trim();

if (value == "") {

appendMsg('' + name.toUpperCase() + ": has incorrect value: " + value, 1);

return

}

var attr = para[i].substring(0, colon).trim();

if (obj._x3domNode && obj.hasAttribute(attr)) { //attached _x3domNode means that x3dom has parsed

obj.setAttribute(attr, value);

return

}

//wait a little and try again

setTimeout( function() {

if (obj._x3domNode && obj.hasAttribute(attr)) {

obj.setAttribute(attr, value);

}

else {

appendMsg('' + name.toUpperCase() + ": has incorrect attribute: " + attr, 1);

//perhaps setAttribute anyways, should not hurt

}

}, 100 ) // could be longer

}

This is not very elegant but forcing the update in addChild() for example is also not too elegant.

Sat, 17/08/2024 - 00:58

Andy

Offline

Joined: 02/10/2010

Applied and fixed

This one is also applied and fixed in the vrm2ui.min.js. Big thanks.

Andy :-)

Sat, 17/08/2024 - 12:50

aplesch

Offline

Joined: 05/10/2015

Testing

Good to see Chrome now working pretty well. Please let me know if you come across something during testing or if you want me to try something.

Fri, 16/08/2024 - 01:03

aplesch

Offline

Joined: 05/10/2015

Logo interpreter

The Logo interpreter in Chrome (I believe through wasm) somehow behaves differently than the same interpreter in Firefox:

Chrome:

Firefox:

I believe the Firefox behavior is correct.

I could not quite isolate the issue but probably related to geartooth function below:

; involute: draw involute
 
; rb: base radius
 
; limit: max. generating angle
 
; steps: number of segments on involute to draw
 
 
TO involute :rb :limit :steps
 
 
  LOCALMAKE "start POS
 
  LOCAL "end
 
  LOCALMAKE "i 0
 
  LOCALMAKE "step 0.5 * :limit / :steps
 
  ;(print :step :steps)
 
  LOCALMAKE "coords [] 
 
  PU
 
 
  REPEAT ABS(:steps)
 
  [
 
  <span style="white-space:pre"> </span>;record position
 
    PUSH "coords :start
 
    MAKE "i :i + :step
 
    ;move along circle
 
    LT :step
 
    FD 2 * :rb * SIN :step
 
    ;find tangent
 
    RT 180 - :step
 
    ;unroll string
 
    FD 2 * :i * :deg2rad * :rb 
 
    MAKE "end POS
 
    ;connect end points
 
    PD
 
    SETPOS :start
 
    ;move back
 
    PU
 
    SETPOS :end
 
    MAKE "start :end
 
    BACK 2 * :i * :deg2rad * :rb
 
    ;turn forward
 
    LT 180
 
    ;nextcolor
 
  ]
 
  SETPOS :start
 
  OUTPUT THING "coords
 
 
 
END
 
 
; gearinvolute: draw involute side of gear tooth
 
; rb: base radius
 
; PA: pressure angle
 
; P: diametral pitch
 
; steps: number of subdivisions
 
 
TO gearinvolute :rb :PA :P :steps
 
 
  LOCALMAKE "a 1 / :P
 
  LOCALMAKE "ro ( :rb / COS :PA ) + :a
 
  ;calculate generating angle for top of tooth
 
  ;(needs drawing)
 
  LOCALMAKE "l2 :ro ^ 2 - :rb ^ 2
 
  LOCALMAKE "limit ( SQRT :l2 ) / :rb
 
  ;involute :rb (:limit / :deg2rad) :steps
 
  LOCALMAKE "coords involute :rb (:limit / :deg2rad) :steps
 
  OUTPUT THING "coords
 
 
END
 
 
; geartooth: draw one full tooth
 
; rp: radius of pitch circle
 
; PA: pressure angle
 
; P: diametral pitch
 
; hdelta: half angular base width (expected)
 
; segments: number of subdivisions on each side
 
 
TO geartooth :rp :PA :P :hdelta :segments
 
 
  LOCALMAKE "rb :rp * COS :PA
 
  LOCALMAKE "clr (2.157 - 2) / :P ;coarser 20P
 
  LOCALMAKE "ddif (1/:P + :clr) - (:rp - :rb)
 
  LOCALMAKE "coords []
 
  PUSH "coords POS
 
  RT 90
 
  FD :ddif PUSH "coords POS
 
  LT 90
 
  ; save position
 
  LOCALMAKE "base POS
 
  LOCALMAKE "head HEADING
 
  ;gearinvolute :rb :PA :P :segments
 
  ; record and draw
 
  MAKE "coords SENTENCE ( gearinvolute :rb :PA :P :segments ) :coords
 
  ;mirror
 
  ;or draw with negative step
 
  ;TODO keep recording
 
  LOCALMAKE "top POS
 
  SETPOS :base
 
  SETHEADING :head
 
  ;turn and move to other side of tooth
 
  ;half angular base width
 
  LT :hdelta
 
  FD 2 * :rb * ( SIN ( :hdelta ) )
 
  LT :delta / 2
 
  ;( print :alpha :beta :hdelta :apitch / :deg2rad )
 
  ;save pos
 
  MAKE "base POS
 
  MAKE "head HEADING
 
  ;draw other side
 
  ;TODO append reverse
 
  MAKE "coords SENTENCE REVERSE ( gearinvolute :rb :PA :P :segments * -1 ) :coords
 
  ;connect sides at top
 
  PD SETPOS :top PU
 
  SETPOS :base
 
  SETHEADING :head
 
  PD
 
  LT 90
 
  FD :ddif PUSH "coords POS
 
  RT 90
 
  OUTPUT THING "coords
 
 
 
END
 
 
; gear: draw involute gear
 
; rp: radius at pitch circle
 
; PA: pressure angle
 
; P: number of teeth normalized by pitch diameter
 
; segments: subdivions on each involute side of each tooth
 
 
TO gear :rp :PA :P :segments
 
 
  LOCALMAKE "cpitch :PI / :P 
 
  LOCALMAKE "apitch (:cpitch / :rp) / :deg2rad
 
  LOCALMAKE "N :P * :rp * 2
 
  LOCALMAKE "rb :rp * COS :PA
 
  LOCALMAKE "clr (2.157 - 2) / :P ;coarser 20P
 
  LOCALMAKE "ded (1/:P + :clr)
 
  LOCALMAKE "rr :rp - :ded
 
  ;this is the main calculation
 
  ;for angular base width delta
 
  ;(needs drawing)
 
  LOCALMAKE "alpha ( TAN :prA ) / :deg2rad
 
  LOCALMAKE "beta :alpha - :prA
 
  LOCALMAKE "delta ( 0.5 * :apitch ) + ( 2 * :beta )
 
  LOCALMAKE "coords []
 
  PU
 
  RT 90 FD :rr LT 90
 
  PD
 
  REPEAT :N
 
  [
 
    MAKE "coords SENTENCE ( geartooth :rp :PA :P :delta / 2 :segments ) :coords
 
    PD
 
    LT (:apitch - :delta) / 2
 
    FD 2 * :rr * SIN ((:apitch - :delta) / 2)
 
    PUSH "coords POS
 
    LT (:apitch - :delta) / 2
 
    NEXTCOLOR
 
  ]
 
  PU
 
  LT 90 FD :rr RT 90
 
  ;output thing "coords
 
 
END
 
 
; mycircle: draw circle
 
; crd: circle radius
 
 
TO mycircle :crd
 
 
  PU
 
  RT 90 FD :crd LT 90
 
  PD
 
 
  REPEAT 180
 
  [
 
  ;lt 1
 
  FD :crd * SIN ( 2 )
 
  LT 2
 
  ]
 
 
  PU
 
  LT 90 FD :crd RT 90
 
  PD
 
 
END
 
 
;involute (for gears)
 
;comprehensive guide
 
;http://bostongear.com/pdf/gear_theory.pdf
 
RESET
 
CLEARSCREEN
 
SETBACKGROUND 33
 
RU 90
 
PD
 
 
MAKE "PI 4 * RADARCTAN(1)
 
MAKE "deg2rad :PI / 180
 
MAKE "prA 14.5
 
MAKE "piR 0.5
 
MAKE "pitch 16
 
 
 
 
mycircle :piR2
 
TRANSFORM
 
SET OBJECT "rotation [0 0 1 0]
 
MAKE "gear2 OBJECT
 
SET :gear2 "center POS
 
SETPARENT OBJECT
 
gear :piR2 :prA :pitch 10
 
SETPARENT "root
 
 
PU
 
SHOWALL

Fri, 16/08/2024 - 01:44

#10

aplesch

Offline

Joined: 05/10/2015

The heading function seems to

The heading function seems to be involved. When I introduce a wait of 60 before recording heading in a variable the result changes:

Very puzzling.

TO geartooth :rp :PA :P :hdelta :segments
 
  LOCALMAKE "rb :rp * COS :PA
  LOCALMAKE "clr (2.157 - 2) / :P ;coarser 20P
  LOCALMAKE "ddif (1/:P + :clr) - (:rp - :rb)
  LOCALMAKE "coords []
  PUSH "coords POS
  RT 90
 
  FD :ddif PUSH "coords POS
 
  LT 90
 
  ; save position
 
  WAIT 60
 
  LOCALMAKE "base POS
 
  LOCALMAKE "head HEADING
 
  ;gearinvolute :rb :PA :P :segments
 
  ; record and draw
 
  MAKE "coords SENTENCE ( gearinvolute :rb :PA :P :segments ) :coords
 
  ;mirror
 
  ;or draw with negative step
 
  ;TODO keep recording
 
  LOCALMAKE "top POS
 
  SETPOS :base
 
  SETHEADING :head
 
  ;turn and move to other side of tooth
 
  ;half angular base width
 
  LT :hdelta
 
  FD 2 * :rb * ( SIN ( :hdelta ) )
 
  LT :delta / 2
 
  ;( print :alpha :beta :hdelta :apitch / :deg2rad )
 
  ;save pos
 
  WAIT 60
 
  MAKE "base POS
 
  MAKE "head HEADING
 
  ;draw other side
 
  ;TODO append reverse
 
  MAKE "coords SENTENCE REVERSE ( gearinvolute :rb :PA :P :segments * -1 ) :coords
 
  ;connect sides at top
 
  PD SETPOS :top PU
 
  SETPOS :base
 
  SETHEADING :head
 
  PD
 
  LT 90
 
  FD :ddif PUSH "coords POS
 
  RT 90
 
  OUTPUT THING "coords

END

New blogs

support for Chrome

Recent Comments

The Latest Tweets

Get in Touch