1

Переписываю код с этого урока: ссылка
У меня не создаётся шейдер, не понимаю в чём проблема. Контекст webgl создаётся

function initwebgl(canvas) {
  const context = canvas.getContext("webgl2") ||
    canvas.getContext("webgl") ||
    canvas.getContext("experimental-webgl");
  if (!context) {
    alert('У вас не поддерживается webgl, используйте новый Google Chrome');
  }
  return context;
}

function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  console.log(shader);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  const sucess = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (sucess) {
    return shader;
  }

  console.log(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

function createProgram(gl, v, f) {
  const program = gl.createProgram();
  gl.attachShader(program, v);
  gl.attachShader(program, f);
  gl.linkProgram(program);
  const sucess = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (sucess) {
    return program;
  }

  console.log(gl.getProgramInfoLog(program));
  gl.deleteProgram(program);
}

function drawWebglCanvas(f, v, gl) {
  const vertexShader = createShader(gl, gl.VERTEX_SHADER, v);
  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, f);
  const program = createProgram(gl, vertexShader, fragmentShader);
  const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
}

const fragment = document.querySelector('#fragment').innerHTML;
const vertex = document.querySelector('#vertex').innerHTML;
const canvas = document.querySelector('#glcanvas');
const gl = initwebgl(canvas);
if (gl) {
  drawWebglCanvas(fragment, vertex, gl);
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  position: relative;
  width: 100%;
  height: 100%;
}

#glcanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<canvas id="glcanvas">

<script type="notjs" id="vertex">
attribute vec4 a_position;
void main() {
    gl_Position = a_position;
}
</script>

<script type="notjs" id="fragment">
precision mediump float;

void main(){
    gl_FragColor = vec4(1, 0, 0.5, 1); 
}
</script>

4
  • тут нет draw call, откуда инфа что не создается шейдер? 1 мая 2020 в 15:02
  • @StrangerintheQ я выводил в консоль переменные program и shader и они абсолютно пустые 1 мая 2020 в 15:07
  • @StrangerintheQ или так и должно быть, нельзя ничего посмотреть о шейдере? 1 мая 2020 в 15:29
  • можно, ошибки компиляции, чтобы что-то увидеть на экране нужно еще заполнить буфер вершин и вызвать метод отрисовки 1 мая 2020 в 15:32

1 ответ 1

0

Всё создаётся, но только в JavaScript при создании шейдера и программы нельзя вывести информацию про созданный шейдер и программу при помощи обычного console.log

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.