Nie wiem gdzie i jak odpalić taki skrypt, aby działał. Jak to się uruchamia, można prosić przykład ?

0

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);
  }
1

Gdzie i jak zamieścić kod WebGL ? Nie wiem gdzie i jak odpalić taki skrypt, aby działał.

Np. do pliku *.html, o tak:

<script>
TUTAJ_WRZUĆ_KOD_KTÓRY_MA_SIĘ_ODPALIĆ
</script>

O ile pytasz o osadzanie skryptu JavaScript, bo nie wiem, o co pytasz za bardzo.

(nawiasem mówiąc obecnie w JS pracuje się trochę inaczej, bo na modułach, ale jeśli chcesz tylko odpalić, to bez nauki pracy na modułach odpalisz sobie JS w tagach <script>)

Aha, i przed <script> musiałbyś wstawić

<canvas id="webgl"></canvas>

bo ten konkretny skrypt wyszukuje element o id ="webgl"

const canvas = document.getElementById('webgl');

0

Wstawiłem poniższy skrypt pomiedzy znaczniki <script type="text/javascript"> i </script> w kodzie i nic nie działa.

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 buforzez

      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);
  }

Dziękuję za dalszę pomoc i kolejne propozycje.

1

Zajrzyj do narzędzi developerskich / dla programistów / dev tools itp. (gdzieś w menu przeglądarki powinna być taka opcja) i zajrzyj do konsoli błędów. I napisz, czy pokazuje się błąd.

2

Nie uruchomisz. Stary, masz kilka różnych klas o nazwie Drawing.

Jeżeli chcesz przykład to tutaj jest całkiem niezły.
.
.
.
.
ale nie jestem pewien czy nie powinieneś zacząć od podstaw.

0

Dziękuję za pomoc. Jak to zrobić, aby zrobić ruch 2D i 3D, można prosić jakiś przykład ?

0
Yukiteru Gromadzki napisał(a):

Nie uruchomisz. Stary, masz kilka różnych klas o nazwie Drawing.

Jeżeli chcesz przykład to tutaj jest całkiem niezły.
.
.
.
.
ale nie jestem pewien czy nie powinieneś zacząć od podstaw.

**Jak zrobić ruch w 2D lub 3D ?
**

1 użytkowników online, w tym zalogowanych: 0, gości: 1