Hi,

In your post, you did not mention anything on this smooth shader, can you make some simple explanation on this shader? I can not figure out why this shader can improve the smooth of the glyphs.

Thanks.

Hi, sorry for so many questions.

Where does these magic numbers come from?

const JITTER_PATTERN = [
        Vector.new(-1 / 12.0, -5 / 12.0),
        Vector.new( 1 / 12.0,  1 / 12.0),
        Vector.new( 3 / 12.0, -1 / 12.0),
        Vector.new( 5 / 12.0,  5 / 12.0),
        Vector.new( 7 / 12.0, -3 / 12.0),
        Vector.new( 9 / 12.0,  3 / 12.0),
    ]

In your post, you mentioned this:
We can easily get four samples per pixel by rendering the same set of triangles four times, each time with a slightly different offset and using a color with a different channel each time.

slightly different offset refer to these magic number above? If yes, how can I create this numbers?

Hey @evanw, i am trying to learn from this app and I was wondering why there is only one large VertexBuffer vs. allocating a buffer for each thing. Or am i misunderstanding the code?

Is the overhead of many createBuffer/deleteBuffer big?
Doesn't this approach also mean there is a lot of space unused since a chunk is 4 * 1024 * 1024?

http://thetamath.com/app/y=x%5E(2.5)

Values of x^2.5 and more do not render properly

Hello @evanw!

Thank you for the best math plotter.
Could you add a description line with keywords like math, chart, plot, graph — now it is very difficult to search for it in list of projects / stars.

Thanks!

I have implemented Easy Scalable Text Rendering on the GPU with OpenGL without the anti-aliasing part. Great thanks to @evanw . 👍

msjh.ttf, character: 'D', font-size: 400

But I think there are some problems:

Every glyph will consume a drawcall. (code taken from compiled.js)

    for (var i = 0, count1 = this._usedInstances; i < count1; i = i + 1 | 0) {
      var instance = in_List.get(this._instances, i);

      if (instance.glyph.area != null) {
        for (var j = 0, count = Canvas.JITTER_PATTERN.length; j < count; j = j + 1 | 0) {
          var offset = in_List.get(Canvas.JITTER_PATTERN, j);
          this._transformB.set2(this._transformA);
          this._transformB.translate1(instance.offset);
          this._transformB.translate2(offset.x * scale, offset.y * scale);
          this._transformB.scale1(instance.scale);

          if (j % 2 == 0) {
            this._glyphMaterial.setUniformVec41(GLSLX_NAME_COLOR, j == 0 ? 1 : 0, j == 2 ? 1 : 0, j == 4 ? 1 : 0, 0);
          }

          GPU.in_Material.setUniformMat32(this._glyphMaterial, GLSLX_NAME_MATRIX3, this._transformB);
          this._context.draw(GPU.Primitive.TRIANGLES, this._glyphMaterial, instance.glyph.area);
        }
      }
    }

I haven't test it but I think the performance will be very bad when rendering many characters. So I changed a little: all glyph contours (line-segments and quadratic bezier segments) are combined into one mesh, and then rendered in the same way. The output should be the same.

But, if all glyphs are combined and rendered at the same time, we won't be able to use per-glyph color. All the text will have the same color. I don't have any idea how to solve this.

Do you have any suggestions? @evanw

Hello @evanw,

You have written a so cool project, and I am interested in typeface design and text rendering algorithms, I'm wonder if you can give some books on text rendering or some related papers to me?

I just read a few posts online below:

Easy Scalable Text Rendering on the GPU

GPU text rendering with vector textures

But that's not enough, i need some more system info on text rendering algorithms.

Thanks for your time. :)

Thetamath:

Google and common sense:

Something is wrong here

Hi,
I was just curious why I can see these issues on zooming:

Checking the sign of u^2 - v on the GPU appears to be patented by Adobe in the US.
There also are about 21 patents by Nvidia (click on the "20 More" link) that might or might not apply.

EDIT: This seems to be working around some of the patents:
http://wdobbie.com/post/gpu-text-rendering-with-vector-textures/

For me, this code is unreadable. But I really REALLY want to learn your Loop Blinn / antialiasing technique.

Is there any way to build the code in a readable manner for Javascript? I couldn't figure out your skew builder if it had any options to work with.

I read your article on Medium, but it's just not enough since I am new to GLSL and most articles about the topic have been taken down.

Thanks,
Craig.

Hi @evanw!
It is not possible to use common math factorial notation x! now.
Are there plans to introduce that?
Thanks.