Triangle

Пример с треугольником

by Trufi

HTML

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec3 a_position;
    attribute vec3 a_color;
    uniform vec3 u_position;
    varying vec3 v_color;

    void main(void) {
        v_color = a_color;
        gl_Position = vec4(u_position + a_position, 1.0);
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;

    varying vec3 v_color;

    void main(void) {
        gl_FragColor = vec4(v_color.rgb, 1.0);
    }
</script>

CSS

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}

JavaScript

// Инициализация canvas и получение из него WebGL контекста
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

// Устанавливаем размеры canvas и вьюпорт у WebGL
var size = Math.min(window.innerWidth, window.innerHeight); 
canvas.width = canvas.height = size;
gl.viewport(0, 0, size, size);

// Инициализация шейдеров
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, document.getElementById('vertexShader').text);
gl.compileShader(vertexShader);

if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.log(gl.getShaderInfoLog(vertexShader));
}

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, document.getElementById('fragmentShader').text);
gl.compileShader(fragmentShader);

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.log(gl.getShaderInfoLog(fragmentShader));
}

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.log('Could not initialize shaders');
}

// Инициализация данных
var vertexBuffer = gl.createBuffer();
var vertices = [0, 0, 0, 0.5, 1, 0, 1, 0, 0];
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var colorBuffer = gl.createBuffer();
var colors = [1, 0, 0, 0, 1, 0, 0, 0, 1];
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

// Получим местоположение переменных в программе шейдеров
var uPosition = gl.getUniformLocation(program, 'u_position');
var aPosition = gl.getAttribLocation(program, 'a_position');
var aColor = gl.getAttribLocation(program, 'a_color');

// Укажем какую шейдерную программу мы намерены далее...