Переписываю код с этого урока: ссылка
У меня не создаётся шейдер, не понимаю в чём проблема. Контекст 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>