-1
WebGLを初めて使用しようとしていましたが、問題が発生したようです。すべてのコードはうまく見えますが、jshintを複数回実行しましたが、このプログラムを正しく動作させることができません。 Chrome OSでChrome 54を安定して使用しています。コードは以下のとおりです。WebGLシェーダプログラムが動作しない
"use strict";
//initWebGL function
function initWebGL(canvas){
//get a webGL context
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
//if we have a context, we're good to go. if not, alert, and return the nothing that is our empty context
if(!gl){
alert("Your browser does not support WebGL");
}
return gl;
}
//shader creation function
function createShader(gl, type, source){
//create and compile the shader
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
//if success, then return the shader. if not, log the shader info, and then delete the shader.
if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
return shader;
}
alert(gl.getShaderInfoLog(shader) + "");
gl.deleteShader(shader);
}
//program creation function
function createProgram(gl, vertexShader, fragmentShader){
//create the program and attach the shaders
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
//if success, return the program. if not, log the program info, and delete it.
if(gl.getProgramParameter(program, gl.LINK_STATUS)){
return program;
}
alert(gl.getProgramInfoLog(program) + "");
gl.deleteProgram(program);
}
//main function
function start(){
//get the canvas
var canvas = document.getElementById("webgl_canvas");
//initialize WebGL
var gl = initWebGL(canvas);
//keep going if we have a context
if(!gl){
return;
}
//set the clear color
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//set up depth testing
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
//clear the color and the depth buffer
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clear(gl.DEPTH_BUFFER_BIT);
//set up the viewport
gl.viewport(0, 0, canvas.width, canvas.height);
//set up shaders
var vertexShaderSource = "attribute vec2 a_position; void main(){gl_Position = vec4(a_position, 0, 1);}";
var fragmentShaderSource = "precision mediump float; void main(){gl_FragColor = vec4(1, 1, 1, 1);}";
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
//set up the program
var program = createProgram(gl, vertexShader, fragmentShader);
//get the attribute location
var positionAttributeLocation = gl.getAttributeLocation(program, "a_position");
//set up a position buffer
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bindBufferData(gl.ARRAY_BUFFER, new Float32Array([0, 0, 0, 0.5, 0.7, 0]));
//tell webGL to use the program
gl.useProgram(program);
//enable the vertex attribute array
gl.enableVertexAttribArray(positionAttributeLocation);
//tell webgl how to pull out the data
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
//render
gl.drawArrays(gl.TRIANGLES, 0, 3);
}canvas{outline:1px solid red;}<html>
\t <head>
\t \t <title>WebGL demo</title>
\t </head>
\t <body onload="start();">
\t \t <canvas id="webgl_canvas" width="640" height="480"></canvas>
\t </body>
</html>
あなたがそれを実行してみたときにうーん...何が起こりますか？ – duskwuff