webgl使用texImage2D時的限制

webgl使用texImage2D時的限制

前言:

  以前學webgl時都直接把檔案丟到AppServ裡面執行，一直已來都沒問題，但最近在寫webgl時，想說開server有點麻煩，所以就直接開本地檔案直接測試，剛開始都沒問題，直到使用texImage2D後才發現chrome會跳error!

問題:

  如果使用chrome在本地開啟網頁，然後載入Image，再經由texImage2D寫入資料時，會發生錯誤，如下圖

texImage2D報錯

圖為使用Mozilla的webgl教學範例，當在本地開啟時就會報錯，把錯誤訊息拿去google的話，會得到在Image的crossOrigin填入Anonymous，如下程式碼

  image.crossOrigin = 'Anonymous';

填完後問題並不能解決!另外，我也懷疑了是否因為圖檔來自本地端，所以造成這個問題，但就算把圖檔的位址改成非本地，狀況也是一樣的，這問題目前只發生在chrome!

解決:

  直接開一個server，再把檔案都放到server後，就沒問題了。

後記:

  這個狀況目前只發生在chrome，同一個狀況並不會發生在firefox!這問題很奇怪，因為image的載入是沒問題的，寫到DOM裡會正常顯示，但將image送到texImage2D就一定報錯，也許是chrome對本地使用的特別限制又或是bug，不管是哪一個，開server測試，這樣就沒煩惱了。

參考資料:

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext'