admin管理员组文章数量:1290393
I can't find out what I am missing here, why do I get this error? Uncaught ReferenceError: createShaderFromScriptElement is not defined
I got this from a mon tutorial and just pasted it. Browsers: Firefox and Chrome --> same error at both browsers
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zooming via HTML5 Canvas Context</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(0,1,0,1); // green
}
</script>
<script>
window.onload = function() {
// Get A WebGL context
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("experimental-webgl");
// setup a GLSL program
var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
var program = createProgram(gl, [vertexShader, fragmentShader]);
gl.useProgram(program);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
// Create a buffer and put a single clipspace rectangle in
// it (2 triangles)
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0]),
gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
// draw
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
</script>
</body>
</html>
I can't find out what I am missing here, why do I get this error? Uncaught ReferenceError: createShaderFromScriptElement is not defined
I got this from a mon tutorial and just pasted it. Browsers: Firefox and Chrome --> same error at both browsers
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zooming via HTML5 Canvas Context</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(0,1,0,1); // green
}
</script>
<script>
window.onload = function() {
// Get A WebGL context
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("experimental-webgl");
// setup a GLSL program
var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
var program = createProgram(gl, [vertexShader, fragmentShader]);
gl.useProgram(program);
// look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation(program, "a_position");
// Create a buffer and put a single clipspace rectangle in
// it (2 triangles)
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
1.0, 1.0]),
gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
// draw
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
</script>
</body>
</html>
2 Answers
Reset to default 8createShaderFromScript is part of an external script, not something built in.
Whatever demo you were looking at probably included a webgl-utils file such as this one:
http://greggman.github./webgl-fundamentals/webgl/resources/webgl-utils.js
which defines a createShaderFromScript.
Given you have a shader defined like this:
<script id="vertex-shader" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 vertPosition;
void main() {
gl_Position = vec4(vertPosition, 0.0, 1.0);
}
</script>
you can fetch its content and pile a shader from it with this function:
function createShaderFromScriptElement(gl, scriptId, type) {
// Get the script element by its ID
const shaderScript = document.getElementById(scriptId);
if (!shaderScript) {
console.error('Error: Shader script element not found.');
return null;
}
// Extract the content of the script element
const shaderSource = shaderScript.text;
// Create a shader object
const shader = gl.createShader(type);
gl.shaderSource(shader, shaderSource);
gl.pileShader(shader);
// Check if the shader piled successfully
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Error piling the shader: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
then simply provide the id and the type of shader and attach it to your gl context:
var fragmentShader = createShaderFromScriptElement(gl, "vertex-shader", gl.VERTEX_SHADER);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
本文标签： javascriptWebgl Uncaught ReferenceError createShaderFromScriptElement is not definedStack Overflow
版权声明：本文标题：javascript - Webgl Uncaught ReferenceError: createShaderFromScriptElement is not defined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741495709a2381827.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论