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

Odpowiedz Nowy wątek
2019-08-09 00:01
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);
  }
edytowany 1x, ostatnio: cerrato, 2019-08-09 09:19
Wstaw kod poprawnie w znacziki - Maciej Cąderek 2019-08-09 00:05

Pozostało 580 znaków

2019-08-09 01:40
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');


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);
edytowany 3x, ostatnio: LukeJL, 2019-08-09 01:44

Pozostało 580 znaków

2019-08-10 23:49
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.

Pozostało 580 znaków

2019-08-10 23:49
0

Jak mam to uruchomić ?

Pozostało 580 znaków

2019-08-10 23:58
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.


((0b10*0b11*(0b10**0b101-0b10)**0b10+0b110)**0b10+(100-1)**0b10+0x10-1).toString(0b10**0b101+0b100);

Pozostało 580 znaków

2019-08-11 00:15
1

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.


Has he lost his mind? Can he see or is he blind?

Pozostało 580 znaków

2019-08-11 11:36
0

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

Wygoogluj "webgl 3d example". Ale najlepiej zacznij od podstaw js. - Yukiteru Gromadzki 2019-08-11 15:51

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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