recursal/MDN huggingface dataset:
AnalyserNode.fftSize
====================

`AnalyserNode` 인터페이스의 **`fftSize`** 속성은 unsigned long 값이고 주파수 영역 데이터를 얻기 위해 고속 푸리에 변환(FFT)을 수행할 때 사용될 샘플에서의 window 사이즈를 나타냅니다.

구문
--


```js
var curValue = analyserNode.fftSize;
analyserNode.fftSize = newValue;
```

### 값

FFT의 window 사이즈를 나타내는 샘플의 수로 주어지는 unsigned 정수입니다. 값이 높을수록 주파수 영역의 자세함이 커지는 결과를 낳으나 시간 영역에서의 자세함은 떨어집니다.

반드시 


2
5

2^5

와 


2
15

2^15

 사이의 2의 제곱이여야만 합니다. 즉 다음 중 하나여야 합니다: `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384`, 그리고 `32768`. 기본값은 `2048`입니다.

**참고:** 만약 값이 2의 제곱이 아니거나 이 명시된 범위의 바깥에 있다면, `IndexSizeError`라는 이름의 `DOMException` (en-US)이 발생합니다.

예제
--

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

  ...

analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount ;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// 현재 오디오 소스의 오실로스코프를 그립니다

function draw() {

      drawVisual = requestAnimationFrame(draw);

      analyser.getByteTimeDomainData(dataArray);

      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

      canvasCtx.lineWidth = 2;
      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';

      canvasCtx.beginPath();

      var sliceWidth = WIDTH \* 1.0 / bufferLength;
      var x = 0;

      for(var i = 0; i < bufferLength; i++) {

        var v = dataArray[i] / 128.0;
        var y = v \* HEIGHT/2;

        if(i === 0) {
          canvasCtx.moveTo(x, y);
        } else {
          canvasCtx.lineTo(x, y);
        }

        x += sliceWidth;
      }

      canvasCtx.lineTo(canvas.width, canvas.height/2);
      canvasCtx.stroke();
    };

    draw();
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-fftsize |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기
AnalyserNode.getFloatTimeDomainData()
=====================================

`AnalyserNode` 인터페이스의 **`getFloatTimeDomainData()`** 메서드는 전달된 `Float32Array` (en-US) 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.

구문
--


```js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Float32Array(analyser.fftSize); // Float32Array는 fftSize와 같은 길이일 필요가 있습니다
analyser.getFloatTimeDomainData(dataArray); // getFloatTimeDomainData()로부터 반환된 데이터로 Float32Array를 채웁니다
```

### 매개변수

`array`

 시간 영역 데이터가 복사될 `Float32Array` (en-US).
 만약 배열이 `AnalyserNode.frequencyBinCount`보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.


### 반환 값

없음.

예제
--

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic-float-data 데모를 확인하세요 (소스 코드도 보세요).


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

  ...

analyser.fftSize = 1024;
var bufferLength = analyser.fftSize;
console.log(bufferLength);
var dataArray = new Float32Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getFloatTimeDomainData(dataArray);

  canvasCtx.fillStyle = 'rgb(200, 200, 200)';
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
  canvasCtx.beginPath();

  var sliceWidth = WIDTH \* 1.0 / bufferLength;
  var x = 0;

  for(var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] \* 200.0;
    var y = HEIGHT/2 + v;

    if(i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }
    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height/2);
  canvasCtx.stroke();
};

draw();
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-getfloattimedomaindata |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기
AnalyserNode()
==============

Web Audio API의 **`AnalyserNode()`** 생성자는 새로운 `AnalyserNode` 객체 인스턴스를 생성합니다.

구문
--


```js
var analyserNode = new AnalyserNode(context, ?options);
```

### 매개변수

*`AudioNodeOptions` (en-US) dictionary로부터 매개변수를 상속받습니다.*

*context*

`AudioContext` 또는 `OfflineAudioContext`에의 참조.

*options* Optional

 \* **`fftSize`**: 주파수 영역 분석에 대한 FFT의 원하는 초기 사이즈.
 기본값은 `2048`입니다.


* **`maxDecibels`**: FFT 분석에 대한 dB단위로의 원하는 초기 최대 power.
 기본값은 `-30`입니다.
* **`minDecibels`**: FFT 분석에 대한 dB단위로의 원하는 초기 최소 power.
 기본값은 `-100`입니다.
* **`smoothingTimeConstant`**: FFT 분석에 대한 원하는 초기 smoothing 상수. 기본값은 `0.8`입니다.

### 반환 값

새로운 `AnalyserNode` 객체 인스턴스.

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-analysernode |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `BaseAudioContext.createAnalyser()` (en-US), 동등한 팩토리 메서드
AnalyserNode.frequencyBinCount
==============================

`AnalyserNode` 인터페이스의 **`frequencyBinCount`** 읽기 전용 속성은 `AnalyserNode.fftSize` 값의 절반인 unsigned 정수입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.

구문
--


```js
var arrayLength = analyserNode.frequencyBinCount;
```

### 값

`AnalyserNode.getByteFrequencyData()`와 `AnalyserNode.getFloatFrequencyData()`가 제공된 `TypedArray`내로 복사하는 값의 수와 동일한 unsigned 정수.

고속 푸리에 변환이 정의된 방법에 관계된 기술적인 이유로, 이것은 언제나 `AnalyserNode.fftSize` 값의 절반입니다. 그러므로, 이것은 다음 중 하나입니다: `16`, `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, 그리고 `16384`.

예제
--

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

  ...

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  var barWidth = (WIDTH / bufferLength) \* 2.5 - 1;
  var barHeight;
  var x = 0;

  for(var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);

    x += barWidth;
  }
};

draw();
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-frequencybincount |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기
AnalyserNode.minDecibels
========================

`AnalyserNode` 인터페이스의 **`minDecibels`** 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 `getByteFrequencyData()`를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.

구문
--


```js
var curValue = analyserNode.minDecibels;
analyserNode.minDecibels = newValue;
```

### 값

FFT 분석 데이터를 스케일링하는 것에 대한 최소 데시벨 값을 나타내는 double인데, `0` dB는 가능한 가장 큰 소리를 나타내고, `-10` dB는 그것의 10번째, 등등입니다. 기본 값은 `-100` dB입니다.

`getByteFrequencyData()`로부터 데이터를 얻을 때, `minDecibels` 또는 더 낮은 진폭을 가진 모든 주파수는 `0`으로 반환됩니다.

**참고:** 만약 `AnalyserNode.maxDecibels`보다 더 큰 값이 설정된다면, `INDEX_SIZE_ERR` 예외가 발생합니다.

예제
--

다음의 예제는 `AnalyserNode`를 생성하기 위한 `AudioContext`와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 `requestAnimationFrame`과 `<canvas>`의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

  ...

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  var barWidth = (WIDTH / bufferLength) \* 2.5;
  var barHeight;
  var x = 0;

  for(var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);

    x += barWidth + 1;
  }
};

draw();
```

명세
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-mindecibels |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Web Audio API 사용하기
WebGL tutorial
==============

WebGL 은 WebGL을 지원하는 브라우져에서 plugin을 사용하지 않고도, 웹 콘텐츠가 OpenGL ES 2.0 기반의 API를 이용하여 HTML `<canvas>`에서 3D 랜더링을 할 수 있도록 해 줍니다. WebGL 프로그램은 JavaScripts로 작성 된 제어 코드와 컴퓨터의 Graphics Processing Unit (GPU)에서 실행되는 특수한 효과를 내는 코드(Shader code)로 구성 됩니다. WebGL 요소들은 다른 HTML요소들과 섞어서 함께 사용 할 수 있으며 페이지의 다른 부분이나 페이지 배경과 함께 사용 할 수 있습니다.

이 튜토리얼은 WebGL 그래픽을 그리기 위해 <canvas>요소를 어떻게 사용하는지에 관해 기본부터 기술합니다. 제공된 예제들은 여러분이 WebGL로 무엇을 할 수 있는지를 명확히하고, 여러분 소유의 콘텐츠를 제작할 수 있도록 작은 코드들을 제공 할 것입니다.

시작하기 전에
-------

`<canvas>` 요소를 사용하는 것은 크게 어렵진 않지만, 여러분은 HTML 과 JavaScript에 대하여 기본적인 이해가 꼭 필요합니다. `<canvas>` 요소와 WebGL은 일부 오래된 브라우저에서 지원되지 않으나, 최근 버전의 모든 주요 브라우저에서 지원됩니다. 우리는 canvas에 그림을 그리기 위해 그림을 신속하게 생성하는 JavaScript 콘텍스트 객체를 사용합니다.

In this tutorial
----------------

Getting started with WebGL

How to set up a WebGL context.

Adding 2D content to a WebGL context

How to render simple flat shapes using WebGL.

Using shaders to apply color in WebGL

Demonstrates how to add color to shapes using shaders.

Animating objects with WebGL

Shows how to rotate and translate objects to create simple animations.

Creating 3D objects using WebGL

Shows how to create and animate a 3D object (in this case, a cube).

Using textures in WebGL

Demonstrates how to map textures onto the faces of an object.

Lighting in WebGL

How to simulate lighting effects in your WebGL context.

Animating textures in WebGL

Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
WebGL을 사용한 객체 애니메이션
===================

* « 이전
* 다음 »

앞 단원에서의 예제 코드는 정지되어 있는 것처럼 보이지만 사실은 15밀리초마다 한 번 씩 WebGL 장면(Scene)을 다시 그리도록 설정되어 있습니다. 그려질 객체의 상태가 계속 똑같기 때문에, 똑같은 객체를 15밀리초마다 계속 다시 그리고 있는 것입니다. 이제 우리가 그린 정사각형을 실제로 움직이게 만들어 보겠습니다.

이번 예제에서는 2차원 정사각형을 3차원으로 회전시키고 이동시켜 보겠습니다. 3차원을 이루는 X, Y, Z축 방향 모두를 중심으로 회전시켜 보면, 우리가 그린 것은 2차원 정사각형이지만 3차원 공간 안에 존재한다는 것을 실감할 수 있을 것 입니다.

정사각형 회전시키기
----------

먼저 정사각형을 회전시켜 보겠습니다. 회전 시키려면 회전 상태(회전량)를 저장할 변수가 필요합니다:


```js
var squareRotation = 0.0;
```


이제 정사각형을 그릴 때 회전을 반영하도록 `drawScene()` 함수를 수정해야 합니다. 정사각형을 처음에 그려질 위치로 이동시키고 나서 다음과 같이 회전을 적용합니다:


```js
mvPushMatrix();
mvRotate(squareRotation, [1, 0, 1]);
```


현재 상태의 모델-뷰 행렬을 저장하고, X축과 Z축을 기준으로 `squareRotation` 만큼 행렬을 회전시킵니다.

정사각형을 그리고 난 후에 모델-뷰 행렬을 원상태로 복구합니다:


```js
mvPopMatrix();
```


모델-뷰 행렬을 복구하는 이유는 이 회전이 다른 객체에 영향을 미치는 것을 예방하기 위해서 입니다.

실제로 애니메이션 효과가 나타나도록 하려면 `squareRotation` 값을 시간이 지남에 따라 계속 변경해주는 코드를 추가해야 합니다. `lastSquareUpdateTime`이라는 변수에 마지막으로 다시 그렸던 시각을 저장하고, 다음과 같은 코드를 `drawScene()`에 추가합니다:


```js
var currentTime = new Date().getTime();
if (lastSquareUpdateTime) {
  var delta = currentTime - lastSquareUpdateTime;

  squareRotation += (30 \* delta) / 1000.0;
}

lastSquareUpdateTime = currentTime;
```


이 코드는 마지막으로 `squareRotation`의 값을 변경한 시각과 현재 시각과의 차이를 이용해서 회전량을 나타내는 `squareRotation`의 값을 결정 합니다.

정사각형 이동시키기
----------

정사각형을 그리기 전에 위치값을 변경하면 정사각형을 이동시킬 수 있습니다. 이번 예제에서는 학습을 목적으로 아주 기초적인 애니메이션을 구현해봅니다. 실전에서 이런 식으로 애니메이션을 구현하면 사람들에게 사랑받지 못할 것입니다.

X, Y, Z 각 축별 오프셋(offset) 값을 새 변수에 저장합니다:


```js
var squareXOffset = 0.0;
var squareYOffset = 0.0;
var squareZOffset = 0.0;
```


축 별 위치 변동값을 다음과 같이 각기 다른 값으로 지정합니다:


```js
var xIncValue = 0.2;
var yIncValue = -0.4;
var zIncValue = 0.3;
```


이제 위치 변동값을 계산하는 코드를 위에서 구현한 회전량 계산 코드 바로 아래에 추가합니다:


```js
squareXOffset += xIncValue \* ((30 \* delta) / 1000.0);
squareYOffset += yIncValue \* ((30 \* delta) / 1000.0);
squareZOffset += zIncValue \* ((30 \* delta) / 1000.0);

if (Math.abs(squareYOffset) > 2.5) {
  xIncValue = -xIncValue;
  yIncValue = -yIncValue;
  zIncValue = -zIncValue;
}
```


마지막으로 다음 코드를 `drawScene()` 함수에 추가합니다:


```js
mvTranslate([squareXOffset, squareYOffset, squareZOffset]);
```


이제 정사각형이 화면에서 좌, 우, 위, 아래, 앞, 뒤로 완전히 자기멋대로 움직이면서 회전하는 것을 볼 수 있습니다. 어찌보면 바탕화면 보호기 같기도 합니다.

WebGL이 지원되는 브라우저라면, 여기에서 실제 동작하는 예제를 확인할 수 있습니다.

추가적인 행렬 연산
----------

아래의 예제는 스택을 사용하는 두 개의 push, pop 루틴과, 주어진 각도만큼 회전시키는 행렬을 포함하는 몇 가지 추가적인 행렬 연산을 사용합니다. 한 번 참고하시기 바랍니다:


```js
var mvMatrixStack = [];

function mvPushMatrix(m) {
  if (m) {
    mvMatrixStack.push(m.dup());
    mvMatrix = m.dup();
  } else {
    mvMatrixStack.push(mvMatrix.dup());
  }
}

function mvPopMatrix() {
  if (!mvMatrixStack.length) {
    throw "Can't pop from an empty matrix stack.";
  }

  mvMatrix = mvMatrixStack.pop();
  return mvMatrix;
}

function mvRotate(angle, v) {
  var inRadians = (angle \* Math.PI) / 180.0;

  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
  multMatrix(m);
}
```


이 루틴은 예전에 Vlad Vukićević가 작성했던 예제를 참고하여 만들었습니다.

* « 이전
* 다음 »
WebGL에서 셰이더를 사용하여 색상 적용하기
=========================

* « 이전
* 다음 »

앞 단원의 예제에서 정사각형을 그려봤으니, 이제 정사각형에 색을 칠해 보겠습니다. 셰이더를 조금 수정하면 색을 칠할 수 있습니다.

정점에 색상 적용
---------

GL(Graphic Library)에서 객체는 정점의 집합으로 구성되며, 각 정점은 위치값과 색상값을 가지고 있습니다. 기본적으로 정점이 아닌 모든 픽셀의 색상값은 선형 보간법(linear interpolation)을 이용해서 계산됩니다. 색상 뿐 아니라 위치를 포함한 다른 모든 속성들도 마찬가지로 선형 보간법으로 계산됩니다. 색상의 경우 선형 보간법을 통해 보간되면 자연스럽게 부드러운 그라데이션(gradation)이 형성됩니다. 앞 단원에서는 정점 셰이더에서 정점에 아무런 색상도 적용하지 않았습니다. 대신에 프래그먼트 셰이더에서 각 픽셀에 흰색을 적용했기 때문에 전체 사각형이 흰색으로 그려질 수 있었습니다.

이제 정사각형의 각 꼭지점에 빨간색, 파란색, 녹색, 흰색을 적용해 보겠습니다. 정점이 아닌 픽셀들은 선형 보간에 의해 그라데이션이 형성됩니다. 먼저 네 개의 정점에 색을 지정하겠습니다. 정점에 색을 지정하려면 정점의 색상값을 가진 배열을 만들고, 이 배열을 WebGL 버퍼에 저장해야 합니다. `initBuffers()` 함수에 아래의 내용을 추가합니다:


```js
  var colors = [
    1.0,  1.0,  1.0,  1.0,    // 흰색
    1.0,  0.0,  0.0,  1.0,    // 빨간색
    0.0,  1.0,  0.0,  1.0,    // 녹색
    0.0,  0.0,  1.0,  1.0     // 파란색
  ];

  squareVerticesColorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY\_BUFFER, squareVerticesColorBuffer);
  gl.bufferData(gl.ARRAY\_BUFFER, new Float32Array(colors), gl.STATIC\_DRAW);
}
```


먼저 정점에 지정할 색상값을 가진 JavaScript 배열을 생성합니다. 4개의 원소가 하나의 색을 나타내며, 정사각형의 4개의 꼭지점에 흰색, 빨간색, 파란색, 녹색이 지정되도록 값을 정합니다. 이 색상 정보 배열을 저장하기 위해 새로운 WebGL 버퍼를 생성하고, 배열은 부동소수점 형식으로 WebGL의 버퍼에 저장합니다.

이 색상 정보를 실제 렌더링에 사용하려면, 컬러 버퍼에서 색상 정보를 읽을 수 있도록 정점 셰이더를 수정해야 합니다:


```html
<script id="shader-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 attribute vec4 aVertexColor;

 uniform mat4 uMVMatrix;
 uniform mat4 uPMatrix;

 varying lowp vec4 vColor;

 void main(void) {
 gl\_Position = uPMatrix \* uMVMatrix \* vec4(aVertexPosition, 1.0);
 vColor = aVertexColor;
 }
</script>
```


수정 전의 소스와 가장 많이 달라진 점은, 색상 배열에서 읽은 값을 토대로 각 정점에 색상값을 지정했다는 점입니다.

프래그먼트에 색상 입히기
-------------

앞 단원에서 사용했던 프래그먼트 셰이더를 다시 한 번 보겠습니다:


```html
<script id="shader-fs" type="x-shader/x-fragment">
 void main(void) {
 gl\_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
 }
</script>
```


프래그먼트에 색상 입히기는 아주 쉽습니다. 위와 같이 프래그먼트 셰이더 내에서 흰색을 지정해주는 대신 단순히 `vColor` 변수에서 값을 읽어오도록 수정하기만 하면, 각 픽셀 별로 보간된 색상값을 구할 수 있습니다:


```html
<script id="shader-fs" type="x-shader/x-fragment">
 varying lowp vec4 vColor;

 void main(void) {
 gl\_FragColor = vColor;
 }
</script>
```


위와 같이 각 프래그먼트는 정점을 기준으로 상대적인 위치에 따라 선형 보간된 색상값을 갖게 됩니다.

색상을 적용해서 그리기
------------

이제 셰이더 프로그램에서 색상 변수를 초기화하고 활성화하는 내용을 `initShaders()`에 추가합니다:


```js
vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);
```


다음은 정사각형을 그릴 때 색상 정보를 사용하도록 `drawScene()`을 수정합니다:


```js
gl.bindBuffer(gl.ARRAY\_BUFFER, squareVerticesColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
```


이제 WebGL이 호환되는 브라우저에서 샘플을 보면, 검정색 바탕에 아래와 같은 정사각형이 그려지는 것을 볼 수 있습니다:

전체 코드 보기 | 새창에서 데모 실행하기

* « 이전
* 다음 »
WebGL 찾기
========

* « 이전 (en-US)
* 다음 » (en-US)

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

### WebGL 기능 검색

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

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


```html
<p>[ Here would go the result of WebGL feature detection ]</p>
<button>Press here to detect WebGLRenderingContext</button>
```



```css
body {
  text-align: center;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}
```



```js
// 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,
);
```


이 예시 코드는 GitHub에서도 확인 가능합니다.

* « 이전 (en-US)
* 다음 » (en-US)
클릭을 통한 청소
=========

* « 이전 (en-US)
* 다음 »

어떻게 유저와 그래픽 기능들과의 상호작용을 결합시킬까. 유저가 클릭을 할 때 랜덤의 색을 가진 랜더링 컨텍스트를 청소하는 것.

### 랜덤 색을 가진 랜더링 컨텍스트를 청소

이 간단한 예시는 어떻게 유저 인터페이스와 WebGL를 결합할지에 대한 설명을 제공합니다. 유저가 캔버스 혹은 버튼을 클릭할 때 마다, 캔버스는 랜덤으로 선택된 색으로 초기화됩니다.

어떻게 내장된 WebGL 기능이 이벤트 핸들러의 내부를 부르는 지를 주목하세요.


```html
<p>
  A very simple WebGL program that still shows some color and user interaction.
</p>
<p>
  You can repeatedly click the empty canvas or the button below to change color.
</p>
<canvas id="canvas-view"
 >Your browser does not seem to support HTML5 canvas.</canvas
>
<button id="color-switcher">Press here to switch color</button>
```



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



```js
window.addEventListener(
  "load",
  function setupWebGL(evt) {
    "use strict";

    // Cleaning after ourselves. The event handler removes
    // itself, because it only needs to run once.
    window.removeEventListener(evt.type, setupWebGL, false);

    // Adding the same click event handler to both canvas and
    // button.
    var canvas = document.querySelector("#canvas-view");
    var button = document.querySelector("#color-switcher");
    canvas.addEventListener("click", switchColor, false);
    button.addEventListener("click", switchColor, false);

    // A variable to hold the WebGLRenderingContext.
    var gl;

    // The click event handler.
    function switchColor() {
      // Referring to the externally defined gl variable.
      // If undefined, try to obtain the WebGLRenderingContext.
      // If failed, alert user of failure.
      // Otherwise, initialize the drawing buffer (the viewport).
      if (!gl) {
        gl =
          canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        if (!gl) {
          alert(
            "Failed to get WebGL context.\n" +
              "Your browser or device may not support WebGL.",
          );
          return;
        }
        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      }
      // Get a random color value using a helper function.
      var color = getRandomColor();
      // Set the clear color to the random color.
      gl.clearColor(color[0], color[1], color[2], 1.0);
      // Clear the context with the newly set color. This is
      // the function call that actually does the drawing.
      gl.clear(gl.COLOR\_BUFFER\_BIT);
    }

    // Random color helper function.
    function getRandomColor() {
      return [Math.random(), Math.random(), Math.random()];
    }
  },
  false,
);
```


이 예시 코드는 GitHub에서도 확인 가능합니다.

* « 이전 (en-US)
* 다음 »
EventSource()
=============

**`EventSource()`** 생성자는 원격 자원을 나타내는 새롭게 생성된 `EventSource` (en-US) 를 반환합니다.

구문
--


```js
eventSource = new EventSource(url, configuration);
```

### 파라미터

`url`

이벤트/메시지를 제공하는 원격 자원의 위치를 나타내는 `USVString` 입니다.

`configuration` Optional

새 연결 구성을 위한 옵션을 제공합니다. 가능한 항목은 다음과 같습니다.\* `withCredentials`. 기본값은 `false` 이며, CORS 가 자격을 `포함`하도록 설정되어야하는지를 나타냅니다.

예시
--


```js
var evtSource = new EventSource("sse.php");
var eventList = document.querySelector("ul");

evtSource.onmessage = function (e) {
  var newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
};
```


**참고:** GitHub 에서 전체 예시를 확인할 수 있습니다 — Simple SSE demo using PHP를 사용하는 간단한 SSE 데모를 보세요.

명세
--

| Specification |
| --- |
| HTML Standard # dom-eventsource-dev |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

함께 보기
-----

* `EventSource` (en-US)
AbortController.AbortController()
=================================

**실험적:** **이 기능은 실험적인 기능입니다.**  
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

**`AbortController()`** 생성자는 새로운 `AbortController` 객체 인터페이스를 생성한다.

구문
--


```js
var controller = new AbortController();
```

### 파라미터

없음.

예제
--

다음 스니펫에서는 Fetch API를 사용해 비디오를 다운로드하는 것을 목표로 한다.

먼저 `AbortController()` 생성자를 사용해 컨트롤러를 `AbortController.signal` 프로퍼티를 사용해 `AbortSignal` 객체와 관계된 참조를 얻는다.

Fetch 요청을 시작할 때, 요청의 옵션 객체 내부에 `AbortSignal` 옵션을 전달한다(아래의 `{signal}` 참고). 이것은 신호와 컨트롤러를 fetch 요청과 관계짓고, 아래의 두 번째 이벤트 리스너에서 보여주듯이 `AbortController.abort()`를 호출하여 이를 취소할 수 있게한다.


```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```


**참고:** `abort()`가 호출되면, `fetch()` promise는 `AbortError`과 함께 reject된다.

동작하는 완전한 예제는 GitHub에서 확인 할 수 있다 — abort-api 참고(라이브 실행도 확인할 수 있다).

명세
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortcontroller-abortcontroller① |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

함께 보기
-----

* Fetch API