Szanowni Państwo,
Gdzie i jak zamieścić kod WebGL ? Nie wiem gdzie i jak odpalić taki skrypt, aby działał.
Jak to się uruchamia, można prosić przykład ?
class Drawing {
constructor(options) {
this.canvas = options.canvas;
this.gl = options.gl;
}
}
function createGl() {
const canvas = document.getElementById('webgl');
// #1 - inicjalizacja kontekstu WebGL
const gl = canvas.getContext('webgl');
if (gl === null) {
alert("Your browser does not support WebGL.");
return;
}
const drawing = new Drawing({
canvas: canvas,
gl: gl
});
}
createGl();
const VertexCoordinates = [
-0.5, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
];
class Drawing {
constructor(options) {
...
}
initBuffer(data) {
...
}
compileShader(shader, src) {
this.gl.shaderSource(shader, src);
this.gl.compileShader(shader);
}
makeProgram(src) {
// #4 - stworzenie i kompilacja obu shaderów
const vshader = this.gl.createShader(this.gl.VERTEX_SHADER);
const fshader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
this.compileShader(vshader, vertCode);
this.compileShader(fshader, fragCode);
// #5 - utworzenie programu, do którego podpięte zostaną shadery
const program = this.gl.createProgram();
this.gl.attachShader(program, vshader);
this.gl.attachShader(program, fshader);
this.gl.linkProgram(program);
return program;
}
drawTriangle() {
const vertexBuffer = this.initBuffer(VertexCoordinates);
const program = this.makeProgram();
}
}
class Drawing {
constructor(options) {
...
}
initBuffer(data) {
...
}
compileShader(shader, src) {
this.gl.shaderSource(shader, src);
this.gl.compileShader(shader);
}
makeProgram(src) {
// #4 - stworzenie i kompilacja obu shaderów
const vshader = this.gl.createShader(this.gl.VERTEX_SHADER);
const fshader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
this.compileShader(vshader, vertCode);
this.compileShader(fshader, fragCode);
// #5 - utworzenie programu, do którego podpięte zostaną shadery
const program = this.gl.createProgram();
this.gl.attachShader(program, vshader);
this.gl.attachShader(program, fshader);
this.gl.linkProgram(program);
return program;
}
drawTriangle() {
const vertexBuffer = this.initBuffer(VertexCoordinates);
const program = this.makeProgram();
}
}
W metodzie makeProgram() tworzymy i kompilujemy oba shadery. Najpierw określamy ich typ ( gl.VERTEX_SHADER oraz gl.FRAGMENT_SHADER), a następnie, korzystając z mini-metody compileShader(), wstawiamy do nich zawartość odpowiedniego shadera ze zdefiniowanych wcześniej stałych. Kolejnym krokiem jest inicjalizacja programu, do którego linkujemy shadery i który podpinamy do kontekstu WebGL-a.
Zwrócony program przypisujemy do stałej program – będziemy jeszcze z niego korzystać.
Ostatnie, co zostało do zrobienia, to podpięcie buforu vertexBuffer do zmiennej attribute vec4 aVertexPosition z shadera wierzchołków.
drawTriangle() {
const vertexBuffer = this.initBuffer(VertexCoordinates);
const program = this.makeProgram();
// #6 - powiązania attributes i uniforms z odpowiednimi zmiennymi w shaderach
const num = 3; // każda koordynata składa się z 3 zmiennych
const type = this.gl.FLOAT; // dane w buforze to 32 bit float
const normalize = false; // bez normalizacji
const stride = 0; // ustawienia byte'ów w buforze
const offset = 0; // ustawienia byte'ów w buforze
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
this.gl.enableVertexAttribArray(this.gl.getAttribLocation(program, 'aVertexPosition'));
this.gl.vertexAttribPointer(this.gl.getAttribLocation(program, 'aVertexPosition'), num, type, normalize, stride, offset);
}
drawTriangle() {
const vertexBuffer = this.initBuffer(VertexCoordinates);
const program = this.makeProgram();
// #6 - powiązania attributes i uniforms z odpowiednimi zmiennymi w shaderach
const num = 3; // każda koordynata składa się z 3 zmiennych
const type = this.gl.FLOAT; // dane w buforze to 32 bit float
const normalize = false; // bez normalizacji
const stride = 0; // ustawienia byte'ów w buforze
const offset = 0; // ustawienia byte'ów w buforze
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);
this.gl.enableVertexAttribArray(this.gl.getAttribLocation(program, 'aVertexPosition'));
this.gl.vertexAttribPointer(this.gl.getAttribLocation(program, 'aVertexPosition'), num, type, normalize, stride, offset);
}