文章加密

;

2020年10月23日 星期五

1. 跟 webGL 有關,解法是用一個 pixi.js-legacy 2. WebGL框架:Three.js和Babylon.js的比較 3. 基於babylon.js的3D網頁遊戲從零教程

1.

這東東需要知道一下,有個 issue 是跟 webGL 有關,解法是用一個 pixi.js-legacy 套件




    會有這個問題是因為 header 有用到毛玻璃效果 (filter blur),有些人的顯卡太爛,不支援




2. WebGL框架:Three.js和Babylon.js的比較

https://www.itread01.com/content/1549278216.html


3. 基於babylon.js的3D網頁遊戲從零教程
https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/746049/

glTF (GL Transmission Format) 早期在 3D 電腦圖學這個領域裡面,並沒有一個真正通用的檔案格式;以 3D 模型來說,格式可以說是有千百種,包括了常見的 OBJ、STL、X3D…等等,各家都有個家的規格。而這一點,也導致了在開發程式、以及檔案交換上的困難。

為了解決這個問題,Khronos 推出一個新的標準、glTF(GL Transmission Format),希望可以成為「JPEG for 3D」;而他的設計目標,就是希望可以提供一個有效率、並可以方便傳輸的檔案格式、定義,讓程式開發者,可以方便地儲存、讀取 3D 的場景設定、以及模型。

glTF 本身呢,完整的規格可以參考 GitHub 上的資料(連結)。他基本上是以 JSON 為基礎的檔案架構,用來描述場景、以及 3D 模型等資訊,底下還可以使用 URI 的形式、連結到 binary 形式的幾何資訊、圖檔的貼圖、以及 GLSL 的 shader 檔案。

下面的圖,就是官方提供的示意圖:

而實際上,除了多邊形的幾何資料、材質、貼圖、攝影機外,在 glTF 裡面,也還可以定義動畫效果、光源等等的資訊,並也提供了擴展(Extension)的可能性。

他的寫法概念,基本上是被畫成下面的樣子:

基本上,他就是以「scene」為主,底下會有多個「node」,而「node」則可能是巢狀的、裡面的內容可以再包含「mesh」、「camera」或「skin」等。

而像是以 Mesh 的 Vertex 以及 Index 資料來說,則是要透過「buffer」來提供,並透過「bufferview」來指定要使用的區間、然後再透過「accessor」來讓 mesh 使用;說實話,算是頗為繁瑣的描述方法。而「material」的部分,則是理所當然地更為複雜了…

完整資源請看:https://github.com/KhronosGroup/glTF#converters
中文大致說明: https://kheresy.wordpress.com/2015/10/20/khronos-gltf/


4. D3.js是一个数据可视化库。 它使基于数据的生成和修改图形变得容易。 但是,这与3D无关。

  • WebGL:是Javascript API,可让您在浏览器中创建3D图形。
  • Three.js:一个基于WebGL的框架,可以更轻松地在浏览器中创建3D图形,它使用canvas + WebGL显示3D场景。
  • CSS 3D:CSS仅具有一些3D转换,可以使用常规DOM节点实现3D效果。
  • D3.js:D3是一个数据可视化库。 它使基于数据的生成和修改图形变得容易。 但是,这与3D无关。



2020年10月14日 星期三

cygwin, wsl

 cygwin: https://michaelchen.tech/windows-programming/cygwin-primer/


欣儒解釋:  Bash on Windows 指的就是wsl

欣儒安裝的wsl: https://docs.microsoft.com/zh-tw/windows/python/web-frameworks


2020年10月6日 星期二

WebKit是一種用來讓网页浏览器繪製網頁的排版(未詳細了解)

 WebKit是一種用來讓网页浏览器繪製網頁的排版引擎。 它被用於Apple Safari。 其分支Blink被用於基於Chromium的網頁瀏覽器,如:Opera與Google Chrome。

MDN Browser Compatibility Report 2020(未完)

 https://mdn-web-dna.s3-us-west-2.amazonaws.com/MDN-Browser-Compatibility-Report-2020.pdf

進度:

    我從interview transript開始看,目前看到第一個訪談者完。
    再從最開始看起,看到summary完。


學習新單詞:

  1. Interview Transcript (n)訪談逐字稿
  2. appendix (n)附錄
  3. transcribe (v)錄製/抄寫
  4. verbatim (adv)一致不差地
  5. cater (v)迎合
  6. savvy (n)某專業知識, like business savvy, tech savvy
  7. safari 重音在fa
  8. analytics 重音在an
  9. consensus (n)共同的認知
  10. frustration (n)(因不能滿足需求而)沮喪;令人感覺沮喪
  11. product advisory board (n)產品顧問委員會
  12. Needs Assessment (n)(學術名詞)需求評估 
  13. (n)關於
    商業書信中經常用到的片語: with regard to = in regard to (儘管 with regards to 自 1990 年代以來有越來越多人使用的趨勢,但仍應被視為錯誤)
    同義但較簡潔的用法: about = concerning = regarding
    更正式的同義詞: as regards (像是官方在回覆投訴信時使用)
  14. preemptively (adv)搶先地 pre-emptive-ly
  15. concrete (adj)具體的
  16. Commitment (n)奉獻
  17. roll out (v)推出(新產品)
  18. legacy (n)遺產
  19. surface (v)公開資訊。另外還有一種意思是浮現露出資訊。

議題:
  • 訪談者一提到safari在ios的page bottom會有slide和scroll的行為問題,似乎是和apple的bottom有干擾(因為我看的順序不是一開始下來,所以不確定解決與否,再看看)


2020年10月5日 星期一

enable 反白 和 右鍵

javascript: (function () {
    function R(a) {
        ona = "on" + a;
        if (window.addEventListenerwindow.addEventListener(afunction (e) {
            for (var n = e.originalTargetnn = n.parentNoden[ona] = null;
        }, true);
        window[ona] = null;
        document[ona] = null;
        if (document.bodydocument.body[ona] = null;
    }
    R("contextmenu");
    R("click");
    R("mousedown");
    R("mouseup");
    R("selectstart");
})()