国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Canvas + WebGL中文藝術字渲染

baihe / 2980人閱讀

摘要:將所有關聯對合并即并查集的過程,得到每個連通域的唯一標記。此時每個連通域輪廓可以看做是一個多邊形,此時可以用經典算法將其剖分成若干個三角形。若值為則說明該像素處于當前連通域中。二維數組,表示每個像素是否是圖像邊緣。

筆者另一篇文章 https://segmentfault.com/a/11... 講了基于Canvas的文本編輯器“簡詩”的實現,其中文字由WebGL渲染藝術效果,這篇文章主要講述由Canvas獲取字體數據、筆畫分割解析、以及由WebGL進行效果渲染的過程。

導言

用canvas原生api可以很容易地繪制文字,但是原生api提供的文字效果美化功能十分有限。如果想要繪制除描邊、漸變這些常用效果以外的藝術字,又不用耗時耗力專門制作字體庫的話,利用WebGL進行渲染是一種不錯的選擇。

這篇文章主要講述如何利用canvas原生api獲取文字像素數據,并對其進行筆畫分割、邊緣查找、法線計算等處理,最后將這些信息傳入著色器,實現基本的光照立體文字。

利用canvas原生api獲取文字像素信息的好處是,可以繪制任何瀏覽器支持的字體,而無需制作額外的字體文件;而缺陷是對一些高級需求(如筆畫分割)的數據處理,時間復雜度較高。但對于個人項目而言,這是做出自定義藝術字效果比較快捷的方法。

最后實現的效果:

本文的重點在于文字數據的處理,所以只用了比較簡單的渲染效果,但有了這些數據,很容易設計出更為酷炫的文字藝術效果。

“簡詩”編輯器源碼:https://github.com/moyuer1992...
預覽地址:https://moyuer1992.github.io/...

其中文字處理的核心代碼:https://github.com/moyuer1992...
WebGL渲染核心代碼:https://github.com/moyuer1992...

canvas 獲取字體像素

獲取文字像素信息是首要的步驟。

我們利用一個離屏canvas繪制基本文字。設字號為size,項目中設size=200,并設置canvas邊長和字號相同。這里size設置越大,獲得的像素信息就更為精確,當然代價就是耗時更長,如果追求速度的話,可以將size減小。

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.font = size + "px " + (options.font || "隸書");
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(text, width / 2, height / 2);

獲取像素信息:

var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var data = imageData.data;

好了,data變量就是我們最終得到的像素數據。現在我們來看一下data的數據結構:

可以看到,結果是一個長度為200x200x4的數組。200x200的canvas總共40000像素,每個像素上的顏色由四個值來表示。由于使用黑色著色,前三位必然是0。第四位表示透明度,對于無顏色的像素,其值為0,對于有顏色的點,其值為大于零。所以,我們若要判斷該文字在第j行,i列上是否有值,只需判斷data[(j ctx.canvas.width + i) 4 + 3]是否大于零即可。

于是,我們可以寫出判斷某位置是否有顏色的函數:

var hasPixel = function (j, i) {
  //第j行,第i列
  if (i < 0 || j < 0) {
    return false;
  }
  return !!data[(j * ctx.canvas.width + i) * 4 + 3];
};
筆畫分割

接下來,我們需要對文字筆畫進行分割。這實際上是一個尋找連通域的過程:把該文字看成一個圖像,找到該圖像上所有連通的部分,每一個部分就是一個筆畫。

尋找連通域的思路參考這篇文章:

http://www.cnblogs.com/ronny/...

算法大致分為幾個步驟:

逐行掃描圖像,記錄每一行的連通段。

對每個連通段進行標號。對第一行,從1開始依次為連通段進行標號。若非首行,則判斷是否與上一行某個連通段連通,若是,則賦予該連通段的標號。

若某連通段同時與上一行兩個連通段連通,則記錄該關聯對。

將所有關聯對合并(即并查集的過程),得到每個連通域的唯一標記。

下面是核心代碼,關鍵變量定義如下:

g: width * height二維數組,表示每個像素屬于哪個連通域。值為0代表該像素不在文字上,為透明值。

e: width * height二維數組,表示每個像素是否是圖像邊緣。

markMap: 記錄關聯對。

cnt: 關聯對合并前的總標記數量。

逐行掃描:

for (var j = 0; j < ctx.canvas.height; j += grid) {
  g.push([]);
  e.push([]);

  for (var i = 0; i < ctx.canvas.width; i += grid) {
    var value = 0;
    var isEdge = false;


    if (hasPixel(j, i)) {
      value = markPoint(j, i);
    }
    e[j][i] = isEdge;
    g[j][i] = value;
  }
}

進行標記:

var markPoint = function (j, i) {
  var value = 0;

  if (i > 0 && hasPixel(j, i - 1)) {
    //與左邊連通
    value = g[j][i - 1];
  } else {
    value = ++cnt;
  }

  if ( j > 0 && hasPixel(j - 1, i) && ( i === 0 || !hasPixel(j - 1, i - 1) ) ) {
    //與上連通 且 與左上不連通 (即首次和上一行連接)
    if (g[j - 1][i] !== value) {
      markMap.push([g[j - 1][i], value]);
    }
  }

  if ( !hasPixel(j, i - 1) ) {
    //行首
    if ( hasPixel(j - 1, i - 1) && g[j - 1][i - 1] !== value) {
      //與左上連通
      markMap.push([g[j - 1][i - 1], value]);
    }
  }

  if ( !hasPixel(j, i + 1) ) {
    //行尾
    if ( hasPixel(j - 1, i + 1) && g[j - 1][i + 1] !== value) {
      //與右上連通
      markMap.push([g[j - 1][i + 1], value]);
    }
  }

  return value;
};

至此,將整個圖像遍歷一遍,已經完成了算法中1-3的步驟。接下來需要根據markMap中的關聯信息,將標記歸類,最終形成的圖像,帶有相同標記的像素在同一連通域中(即同一筆畫)。

將標記關聯對分類,是一個并查集問題,核心代碼如下:

for (var i = 0; i < cnt; i++) {
  markArr[i] = i;
}

var findFather = function (n) {
  if (markArr[n] === n) {
    return n;
  } else {
    markArr[n] = findFather(markArr[n]);
    return markArr[n];
  }
}

for (i = 0; i < markMap.length; i++) {
  var a = markMap[i][0];
  var b = markMap[i][3];

  var f1 = findFather(a);
  var f2 = findFather(b);

  if (f1 !== f2) {
    markArr[f2] = f1;
  }
}

最終得到markArr數組,即記錄了每一個原標記號對應的最終類別標記。
打個比方:設上一步中標記完成的圖像數組為g;假如markArr[3] = 1,mark[5] = 1, 則表示g中所有值為3、以及值為5的像素,最終都屬于一個連通域,這個連通域標記為1。
根據markArr數組對g進行處理,我們可以得到最終的連通域分割數據。

文字輪廓查找

得到分割后的圖像數據后,我們可以gl.POINTS的形式利用WebGL進行渲染,且可以對不同筆畫設定不同的顏色。但這并不滿足我們的需要。我們希望將文字渲染成一個三維立體的模型,這就意味著我們要將二維的點陣轉化成三維圖形。

假設該文字有n個筆畫,那么現在我們擁有的數據可以看成n塊連通的點陣。首先,我們要將這n塊文字點陣轉換成n個二維平面圖形。在WebGL中,所有的面都必須由三角形組成。這就意味著我們要將一塊點陣轉換成一組毗鄰的三角形。

可能大家想到的第一個思路就是將每三個相鄰像素連接構成三角形,這確實是一種辦法,但由于像素過多,這種方式耗時很長,并不推薦。

我們解決這個問題的思路是:

找到每個筆畫(即每塊連通域)的輪廓,并按順時針順序存儲在數組中。

此時每個連通域輪廓可以看做是一個多邊形,此時可以用經典triangulation算法將其剖分成若干個三角形。

輪廓查找的算法同樣可以參考這篇文章:

http://www.cnblogs.com/ronny/...

大致思路是首先找到第一個上方為空像素的點作為外輪廓起始點,記錄入口方向為6(正上方),沿著順時針方向尋找下一個連接像素,并記錄入口方向,以此類推,直到終點與起始點重合。

接下來需要判斷是否存在鏤空,所以需要尋找內輪廓點,尋找第一個下方為空像素且不在任何輪廓上的點,作為該內輪廓起始點,記錄入口為2(正下方),接下來步驟與尋找外輪廓相同。
注意圖像可能不只有一個內輪廓,所以這里需要循環判斷。若不存在這樣的像素,則無內輪廓。

通過前面的數據處理,我們可以很容易判斷某個像素是否處于輪廓之上:只要判斷是否四周都存在非空像素即可。但關鍵問題在于,三角化算法需要“多邊形”的頂點按順序排列。這樣一來,實際上核心邏輯在于如何按順時針為輪廓像素排序。

對單個連通域進行輪廓順序查找的方法如下:

變量定義:

v: 當前連通域標記號

g: width * height二維數組,表示每個像素屬于哪個連通域。值為0代表該像素不在文字上,為透明值。若值為v則說明該像素處于當前連通域中。

e: width * height二維數組,表示每個像素是否是圖像邊緣。

entryRecord: 入口方向標記數組

rs: 最終輪廓結果

holes: 若有內輪廓,則為內輪廓起始點(內輪廓點在數組最后面,若有多個內輪廓,則只需記錄內輪廓起始位置即可,這樣做是為了適應triangulation庫earcut的參數設置,稍后會講到)

代碼:

function orderEdge (g, e, v, gap) {
  v++;
  var rs = [];
  var entryRecord = [];
  var start = findOuterContourEntry(g, v);
  var next = start;
  var end = false;
  rs.push(start);
  entryRecord.push(6);
  var holes = [];
  var mark;
  var holeMark = 2;
  e[start[1]][start[0]] = holeMark;

  var process = function (i, j) {
    if (i < 0 || i >= g[0].length || j < 0 || j >= g.length) {
      return false;
    }

    if (g[j][i] !== v || tmp) {
      return false;
    }

    e[j][i] = holeMark;
    tmp = [i, j]
    rs.push(tmp);
    mark = true;

    return true;
  }

  var map = [
    (i,j) => {return {"i": i + 1, "j": j}},
    (i,j) => {return {"i": i + 1, "j": j + 1}},
    (i,j) => {return {"i": i, "j": j +1}},
    (i,j) => {return {"i": i - 1, "j": j + 1}},
    (i,j) => {return {"i": i - 1, "j": j}},
    (i,j) => {return {"i": i - 1, "j": j - 1}},
    (i,j) => {return {"i": i, "j": j - 1}},
    (i,j) => {return {"i": i + 1, "j": j - 1}},
  ];

  var convertEntry = function (index) {
    var arr = [4, 5, 6, 7, 0, 1, 2, 3];
    return arr[index];
  }

  while (!end) {
    var i = next[0];
    var j = next[1];
    var tmp = null;
    var entryIndex = entryRecord[entryRecord.length - 1];

    for (var c = 0; c < 8; c++) {
      var index = ((entryIndex + 1) + c) % 8;
      var hasNext = process(map[index](i, j).i, map[index](i, j).j);
      if (hasNext) {
        entryIndex = convertEntry(index);
        break;
      }
    }

    if (tmp) {
      next = tmp;

      if ((next[0] === start[0]) && (next[1] === start[1])) {
        var innerEntry = findInnerContourEntry(g, v, e);
        if (innerEntry) {
          next = start = innerEntry;
          e[start[1]][start[0]] = holeMark;
          rs.push(next);
          entryRecord.push(entryIndex);
          entryIndex = 2;
          holes.push(rs.length - 1);
          holeMark++;
        } else {
          end = true;
        }
      }
    } else {
      rs.splice(rs.length - 1, 1);
      entryIndex = convertEntry(entryRecord.splice(entryRecord.length - 1, 1)[0]);
      next = rs[rs.length - 1];
    }

    entryRecord.push(entryIndex);
  }
  return [rs, holes];
}
function findOuterContourEntry (g, v) {
  var start = [-1, -1];
  for (var j = 0; j < g.length; j++) {
    for (var i = 0; i < g[0].length; i++) {
      if (g[j][i] === v) {
        start = [i, j];
        return start;
      }
    }
  }
  return start;
}
function findInnerContourEntry (g, v, e) {
  var start = false;
  for (var j = 0; j < g.length; j++) {
    for (var i = 0; i < g[0].length; i++) {
      if (g[j][i] === v && (g[j + 1] && g[j + 1][i] === 0)) {
        var isInContours = false;
        if (typeof(e[j][i]) === "number") {
          isInContours = true;
        }
        if (!isInContours) {
          start = [i, j];
          return start;
        }
      }
    }
  }
  return start;
}

為了特別檢查內輪廓的查找,我們找一個擁有環狀連通域的文字測試一下:

看到一切ok,那么這一步就大功告成了。

triangulation構造平面

對于triangulation的過程,我們用開源庫earcut進行處理。earcut項目地址:

https://github.com/mapbox/earcut

利用earcut計算出三角形數組:

var triangles = earcut(flatten(points), holes);

對于每一個三角形,進入著色器時需要設置三個頂點的坐標,同時計算該三角形平面的法向量。對于由a,b,c三個頂點構成的三角形,法向量計算如下:

var normal = cross(subtract(b, a), subtract(c, a));
文字立體模型的建立

我們現在只得到了文字的一個面。既然想制作立體文字,我們需要同時計算出文字的正面、背面、以及側面。

正面和背面很容易得到:

for (var n = 0; n < triangles.length; n += 3) {
  var a = points[triangles[n]];
  var b = points[triangles[n + 1]];
  var c = points[triangles[n + 2]];

  //=====字體正面數據=====
  triangle(vec3(a[0], a[1], z), vec3(b[0], b[1], z), vec3(c[0], c[1], z), index);

  //=====字體背面數據=====
  triangle(vec3(a[0], a[1], z2), vec3(b[0], b[1], z2), vec3(c[0], c[1], z2), index);
}

重點在于側面的構造,這里需要同時考慮內外輪廓。輪廓上每組相鄰點的正、背面可構成一個矩形,將矩形剖分成兩個三角形,即可得到側面的構造。代碼如下:

var holesMap = [];
var last = 0;

if (holes.length) {
  for (var holeIndex = 0; holeIndex < holes.length; holeIndex++) {
    holesMap.push([last, holes[holeIndex] - 1]);
    last = holes[holeIndex];
  }
}

holesMap.push([last, points.length - 1]);

for (var i = 0; i < holesMap.length; i++) {
  var startAt = holesMap[i][0];
  var endAt = holesMap[i][1];

  for (var j = startAt; j < endAt; j++) {
    triangle(vec3(points[j][0], points[j][1], z), vec3(points[j][0], points[j][1], z2), vec3(points[j+1][0], points[j+1][1], z), index);
    triangle(vec3(points[j][0], points[j][1], z2), vec3(points[j+1][0], points[j+1][1], z2), vec3(points[j+1][0], points[j+1][1], z), index);
  }
  triangle(vec3(points[startAt][0], points[startAt][1], z), vec3(points[startAt][0], points[startAt][1], z2), vec3(points[endAt][0], points[endAt][1], z), index);
  triangle(vec3(points[startAt][0], points[startAt][1], z2), vec3(points[endAt][0], points[endAt][1], z2), vec3(points[endAt][0], points[endAt][1], z), index);
}
WebGL渲染

至此為止,我們已經將所有需要的數據處理完畢,接下來,我們需要把有用的參數傳給頂點著色器。

傳入到頂點著色器中的參數定義如下:

attribute vec3 vPosition;
attribute vec4 vNormal;

uniform vec4 ambientProduct, diffuseProduct, specularProduct;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform float shininess;
uniform mat3 normalMatrix;

從頂點著色器輸出到片元著色器的變量定義如下:

varying vec4 fColor;

頂點著色器關鍵代碼:

vec4 aPosition = vec4(vPosition, 1.0);

……

gl_Position = projectionMatrix * modelViewMatrix * aPosition;
fColor = ambient + diffuse +specular;

片元著色器關鍵代碼:

gl_FragColor = fColor;
后續

一個立體漢字的渲染已經完成了。你一定覺得這種效果不夠酷炫,或許還想為它加一些動畫,不要著急,下一篇文章會拋磚引玉講一個文字效果及動畫的設計。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82276.html

相關文章

  • Canvas實現文本編輯器(支持藝術渲染與動畫)

    摘要:項目中文字由進行渲染。待觸發時,取消中文輸入標記,將文字渲染到上。而其中一些有趣的細節實現如文本渲染,對中文筆畫分割實現有趣的動畫等并沒有描寫。 導言 目前富文本編輯器的實現主要有兩種技術方案:一個是利用contenteditable屬性直接對html元素進行編輯,如draft.js;另一種是代理textarea + 自定義div + 模擬光標實現。對于類似word的經典富文本編輯器,...

    OldPanda 評論0 收藏0
  • SegmentFault 技術周刊 Vol.35 - WebGL:打開網頁看大片

    摘要:在文末,我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一,它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0
  • WebGL入門demo

    摘要:而是一款框架,由于其易用性被廣泛應用。如果要學習,拋棄那些復雜的原生接口從這款框架入手是一個不錯的選擇。需要相機,演員這里是地球,場景,導演。最后拍好了戲交給渲染器來制片,發布。狀態也在不停的更新。 WebGL入門demo three.js入門 開場白 哇哦,繪制氣球耶,在網頁上?對啊!厲害了!3D效果圖也能在網頁上繪制出來啊,這么好玩的事情,趕緊來看看! 這里是屬于WebGL的應用,...

    lijinke666 評論0 收藏0
  • 前端動畫調研-V1

    摘要:支持動畫狀態的,在動畫開始,執行中,結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上,也是一個動畫庫,適用所有的屬性,并且實現的能更方便的實現幀動畫,替代復雜的定義方式。 動畫調研-V1 前言:動畫從用途上可以分為兩種,一種是展示型的動畫,類似于一張GIF圖,或者一段視頻,另一種就是交互性的動畫。這兩種都有具體的應用場景,比如...

    ddongjian0000 評論0 收藏0

發表評論

0條評論

baihe

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<