Is it possible to illustrate WebGL output of Asymptote with a custom font e.g. on codepen.io?

kiryph commented 3 years ago

I have used on my machine the Type-1 font of https://ctan.org/pkg/cryst to generate webGL output

import three;

texpreamble("\DeclareFontFamily{U}{cry}{\hyphenchar\font=-1}");
texpreamble("\DeclareFontShape{U}{cry}{m}{n}{ <-> cryst}{}");
texpreamble("\newcommand{\cry}[1]{{\usefont{U}{cry}{m}{n} \symbol{#1}}}");

currentlight=Headlamp;
size(469.75499pt,0);

currentprojection=
  perspective(camera=(160.119024441391,136.348802919248,253.822628496226),
              up=(-0.188035408976828,0.910392236102215,-0.368549401594584),
              target=(25.5462739598034,1.77605243766079,-9.93996244768584),
              zoom=5.59734733413271,
              angle=5.14449021168139,
              viewportshift=(0.813449720559684,-0.604674743165144),
              autoadjust=false);

draw(scale3(4)*extrude("Hello cryst\cry{41}",2Z),
     material(blue));

$ asy -f html label3zoom.asy

Screenshot 2021-08-29 at 09 27 17

Since http://asymptote.ualberta.ca/ throws an error due to the missing font, I tried to showcase the html page on https://codepen.io/kiryph/pen/eYRprKG

The structure of the html output of asymptote is:

<html lang="">

<head>
<title>label3zoom</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="https://vectorgraphics.github.io/asymptote/base/webgl/asygl-1.00.js">
</script>

<script>
    ...
</script>
</head>

<body style="overflow: hidden;" onload="webGLStart();">
<canvas id="Asymptote" width="469" height="172" style="border: none;">
</canvas>
</body>

</html>

I have tried to adapt this to codepen.io:

Since the html tag body cannot be used on codepen.io, I replaced it by a div

<div id="body" >
  <canvas id="Asymptote" width="469" height="280" style="border: none;">
  </canvas>
</div>

div#body {
  margin: 0;
  overflow: hidden;
}

The onLoad function does not exist for divs. So I just manually run webGLStart() in the codepen console. However, this gives following error

"Blocked a frame with origin 'https://cdpn.io' from accessing a cross-origin frame."

So my question is: can codepen.io be used at all?

If not, is there any other possibility?

Of course, I can host the html myself. But using a place which does not depend on my own hosting is useful for sites like tex.stackexchange.com

johncbowman commented 3 years ago

You can only use fonts that are installed on the machine on which you run Asymptote. That means that you cannot use the http://asymptote.ualberta.ca/ web application to generate webGL output containing fonts that it doesn't know about.

kiryph commented 3 years ago

@johncbowman Thanks for your answer. I was aware of that. The question was not addressing http://asymptote.ualberta.ca/ but how the html output of asymptote can be used on sites like codepen.io

https://codepen.io/kiryph/pen/eYRprKG

IMHO, this could be possible and requires adjusting the html output of asymptote. I do not mind doing this manually. I was hoping someone familiar with the way asymptote creates the webgl output could help out.

Here an example of webgl on codepen.io

https://codepen.io/jackisace/pen/QWgbGmV

johncbowman commented 3 years ago

The title asks about custom fonts. Asymptote uses ghostscript to convert all fonts to Bezier patches. You can't later replace the fonts at rendering time, in case that is what you are doing.

What is the purpose of using codepen? Why not just display Asymptote's html output normally, either as a standalone page or by embedding it in another page?

kiryph commented 3 years ago

What is the purpose of using codepen.io?

Free and hopefully persistent hosting to showcase WebGL output of asymptote for sites like https://tex.stackexchange.com This allows others to instantly follow the question without running asymptote on their machine.

Why not just display Asymptote's html output normally, either as a standalone page or by embedding it in another page?

On https://tex.stackexchange.com many links to external pages become outdated with time, i.e. are not available anymore. If I would place it on https://my-arbitrary-domain.com/label3zoom.html (does not exist), I have to maintain a webserver and keep this domain for the purpose of snippets. This increases the barrier to create runnable snippets for sites like https://tex.stackexchange.com

Ideally https://tex.stackexchange.com would allow to embed html/css/javascript like https://stackoverflow.com can. This is described here https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do

I hope I could explain why I consider it valuable to use sites like https://codepen.io also for webgl output of asymptote.

vectorgraphics / asymptote

Is it possible to illustrate WebGL output of Asymptote with a custom font e.g. on codepen.io? #265