WebGL - Цвета: Начальный гид по добавлению жизни в вашу 3D графику
Здравствуйте,野心ные энтузиасты WebGL! Я рад быть вашим проводником в этом красочном путешествии по миру WebGL. Как кто-то, кто преподавал компьютерную графику более десяти лет, я могу сказать, что добавление цветов в ваши 3D сцены похоже на оживление черно-белой фотографии. Это магия, и сегодня мы вместе unlocks эту магию!
Понимание цветов в WebGL
Прежде чем мы углубимся в детали применения цветов, давайте на минутку поймем, что значат цвета в контексте WebGL. В этой цифровой реальности цвета представляются с использованием модели цвета RGB (Красный, Зеленый, Синий). Каждый цвет является kombinaciyu этих трех основных цветов, с значениями в диапазоне от 0.0 до 1.0.
например:
- Красный: (1.0, 0.0, 0.0)
- Зеленый: (0.0, 1.0, 0.0)
- Синий: (0.0, 0.0, 1.0)
- Белый: (1.0, 1.0, 1.0)
- Черный: (0.0, 0.0, 0.0)
Представьте это как смешивание красок, но с светом вместо пигментов. Это как быть цифровым художником с бесконечной палитрой у ваших指尖!
Применение цветов в WebGL
Теперь, когда мы понимаем основы, давайте脏 our руки (или, точнее, наши руки, полные цвета?) с применением цветов в WebGL.
Шаги для применения цветов
- Определите атрибуты цвета в вашем вершина шейдере
- Передайте данные цвета из вашего JavaScript кода
- Используйте цвет в вашем фрагментном шейдере
Давайте разберем эти шаги с примерами кода.
Шаг 1: Определите атрибуты цвета в вершина шейдере
Сначала нам нужно сказать нашему вершина шейдеру, что мы будем работать с цветами. Вот как мы это делаем:
attribute vec4 a_Position;
attribute vec4 a_Color;
varying vec4 v_Color;
void main() {
gl_Position = a_Position;
v_Color = a_Color;
}В этом коде мы определяем атрибут a_Color для получения данных цвета и переменную v_Color для передачи цвета в фрагментный шейдер. Это как setup color pipeline от нашего JavaScript кода до наших пикселей!
Шаг 2: Передайте данные цвета из JavaScript
Теперь нам нужно передать данные цвета из нашего JavaScript кода в шейдер. Вот пример того, как мы можем это сделать:
// Определите вершины и цвета
var vertices = new Float32Array([
0.0, 0.5, 1.0, 0.0, 0.0, // Vertex 1: x, y, r, g, b
-0.5,-0.5, 0.0, 1.0, 0.0, // Vertex 2: x, y, r, g, b
0.5,-0.5, 0.0, 0.0, 1.0 // Vertex 3: x, y, r, g, b
]);
// Создайте буфер и отправьте данные в него
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// Скажите WebGL, как читать буфер
var FSIZE = vertices.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
gl.enableVertexAttribArray(a_Position);
var a_Color = gl.getAttribLocation(program, 'a_Color');
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
gl.enableVertexAttribArray(a_Color);Этот код может показаться пугающим сначала, но давайте разберем его:
- Мы определяем наши вершины и цвета в одном массиве. Каждая вершина имеет 5 значений: x, y, r, g, b.
- Мы создаем буфер и отправляем наши данные в него.
- Мы говорим WebGL, как читать этот буфер, как для позиции (первые 2 значения), так и для цвета (последние 3 значения).
Это как packing a suitcase с одеждой и туалетными принадлежностями, и затем telling your friend exactly how unpack это!
Шаг 3: Используйте цвет в фрагментном шейдере
Наконец, мы используем цвет в нашем фрагментном шейдере:
precision mediump float;
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}Этот простой шейдер берет цвет, который мы передали из вершина шейдера, и применяет его к нашему фрагменту (пикселю). Это final step в нашем color journey, где цвет наконец-то сияет на экране!
Пример – Применение цвета
Давайте соберем все вместе с полным примером. Мы создадим цветной треугольник с помощью кода, который мы обсуждали.
<!DOCTYPE html>
<html>
<head>
<title>Цветной WebGL Треугольник</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
// Vertex shader program
const vsSource = `
attribute vec4 a_Position;
attribute vec4 a_Color;
varying vec4 v_Color;
void main() {
gl_Position = a_Position;
v_Color = a_Color;
}
`;
// Fragment shader program
const fsSource = `
precision mediump float;
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
`;
function main() {
const canvas = document.querySelector("#glCanvas");
const gl = canvas.getContext("webgl");
if (!gl) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
return;
}
// Initialize a shader program
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
// Get the attribute locations
const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'a_Position'),
vertexColor: gl.getAttribLocation(shaderProgram, 'a_Color'),
},
};
// Create the buffer
const buffers = initBuffers(gl);
// Draw the scene
drawScene(gl, programInfo, buffers);
}
function initBuffers(gl) {
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
return {
position: positionBuffer,
};
}
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(programInfo.program);
{
const numComponents = 2; // pull out 2 values per iteration
const type = gl.FLOAT; // the data in the buffer is 32bit floats
const normalize = false; // don't normalize
const stride = 20; // how many bytes to get from one set of values to the next
const offset = 0; // how many bytes inside the buffer to start from
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}
{
const numComponents = 3;
const type = gl.FLOAT;
const normalize = false;
const stride = 20;
const offset = 8;
gl.vertexAttribPointer(
programInfo.attribLocations.vertexColor,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexColor);
}
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
window.onload = main;
</script>
</body>
</html>Когда вы запустите этот код, вы увидите красивый треугольник с красными, зелеными и синими вершинами. Это как watching a rainbow оживают на вашем экране!
Заключение
И вот мы на месте, друзья! Мы совершили путешествие через красочный мир WebGL, от понимания, как reprresented цвета до их применения в нашей 3D графике. Помните, это только начало. С этими основами под вашими поясами, вы на правильном пути к созданию потрясающих, насыщенных цветом 3D graphics.
Пока мы заканчиваем, я вспоминаю студента, который однажды сказал мне, что учиться работать с цветами в WebGL — это как учиться рисовать светом. И вы знаете что? Он был absolutely прав. Так что идите вперед, мои дорогие студенты, и рисуйте ваши цифровые canvas с всеми цветами ветра (да, это отсылка к迪士尼, и нет, я не стесняюсь этого!)
Счастливого кодирования, и пусть ваши приключения в WebGL будут всегда насыщенны цветами!
Credits: Image by storyset