function LGL(canvsId,vsID,fsID) {
this.glContext = this.createGLContext(canvsId);
this.vsShader = this.createShader(this.glContext, this.ShaderSourceFromScript(vsID), this.glContext.VERTEX_SHADER);
this.fsShader = this.createShader(this.glContext, this.ShaderSourceFromScript(fsID), this.glContext.FRAGMENT_SHADER);
this.glProgram = this.createProgram(this.glContext, this.vsShader, this.fsShader);
this.glContext.useProgram(this.glProgram);
this.camera = {
position: [0, 0, 0],
lookAt: [0, 0, 0],
up: [0, 1, 0]
};
this.rotate = {
x: 0,
y: 0,
z:0
}
this.scaleVector = [0, 0, 0];
this.fragmentColor = false;
this.pointLightPosition = false;
this.eyeDirection = false;
}
LGL.prototype.createGLContext = function (canvasId) {
var canvas = document.getElementById(canvasId);
var names = ["webgl",
"experimental-webgl",
"webkit-3d",
"moz-webgl"];
var gl;
for (var i = 0; i < names.length; ++i) {
try {
gl = canvas.getContext(names[i]);
}
catch (e) {
throw ("contex can't be created!");
}
if (gl) {
gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
break;
}
}
if (gl == null) {
alert("WebGL is not available");
}
return gl;
}
LGL.prototype.createShader = function(gl, str, type){
var shader = gl.createShader(type);
gl.shaderSource(shader,str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
throw gl.getShaderInfoLog(shader);
}
return shader;
}
LGL.prototype.createProgram = function (gl, vshader, fshader) {
var program = gl.createProgram();
gl.attachShader(program, vshader);
gl.attachShader(program, fshader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
throw gl.getProgramInfoLog(program);
}
return program;
}
LGL.prototype.ShaderSourceFromScript = function(scriptID) {
var shaderScript = document.getElementById(scriptID);
if (shaderScript == null) return "";
var sourceCode = "";
var child = shaderScript.firstChild;
while (child) {
if (child.nodeType == child.TEXT_NODE) sourceCode += child.textContent;
child = child.nextSibling;
}
return sourceCode;
}
LGL.prototype.create_vbo = function (jsArrayData, type) {
var webgl = this.glContext;
triangleBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
if (!type) {
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
}
else
{
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), type);
}
return triangleBuffer;
}
LGL.prototype.create_ibo=function(data) {
// 生成缓存对象
var gl = this.glContext;
var ibo = gl.createBuffer();
// 绑定缓存
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
// 向缓存中写入数据
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW);
// 返回生成的IBO
return ibo;
}
// 绑定VBO相关的函数
LGL.prototype.set_attributes = function (attLocations, attSizes) {
var gl = this.glContext;
var programObject = this.glProgram;
// 处理从参数中得到的数组
for (var i in attLocations) {
// 绑定缓存
var currentLocation = gl.getAttribLocation(programObject, attLocations[i]);
// 将attributeLocation设置为有效
gl.enableVertexAttribArray(currentLocation);
//通知并添加attributeLocation
gl.vertexAttribPointer(currentLocation, attSizes[i], gl.FLOAT, false, 0, 0);
}
}
// LGL.prototype.bindVertexBufferIndex = function (triangleBuffer,uniformName) {
// var webgl = this.glContext;
// var programObject = this.glProgram;
// webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
// var v3PositionIndex = webgl.getAttribLocation(programObject, uniformName);
// webgl.enableVertexAttribArray(v3PositionIndex);
// webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);
// }
LGL.prototype.binTexture2DFromElement = function (imgElementId) {
var webgl = this.glContext;
textureObject = webgl.createTexture();
webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
var img = document.getElementById(imgElementId);
webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, img);
return textureObject;
}
LGL.prototype.setColor = function ()
{
var fragmentColorLocation = this.glContext.getUniformLocation(this.glProgram, "fragmentColor");
this.glContext.uniform4fv(fragmentColorLocation, this.fragmentColor);
}
LGL.prototype.setPointLightPosition = function(){
var uniLocation = this.glContext.getUniformLocation(this.glProgram, "lightPosition");
this.glContext.uniform3fv(uniLocation, this.pointLightPosition);
}
LGL.prototype.eyeDirection = function ()
{
var uniLocation = this.glContext.getUniformLocation(this.glProgram, "eyeDirection");
this.glContext.uniform3fv(uniLocation, this.eyeDirection);
}
LGL.setUniformData = function (UniformName,data)
{
}
LGL.prototype.setMVPMatrix = function (UniformName,type) {
var webgl = this.glContext;
// 各种矩阵的生成和初始化
var mMatrix = mat4.create();
var vMatrix = mat4.create();
var pMatrix = mat4.create();
var mvpMatrix = mat4.create();
// 视图变换坐标矩阵
mat4.lookAt(vMatrix,this.camera.position, this.camera.lookAt, this.camera.up);
// 投影坐标变换矩阵
mat4.perspective(pMatrix, 90, webgl.drawingBufferWidth / webgl.drawingBufferHeight, 0.1, 100);
// 各矩阵想成,得到最终的坐标变换矩阵
mat4.multiply(mvpMatrix,pMatrix, vMatrix);
mat4.multiply(mvpMatrix, mvpMatrix, mMatrix);
mat4.rotateX(mvpMatrix, mvpMatrix, this.rotate.x);
mat4.rotateY(mvpMatrix, mvpMatrix, this.rotate.y);
mat4.rotateZ(mvpMatrix, mvpMatrix, this.rotate.z);
mat4.scale(mvpMatrix, mvpMatrix, this.scaleVector);
//console.log(mvpMatrix);
// uniformLocation的获取
var uniLocation = this.glContext.getUniformLocation(this.glProgram, UniformName);
// 向uniformLocation中传入坐标变换矩阵
if (type == "MVP") {
this.glContext.uniformMatrix4fv(uniLocation, false, mvpMatrix);
}
else if (type == "M")
{
this.glContext.uniformMatrix4fv(uniLocation, false, mvpMatrix);
}
else if (type == "I") {
var inverseMatrix = mat4.create();
mat4.invert(inverseMatrix, mvpMatrix);
this.glContext.uniformMatrix4fv(uniLocation, false, inverseMatrix);
}
}
LGL.prototype.clearCanvas = function ()
{
var webgl = this.glContext;
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
}
/*var textureObject = lgl.binTexture2DFromElement('myTexture');
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);
webgl.activeTexture(webgl.TEXTURE0);
webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
samplerIndex = webgl.getUniformLocation(programObject, "s_texture");
webgl.uniform1i(samplerIndex, 0);*/
LGL.prototype.sphere = function(row, column, rad, color) {
var pos = new Array(), nor = new Array(),
col = new Array(), idx = new Array();
for (var i = 0; i <= row; i++) {
var r = Math.PI / row * i;
var ry = Math.cos(r);
var rr = Math.sin(r);
for (var ii = 0; ii <= column; ii++) {
var tr = Math.PI * 2 / column * ii;
var tx = rr * rad * Math.cos(tr);
var ty = ry * rad;
var tz = rr * rad * Math.sin(tr);
var rx = rr * Math.cos(tr);
var rz = rr * Math.sin(tr);
if (color) {
var tc = color;
} else {
tc = hsva(360 / row * i, 1, 1, 1);
}
pos.push(tx, ty, tz);
nor.push(rx, ry, rz);
col.push(tc[0], tc[1], tc[2], tc[3]);
}
}
r = 0;
for (i = 0; i < row; i++) {
for (ii = 0; ii < column; ii++) {
r = (column + 1) * i + ii;
idx.push(r, r + 1, r + column + 2);
idx.push(r, r + column + 2, r + column + 1);
}
}
return { p: pos, n: nor, c: col, i: idx };
}
var lgl = new LGL('myCanvas', "shader-vs", "shader-fs");//完成上下文全部程序的编译链接
//定义缓存数据
var jsArrayData = [0, 0.8, 0.5,
-0.5, -0.5, 0.5,
0.5, 0.5, 0,
0, 0, -0.6
];
var jsArrayDataIndex = [
0, 1, 2, 3, 1
];
lgl.fragmentColor = vec4.fromValues(1, 1, 0, 1);
lgl.pointLightPosition = vec3.fromValues(5,5,5);
lgl.eyeDirection = vec3.fromValues(1, 1, 1);
var sphereData = lgl.sphere(64, 64, 2.0, [0.25, 0.25, 0.75, 1.0]);
lgl.create_vbo(jsArrayData);
lgl.set_attributes(["position"], [3]);
lgl.create_ibo(jsArrayDataIndex);
// 球体用IBO的生成
function render() {
lgl.setMVPMatrix('mvpMatrix', "MVP");
lgl.clearCanvas();
lgl.glContext.drawElements(lgl.glContext.TRIANGLE_STRIP, jsArrayDataIndex.length, lgl.glContext.UNSIGNED_SHORT, 0);
lgl.glContext.flush();
}
render(jsArrayData);
//webgl.drawArrays(webgl.LINE_STRIP, 0, 3);
//webgl.drawArrays(webgl.POINTS, 0, 3);
//webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(function () {
//lgl.camera.position[0] += 0.01;
//lgl.camera.position[1] += 0.01;
lgl.camera.position[2] = 5;
//lgl.camera.up[1] += 0.01;
lgl.rotate.x += 0.01;
//lgl.rotate.y += 0.01;
lgl.scaleVector[0] += 0.01;
lgl.scaleVector[1] += 0.01;
lgl.scaleVector[2] += 0.01;
//lgl.rotate.z += 0.1;
render(jsArrayData);
requestAnimationFrame(arguments.callee);
});
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="/Scripts/gl-matrix.js"></script>
<script type="text/javascript" src="/Scripts/three.js"></script>
<script type="text/javascript" src="/Scripts/csdn.js"></script>
<script type="text/javascript" src="/Scripts/GL.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 position;
attribute vec3 normal;
attribute vec4 color;
uniform mat4 mvpMatrix;
varying vec2 v_texCoord;
varying vec3 vPosition;
varying vec3 vNormal;
varying vec4 vColor;
void main(void)
{
vPosition = (mvpMatrix * vec4(position, 1.0)).xyz;
vNormal = normal;
vColor = color;
//v_texCoord = vec2((position.x+1.0)/2.0, 1.0-(position.y+1.0)/2.0);
gl_Position =mvpMatrix * vec4(position, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
uniform sampler2D s_texture;
varying vec2 v_texCoord;
void main(void)
{
gl_FragColor = vec4(1,0,0,1);
}
</script>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid red;" width='600px' height='600px'></canvas>
<img style="display: none;" id="myTexture" src='texture.bmp'>
</body>
<script type="text/javascript" src="/Scripts/index.js"></script>
</html>
this.glContext = this.createGLContext(canvsId);
this.vsShader = this.createShader(this.glContext, this.ShaderSourceFromScript(vsID), this.glContext.VERTEX_SHADER);
this.fsShader = this.createShader(this.glContext, this.ShaderSourceFromScript(fsID), this.glContext.FRAGMENT_SHADER);
this.glProgram = this.createProgram(this.glContext, this.vsShader, this.fsShader);
this.glContext.useProgram(this.glProgram);
this.camera = {
position: [0, 0, 0],
lookAt: [0, 0, 0],
up: [0, 1, 0]
};
this.rotate = {
x: 0,
y: 0,
z:0
}
this.scaleVector = [0, 0, 0];
this.fragmentColor = false;
this.pointLightPosition = false;
this.eyeDirection = false;
}
LGL.prototype.createGLContext = function (canvasId) {
var canvas = document.getElementById(canvasId);
var names = ["webgl",
"experimental-webgl",
"webkit-3d",
"moz-webgl"];
var gl;
for (var i = 0; i < names.length; ++i) {
try {
gl = canvas.getContext(names[i]);
}
catch (e) {
throw ("contex can't be created!");
}
if (gl) {
gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
break;
}
}
if (gl == null) {
alert("WebGL is not available");
}
return gl;
}
LGL.prototype.createShader = function(gl, str, type){
var shader = gl.createShader(type);
gl.shaderSource(shader,str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
throw gl.getShaderInfoLog(shader);
}
return shader;
}
LGL.prototype.createProgram = function (gl, vshader, fshader) {
var program = gl.createProgram();
gl.attachShader(program, vshader);
gl.attachShader(program, fshader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
throw gl.getProgramInfoLog(program);
}
return program;
}
LGL.prototype.ShaderSourceFromScript = function(scriptID) {
var shaderScript = document.getElementById(scriptID);
if (shaderScript == null) return "";
var sourceCode = "";
var child = shaderScript.firstChild;
while (child) {
if (child.nodeType == child.TEXT_NODE) sourceCode += child.textContent;
child = child.nextSibling;
}
return sourceCode;
}
LGL.prototype.create_vbo = function (jsArrayData, type) {
var webgl = this.glContext;
triangleBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
if (!type) {
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
}
else
{
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), type);
}
return triangleBuffer;
}
LGL.prototype.create_ibo=function(data) {
// 生成缓存对象
var gl = this.glContext;
var ibo = gl.createBuffer();
// 绑定缓存
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
// 向缓存中写入数据
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW);
// 返回生成的IBO
return ibo;
}
// 绑定VBO相关的函数
LGL.prototype.set_attributes = function (attLocations, attSizes) {
var gl = this.glContext;
var programObject = this.glProgram;
// 处理从参数中得到的数组
for (var i in attLocations) {
// 绑定缓存
var currentLocation = gl.getAttribLocation(programObject, attLocations[i]);
// 将attributeLocation设置为有效
gl.enableVertexAttribArray(currentLocation);
//通知并添加attributeLocation
gl.vertexAttribPointer(currentLocation, attSizes[i], gl.FLOAT, false, 0, 0);
}
}
// LGL.prototype.bindVertexBufferIndex = function (triangleBuffer,uniformName) {
// var webgl = this.glContext;
// var programObject = this.glProgram;
// webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
// var v3PositionIndex = webgl.getAttribLocation(programObject, uniformName);
// webgl.enableVertexAttribArray(v3PositionIndex);
// webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);
// }
LGL.prototype.binTexture2DFromElement = function (imgElementId) {
var webgl = this.glContext;
textureObject = webgl.createTexture();
webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
var img = document.getElementById(imgElementId);
webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, img);
return textureObject;
}
LGL.prototype.setColor = function ()
{
var fragmentColorLocation = this.glContext.getUniformLocation(this.glProgram, "fragmentColor");
this.glContext.uniform4fv(fragmentColorLocation, this.fragmentColor);
}
LGL.prototype.setPointLightPosition = function(){
var uniLocation = this.glContext.getUniformLocation(this.glProgram, "lightPosition");
this.glContext.uniform3fv(uniLocation, this.pointLightPosition);
}
LGL.prototype.eyeDirection = function ()
{
var uniLocation = this.glContext.getUniformLocation(this.glProgram, "eyeDirection");
this.glContext.uniform3fv(uniLocation, this.eyeDirection);
}
LGL.setUniformData = function (UniformName,data)
{
}
LGL.prototype.setMVPMatrix = function (UniformName,type) {
var webgl = this.glContext;
// 各种矩阵的生成和初始化
var mMatrix = mat4.create();
var vMatrix = mat4.create();
var pMatrix = mat4.create();
var mvpMatrix = mat4.create();
// 视图变换坐标矩阵
mat4.lookAt(vMatrix,this.camera.position, this.camera.lookAt, this.camera.up);
// 投影坐标变换矩阵
mat4.perspective(pMatrix, 90, webgl.drawingBufferWidth / webgl.drawingBufferHeight, 0.1, 100);
// 各矩阵想成,得到最终的坐标变换矩阵
mat4.multiply(mvpMatrix,pMatrix, vMatrix);
mat4.multiply(mvpMatrix, mvpMatrix, mMatrix);
mat4.rotateX(mvpMatrix, mvpMatrix, this.rotate.x);
mat4.rotateY(mvpMatrix, mvpMatrix, this.rotate.y);
mat4.rotateZ(mvpMatrix, mvpMatrix, this.rotate.z);
mat4.scale(mvpMatrix, mvpMatrix, this.scaleVector);
//console.log(mvpMatrix);
// uniformLocation的获取
var uniLocation = this.glContext.getUniformLocation(this.glProgram, UniformName);
// 向uniformLocation中传入坐标变换矩阵
if (type == "MVP") {
this.glContext.uniformMatrix4fv(uniLocation, false, mvpMatrix);
}
else if (type == "M")
{
this.glContext.uniformMatrix4fv(uniLocation, false, mvpMatrix);
}
else if (type == "I") {
var inverseMatrix = mat4.create();
mat4.invert(inverseMatrix, mvpMatrix);
this.glContext.uniformMatrix4fv(uniLocation, false, inverseMatrix);
}
}
LGL.prototype.clearCanvas = function ()
{
var webgl = this.glContext;
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
}
/*var textureObject = lgl.binTexture2DFromElement('myTexture');
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);
webgl.activeTexture(webgl.TEXTURE0);
webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
samplerIndex = webgl.getUniformLocation(programObject, "s_texture");
webgl.uniform1i(samplerIndex, 0);*/
LGL.prototype.sphere = function(row, column, rad, color) {
var pos = new Array(), nor = new Array(),
col = new Array(), idx = new Array();
for (var i = 0; i <= row; i++) {
var r = Math.PI / row * i;
var ry = Math.cos(r);
var rr = Math.sin(r);
for (var ii = 0; ii <= column; ii++) {
var tr = Math.PI * 2 / column * ii;
var tx = rr * rad * Math.cos(tr);
var ty = ry * rad;
var tz = rr * rad * Math.sin(tr);
var rx = rr * Math.cos(tr);
var rz = rr * Math.sin(tr);
if (color) {
var tc = color;
} else {
tc = hsva(360 / row * i, 1, 1, 1);
}
pos.push(tx, ty, tz);
nor.push(rx, ry, rz);
col.push(tc[0], tc[1], tc[2], tc[3]);
}
}
r = 0;
for (i = 0; i < row; i++) {
for (ii = 0; ii < column; ii++) {
r = (column + 1) * i + ii;
idx.push(r, r + 1, r + column + 2);
idx.push(r, r + column + 2, r + column + 1);
}
}
return { p: pos, n: nor, c: col, i: idx };
}
var lgl = new LGL('myCanvas', "shader-vs", "shader-fs");//完成上下文全部程序的编译链接
//定义缓存数据
var jsArrayData = [0, 0.8, 0.5,
-0.5, -0.5, 0.5,
0.5, 0.5, 0,
0, 0, -0.6
];
var jsArrayDataIndex = [
0, 1, 2, 3, 1
];
lgl.fragmentColor = vec4.fromValues(1, 1, 0, 1);
lgl.pointLightPosition = vec3.fromValues(5,5,5);
lgl.eyeDirection = vec3.fromValues(1, 1, 1);
var sphereData = lgl.sphere(64, 64, 2.0, [0.25, 0.25, 0.75, 1.0]);
lgl.create_vbo(jsArrayData);
lgl.set_attributes(["position"], [3]);
lgl.create_ibo(jsArrayDataIndex);
// 球体用IBO的生成
function render() {
lgl.setMVPMatrix('mvpMatrix', "MVP");
lgl.clearCanvas();
lgl.glContext.drawElements(lgl.glContext.TRIANGLE_STRIP, jsArrayDataIndex.length, lgl.glContext.UNSIGNED_SHORT, 0);
lgl.glContext.flush();
}
render(jsArrayData);
//webgl.drawArrays(webgl.LINE_STRIP, 0, 3);
//webgl.drawArrays(webgl.POINTS, 0, 3);
//webgl.drawArrays(webgl.TRIANGLE_STRIP, 0, 4);
requestAnimationFrame(function () {
//lgl.camera.position[0] += 0.01;
//lgl.camera.position[1] += 0.01;
lgl.camera.position[2] = 5;
//lgl.camera.up[1] += 0.01;
lgl.rotate.x += 0.01;
//lgl.rotate.y += 0.01;
lgl.scaleVector[0] += 0.01;
lgl.scaleVector[1] += 0.01;
lgl.scaleVector[2] += 0.01;
//lgl.rotate.z += 0.1;
render(jsArrayData);
requestAnimationFrame(arguments.callee);
});
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="/Scripts/gl-matrix.js"></script>
<script type="text/javascript" src="/Scripts/three.js"></script>
<script type="text/javascript" src="/Scripts/csdn.js"></script>
<script type="text/javascript" src="/Scripts/GL.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 position;
attribute vec3 normal;
attribute vec4 color;
uniform mat4 mvpMatrix;
varying vec2 v_texCoord;
varying vec3 vPosition;
varying vec3 vNormal;
varying vec4 vColor;
void main(void)
{
vPosition = (mvpMatrix * vec4(position, 1.0)).xyz;
vNormal = normal;
vColor = color;
//v_texCoord = vec2((position.x+1.0)/2.0, 1.0-(position.y+1.0)/2.0);
gl_Position =mvpMatrix * vec4(position, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
uniform sampler2D s_texture;
varying vec2 v_texCoord;
void main(void)
{
gl_FragColor = vec4(1,0,0,1);
}
</script>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid red;" width='600px' height='600px'></canvas>
<img style="display: none;" id="myTexture" src='texture.bmp'>
</body>
<script type="text/javascript" src="/Scripts/index.js"></script>
</html>