WEBGL에서 학습 행렬을 취하기위한 첫 번째 단계

webgl에서 간단한 삼각형을 그린 후에 변환을 수행하는 방법을 배우기로 결정했습니다. 그래서 기본적으로 제가 할 수있는 가장 간단한 일은 항등 행렬을 작성하고 그것을 정점 위치에 곱하는 것입니다. WEBGL에서 학습 행렬을 취하기위한 첫 번째 단계

그래서 나는

'uniform mat4 id_matrix;'

으로 코드에 내가 쉐이더에 mat4 변수를 추가 한

var identityMatrix = [1,0,0,0, 
         0,1,0,0, 
         0,0,1,0, 
         0,0,0,1];

로 행렬을 추가 한 그래서 (위치 그것을 곱 변환을 전혀 변경하지 않을 것을 기대하고 있습니다. 1을 곱하면됩니다.)

Finall y 셰이더에서 행렬의 위치를 검색하여 데이터로 채 웁니다.

var shaderIdentityMatrix = gl.getUniformLocation(program, "id_matrix"); 
gl.uniformMatrix4fv(shaderIdentityMatrix,false,new Float32Array(identityMatrix));

그러나 변경 후에는 화면에 아무것도 표시되지 않습니다. 잘못된 가정을하고 있습니까?

여기

<!DOCTYPE HTML> 
<html> 

<canvas id = "can" width="400" height="400"> 

</canvas> 


<script> 
var webgl_canvas = document.getElementById('can'); 
var gl = webgl_canvas.getContext('experimental-webgl'); 
var triangles = [-0.8,-0.8,0,0.8,-0.8,0,0,0.8,0]; 
var identityMatrix = [1,0,0,0, 
         0,1,0,0, 
         0,0,1,0, 
         0,0,0,1];  
var vertexBuffer = gl.createBuffer(); 
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(triangles), gl.STATIC_DRAW); 

vertexBuffer.itemSize = 3; 
vertexBuffer.numItems = 3; 





var vertexShader_source = 'attribute vec3 a_position;' + 'uniform mat4 id_matrix;' + 'void main() { gl_Position = id_matrix * vec4 (a_position,1); }'; 
var fragmentShader_source = 'precision mediump float;' + 'void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }'; 









//Compile shaders 
var buildShader = function (shaderSource, typeOfShader) { 
var shader = gl.createShader(typeOfShader); 
gl.shaderSource(shader, shaderSource); 
gl.compileShader(shader); 
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 
    alert (gl.getShaderInfoLog(shader)); 
} 
return shader; 
} 

var compiledVertexShader = buildShader (vertexShader_source, gl.VERTEX_SHADER); 
var compiledFragmentShader = buildShader (fragmentShader_source, gl.FRAGMENT_SHADER); 

//setup GLSL program 
program = gl.createProgram(); 
gl.attachShader(program,compiledVertexShader); 
gl.attachShader(program,compiledFragmentShader); 
gl.linkProgram(program); 


//Draw 
var shaderIdentityMatrix = gl.getUniformLocation(program, "id_matrix"); 
gl.uniformMatrix4fv(shaderIdentityMatrix,false,new Float32Array(identityMatrix)); 
var positionLocation = gl.getAttribLocation(program,"a_position"); 
gl.enableVertexAttribArray(positionLocation); 
gl.useProgram(program); 
gl.vertexAttribPointer(positionLocation, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0); 
gl.drawArrays (gl.TRIANGLES, 0, vertexBuffer.numItems); 
</script> 

</html>

출처

2014-10-28 Giuseppe Tonello

gl.uniformMatrix4fv

는 항상 현재 사용 쉐이더 프로그램을 운영하고 전체 코드를합니다. 이 함수를 호출 할 때 활성화 된 셰이더 프로그램이 없으므로 아무 것도 설정되지 않습니다. uniformMatrix4fv 문이 문제를 해결하기 직전에

gl.useProgram(program);

을 직접 호출해야합니다.

힌트 : 항상 자바 스크립트 오류 콘솔을 확인하십시오. 적어도 나를 위해 (크롬) 그것은 저에게 그게 말해 줍니 다. 그 문제를 어디에서 찾을지를 알려주는 좋은 지표 인 것은

WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program

입니다.

출처

2014-10-28 11:38:47 BDL

프로그램이 호출되기 전에 getAttribLocation이 작동하기 때문에 이상합니다. –

그게 맞습니다. 그러나 함수를 살펴보면 getAttribLocation에는 program-id를 입력해야하지만 uniformMatrix4fv에는 입력하지 않아야한다는 것을 알게 될 것입니다. :) – BDL

WEBGL에서 학습 행렬을 취하기위한 첫 번째 단계

답변

관련 문제