MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

WebGL 찾기

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

이 예시는 어떻게 WebGL 랜더링 컨텐츠를 찾고, 유저에게 결과를 보고할지를 보여줍니다.

기능-검색 WebGl

이 첫 예시에서, 우리는 브라우저가 WebGL를 지원하는지 아닌 지를 확인합니다. 우리는 canvas element로 부터 WebGL rendering context을 얻기 위하여 노력합니다. WebGL rendering context는 당신이 설정하고 그래픽 기계의 상태를 쿼리하고, WebGl에 데이터를 전송하고, 그리기 명령어들을 실행할 수 있는 인터페이스입니다.

한 문장 인터페이스에서 그래픽 기계의 상태를 저장하는 것은 WebGL에 고유하지 않습니다. 이것은 또한 다른 그래픽 {̣{Glossary("API")}}, canvas 2D rendering context에 의해 행해집니다. 하지만 특성과 당신이 만드는 변수들은 각 {̣{Glossary("API")}}에서 다를 수 있습니다.

<p>[ Here would go the result of WebGL feature detection ]</p>
<button>Press here to detect WebGLRenderingContext</button>
body {
  text-align : center;
}
button {
  display : block;
  font-size : inherit;
  margin : auto;
  padding : 0.6em;
}
// Run everything inside window load event handler, to make sure
// DOM is fully loaded and styled before trying to manipulate it.
window.addEventListener("load", function() {
  var paragraph = document.querySelector("p"),
    button = document.querySelector("button");
  // Adding click event handler to button.
  button.addEventListener("click", detectWebGLContext, false);
  function detectWebGLContext () {
    // Create canvas element. The canvas is not added to the
    // document itself, so it is never displayed in the
    // browser window.
    var canvas = document.createElement("canvas");
    // Get WebGLRenderingContext from canvas element.
    var gl = canvas.getContext("webgl")
      || canvas.getContext("experimental-webgl");
    // Report the result.
    if (gl && gl instanceof WebGLRenderingContext) {
      paragraph.innerHTML =
        "Congratulations! Your browser supports WebGL.";
    } else {
      paragraph.innerHTML = "Failed to get WebGL context. "
        + "Your browser or device may not support WebGL.";
    }
  }
}, false);

The source code of this example is also available on GitHub.

문서 태그 및 공헌자

 이 페이지의 공헌자: woojin.jo
 최종 변경: woojin.jo,