Just like OpenGL and most rendering engines that I know of, WebGL has no builtin support for text rendering. And on top of that, I can’t use the approach we use in PointLine at the moment. PointLine gets the outlines for the characters from the Windows GDI. So I was looking for something cross platform.<\/p>\n
Searching on the internet there are two main approaches:<\/p>\n
Although I prefer the second approach, I found an example of the first that looked simple enough on nehe<\/a>. It was based on FreeType<\/a> and for OpenGL.\u00c2\u00a0 I started converting it to WebGL, but it was not as easy as it looked. It makes heavy use of display lists which are not available in WebGL.<\/p>\n So I looked further, and found the FTGL library<\/a> which is also based on FreeType<\/a>. It sounded like just what I need, but for OpenGL. So, I extended the library to allow me to extract the triangles for processing in WebGL. I sent my patch<\/a> to the FTGL developers and hope for inclusion.<\/p>\n Meanwhile I can render texts in WebGL with my modified version of FTGL …\u00c2\u00a0 of course it’s only so easy to do when using Wt::WGLWidget<\/a> from the excellent witty library.<\/p>\n Here is my research prototype<\/a> which now has text.<\/p>\n Here are the important parts of how it’s done with the modified libftgl:<\/p>\n void WebGlWidget::initializeGL() vertices_.clear(); const WebGlWidget::ShaderInfo& shinf = wglw.GetShaderByName(“Text”); vertexPositionAttribute_ = wglw.getAttribLocation(shinf.shaderProgram_, “aVertexPosition”); vertexBuffer_ = wglw.createBuffer(); void WebGlWidget::paintGL() const WebGlWidget::ShaderInfo& shinf = wglw.GetShaderByName(“Text”); wglw.bindBuffer(wglw.ARRAY_BUFFER, vertexBuffer_); wglw.drawArrays(wglw.TRIANGLE_STRIP, 0, vertices_.size() \/ 3);<\/p>\n }<\/p>\n I now maintain my changes to ftgl at github<\/a> and in my ppa<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Just like OpenGL and most rendering engines that I know of, WebGL has no builtin support for text rendering. And on top of that, I can’t use the approach we use in PointLine at the moment. PointLine gets the outlines for the characters from the Windows GDI. So I was looking for something cross platform. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7,1],"tags":[44,173,245],"class_list":["post-64","post","type-post","status-publish","format-standard","hentry","category-projects","category-software","category-uncategorized","tag-cad","tag-pointline","tag-webgl"],"_links":{"self":[{"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=64"}],"version-history":[{"count":0,"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/64\/revisions"}],"wp:attachment":[{"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=64"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=64"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ulrichard.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n{<\/p>\n
\nFTGLTriangleExtractorFont font(fontName_.c_str(), vertices_);
\nfont.FaceSize(textSize_);
\nfont.Render(txt_.c_str());<\/p>\n
\nwglw.useProgram(shinf.shaderProgram_);<\/p>\n
\nwglw.enableVertexAttribArray(vertexPositionAttribute_);<\/p>\n
\nwglw.bindBuffer(wglw.ARRAY_BUFFER, vertexBuffer_);
\nwglw.bufferDatafv(wglw.ARRAY_BUFFER, vertices_.begin(), vertices_.end(), wglw.STATIC_DRAW);
\n}<\/p>\n
\n{<\/p>\n
\nwglw.useProgram(shinf.shaderProgram_);<\/p>\n
\nwglw.vertexAttribPointer(vertexPositionAttribute_, 3, wglw.FLOAT, false, 3 * 4, 0);<\/p>\nUpdate:<\/h2>\n