我正试图从
运行这个例子http://www.w3schools.eu/2012/07/webgl-essentials-part-i/
然而我最终错误很少。我是新手（只是学习），我想知道为什么示例没有运行。我在这里粘贴了代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="~/Site.css" type="text/css" />
<script>
function WebGL(CID, FSID, VSID) {
var canvas = document.getElementById(CID);
if (!canvas.getContext("webgl") && !canvas.getContext("experimental-webgl"))
alert("Your Browser Doesn't Support WebGL");
else {
this.GL = (canvas.getContext("webgl")) ? canvas.getContext("webgl") : canvas.getContext("experimental-webgl");
this.GL.clearColor(1.0, 1.0, 1.0, 1.0);
this.GL.enable(this.GL.DEPTH_TEST);
this.GL.depthFunc(this.GL.LEQUAL);
this.AspectRatio = canvas.width / canvas.height;
var FShader = document.getElementById(FSID);
var VShader = document.getElementById(VSID);
if (!FShader || !VShader)
alert("Error, Could Not Find Shaders");
else {
//Load and Compile Fragment Shader
var Code = LoadShader(FShader);
FShader = this.GL.createShader(this.GL.FRAGMENT_SHADER);
this.GL.shaderSource(FShader, Code);
this.GL.compileShader(FShader);
//Load and Compile Vertex Shader
Code = LoadShader(VShader);
VShader = this.GL.createShader(this.GL.VERTEX_SHADER);
this.GL.shaderSource(VShader, Code);
this.GL.compileShader(VShader);
//Create The Shader Program
this.ShaderProgram = this.GL.createProgram();
this.GL.attachShader(this.ShaderProgram, FShader);
this.GL.attachShader(this.ShaderProgram, VShader);
this.GL.linkProgram(this.ShaderProgram);
this.GL.useProgram(this.ShaderProgram);
//Link Vertex Position Attribute from Shader
this.VertexPosition = this.GL.getAttribLocation(this.ShaderProgram, "VertexPosition");
this.GL.enableVertexAttribArray(this.VertexPosition);
//Link Texture Coordinate Attribute from Shader
this.VertexTexture = this.GL.getAttribLocation(this.ShaderProgram, "TextureCoord");
this.GL.enableVertexAttribArray(this.VertexTexture);
}
}
this.Draw = function (Object, Texture) {
var VertexBuffer = this.GL.createBuffer(); //Create a New Buffer
//Bind it as The Current Buffer
this.GL.bindBuffer(this.GL.ARRAY_BUFFER, VertexBuffer);
// Fill it With the Data
this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Vertices), this.GL.STATIC_DRAW);
//Connect Buffer To Shader's attribute
this.GL.vertexAttribPointer(this.VertexPosition, 3, this.GL.FLOAT, false, 0, 0);
//Repeat For The next Two
var TextureBuffer = this.GL.createBuffer();
this.GL.bindBuffer(this.GL.ARRAY_BUFFER, TextureBuffer);
this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Texture), this.GL.STATIC_DRAW);
this.GL.vertexAttribPointer(this.VertexTexture, 2, this.GL.FLOAT, false, 0, 0);
var TriangleBuffer = this.GL.createBuffer();
this.GL.bindBuffer(this.GL.ELEMENT_ARRAY_BUFFER, TriangleBuffer);
this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Triangles), this.GL.STATIC_DRAW);
//Generate The Perspective Matrix
var PerspectiveMatrix = MakePerspective(45, this.AspectRatio, 1, 10000.0);
var TransformMatrix = MakeTransform(Object);
//Set slot 0 as the active Texture
this.GL.activeTexture(this.GL.TEXTURE0);
//Load in the Texture To Memory
this.GL.bindTexture(this.GL.TEXTURE_2D, Texture);
//Update The Texture Sampler in the fragment shader to use slot 0
this.GL.uniform1i(this.GL.getUniformLocation(this.ShaderProgram, "uSampler"), 0);
//Set The Perspective and Transformation Matrices
var pmatrix = this.GL.getUniformLocation(this.ShaderProgram, "PerspectiveMatrix");
this.GL.uniformMatrix4fv(pmatrix, false, new Float32Array(PerspectiveMatrix));
var tmatrix = this.GL.getUniformLocation(this.ShaderProgram, "TransformationMatrix");
this.GL.uniformMatrix4fv(tmatrix, false, new Float32Array(TransformMatrix));
//Draw The Triangles
//this.GL.drawElements(this.GL.TRIANGLES, Object.Triangles.length, this.GL.UNSIGNED_SHORT, 0);
this.GL.drawArrays(this.GL.TRIANGLES, Object.Vertices, Object.Vertices.length);
};
this.LoadTexture = function (Img) {
//Create a new Texture and Assign it as the active one
var TempTex = this.GL.createTexture();
this.GL.bindTexture(this.GL.TEXTURE_2D, TempTex);
//Flip Positive Y (Optional)
this.GL.pixelStorei(this.GL.UNPACK_FLIP_Y_WEBGL, true);
//Load in The Image
this.GL.texImage2D(this.GL.TEXTURE_2D, 0, this.GL.RGBA, this.GL.RGBA, this.GL.UNSIGNED_BYTE, Img);
//Setup Scaling properties
this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MAG_FILTER, this.GL.LINEAR);
this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MIN_FILTER, this.GL.LINEAR);
//this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_MIN_FILTER, this.GL.LINEAR_MIPMAP_NEAREST);
//this.GL.generateMipmap(this.GL.TEXTURE_2D);
this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_WRAP_S, this.GL.CLAMP_TO_EDGE);
this.GL.texParameteri(this.GL.TEXTURE_2D, this.GL.TEXTURE_WRAP_T, this.GL.CLAMP_TO_EDGE);
//Unbind the texture and return it.
this.GL.bindTexture(this.GL.TEXTURE_2D, null);
return TempTex;
};
}
function LoadShader(Script) {
var Code = "";
var CurrentChild = Script.firstChild;
while (CurrentChild) {
if (CurrentChild.nodeType == CurrentChild.TEXT_NODE)
Code += CurrentChild.textContent;
CurrentChild = CurrentChild.nextSibling;
}
return Code;
}
function MakePerspective(FOV, AspectRatio, Closest, Farest) {
var YLimit = Closest * Math.tan(FOV * Math.PI / 360);
var A = -(Farest + Closest) / (Farest - Closest);
var B = -2 * Farest * Closest / (Farest - Closest);
var C = (2 * Closest) / ((YLimit * AspectRatio) * 2);
var D = (2 * Closest) / (YLimit * 2);
return [
C, 0, 0, 0,
0, D, 0, 0,
0, 0, A, -1,
0, 0, B, 0
];
}
function MakeTransform(Object) {
return [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, -6, 1
];
}
</script>
</head>
<body onload="javascript:Start();">
<script>
var GL;
//Our finished texture
var Texture;
//This will hold the textures image
var TextureImage;
function Start() {
GL = new WebGL("drawArea", "FragmentShader", "VertexShader");
TextureImage = new Image();
TextureImage.onload = function () {
Texture = GL.LoadTexture(TextureImage);
GL.Draw(Cube, Texture);
};
TextureImage.src = "Texture.png";
}
</script>
<div>
<canvas id="drawArea" class="building-container">
</canvas>
</div>
<script id="VertexShader" type="x-shader/x-vertex">
attribute highp vec3 VertexPosition;
attribute highp vec2 TextureCoord;
uniform highp mat4 TransformationMatrix;
uniform highp mat4 PerspectiveMatrix;
varying highp vec2 vTextureCoord;
void main(void) {
gl_Position = PerspectiveMatrix * TransformationMatrix * vec4(VertexPosition, 1.0);
vTextureCoord = TextureCoord;
}
</script>
<script id="FragmentShader" type="x-shader/x-fragment">
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
highp vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = texelColor;
}
</script>
</body>
</html>
答案 0 :(得分：1)
请在此处查看完整的固定文件：http://pastebin.com/PtZXvj5v
1）替换：
this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array(Object.Triangles), this.GL.STATIC_DRAW);
使用：
this.GL.bufferData(this.GL.ELEMENT_ARRAY_BUFFER, new Uint16Array(Object.Triangles), this.GL.STATIC_DRAW);
2）替换：
//Draw The Triangles
//this.GL.drawElements(this.GL.TRIANGLES, Object.Triangles.length, this.GL.UNSIGNED_SHORT, 0);
this.GL.drawArrays(this.GL.TRIANGLES, Object.Vertices, Object.Vertices.length);
使用：
//Draw The Triangles
this.GL.drawElements(this.GL.TRIANGLES, Object.Triangles.length, this.GL.UNSIGNED_SHORT, 0);
//this.GL.drawArrays(this.GL.TRIANGLES, Object.Vertices, Object.Vertices.length);
3）添加Cube对象，因为它完全丢失。
4）我在当地取代了：
TextureImage.src = "Texture.png";
使用：
TextureImage.src = "Texture.jpg";
为了使用一个本地JPG图像作为虚假纹理，因为我没有原始的PNG文件。