Шаблон 1

В этом примере описываются повторяющиеся фрагменты кода, которые будут скрыты, а также определяется функция JavaScript-помощник для упрощения инициализации WebGL.

Шаблон кода для настройки контекста отрисовки WebGL

К этому моменту вы, вероятно, уже привыкли к тому, что одни и те же фрагменты HTML, CSS и JavaScript повторяются снова и снова. Поэтому мы их будем скрывать, чтобы сосредоточиться на интересных фрагментах кода, наиболее важных для изучения WebGL.

В частности, HTML содержит элемент <p>, содержащий описательный текст о странице и, возможно, сообщения об ошибках; элемент <canvas>; и необязательно элемент <button>. CSS содержит правила для body, canvas, и button. Любые дополнительные нетривиальные CSS и HTML будут отображаться на страницах конкретных примеров.

В последующих примерах мы будем использовать вспомогательную функцию JavaScript, getRenderingContext(), для инициализации контекста отрисовки WebGL. К этому моменту вы должны понимать, что делает эта функция. В основном, она получает контекст отрисовки WebGL из элемента canvas, инициализирует буфер отрисовки, очищает его в черный цвет и возвращает инициализированный контекст. В случае ошибки она отображает сообщение об ошибке и возвращает null.

Наконец, весь JavaScript-код будет выполняться внутри немедленной функции, что является распространённой техникой JavaScript (см. Функция). Объявление и вызов функции также будут скрыты.

HTML

<p>[ Some descriptive text about the example. ]</p>
<button>[ Optional button element. ]</button>
<canvas>Your browser does not seem to support HTML canvas.</canvas>

CSS

body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}

JavaScript

function getRenderingContext() {
  const canvas = document.querySelector("canvas");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  const gl =
    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  if (!gl) {
    const paragraph = document.querySelector("p");
    paragraph.textContent =
      "Failed to get WebGL context. Your browser or device may not support WebGL.";
    return null;
  }
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  return gl;
}

Исходный код этого примера также доступен на GitHub.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Boilerplate_1