WebGL Show Case - by wysaid

WebGL Show Case, WebGL在线快速编辑运行工具. 作者(Author): wysaid

/*Javascript Code Here!*/
/*可以在此处使用 appendLog(logString) 函数将一些信息输出到下方的log box中，如: appendLog("测试");clearLog() 函数可以用来清除log信息。animFrameID为一个全局定时器变量，每次点击运行前将自动清除它*/

var canvasObj = document.getElementById("showcase");
var vshCodeObj = document.getElementById("vshcodearea");
var fshCodeObj = document.getElementById("fshcodearea");

var webgl = canvasObj.getContext("experimental-webgl");
var vshaderSource = vshCodeObj.value;
var fshaderSource = fshCodeObj.value;

var vshObject = webgl.createShader(webgl.VERTEX_SHADER);
var fshObject = webgl.createShader(webgl.FRAGMENT_SHADER);

var initFailed = false;

webgl.shaderSource(vshObject, vshaderSource);
webgl.shaderSource(fshObject, fshaderSource);
webgl.compileShader(vshObject);
webgl.compileShader(fshObject);
if(!webgl.getShaderParameter(vshObject, webgl.COMPILE_STATUS))
{
	appendLog(webgl.getShaderInfoLog(vshObject) + "in vertex shader");
	initFailed = true;
}
if(!webgl.getShaderParameter(fshObject, webgl.COMPILE_STATUS))
{
	appendLog(webgl.getShaderInfoLog(fshObject) + "in fragment shader");
	initFailed = true;
}

var programObject = webgl.createProgram();
webgl.attachShader(programObject, vshObject);
webgl.attachShader(programObject, fshObject);
var v4PositionIndex = 0;
webgl.bindAttribLocation(programObject, v4PositionIndex, "vPosition");
webgl.linkProgram(programObject);
if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS))
{
    uiAppendLog(webgl.getProgramInfoLog(programObject));
    initFailed = true;
}
webgl.useProgram(programObject);

var uniformPointSize = webgl.getUniformLocation(programObject, "pointSize");

var uniformPointRadian = webgl.getUniformLocation(programObject, "pointRadian");

var uniformColor = webgl.getUniformLocation(programObject, "vColor");

function makeOrtho(left, right, bottom, top, nearZ, farZ)
{
	var ral = right + left;
	var rsl = right - left;
	var tsb = top - bottom;
	var tab = top + bottom;
	var fan = farZ + nearZ;
	var fsn = farZ - nearZ;

return [2.0 / rsl, 0.0, 0.0, 0.0,
		0.0, 2.0 / tsb, 0.0, 0.0,
		0.0, 0.0, -2.0 / fsn, 0.0,
		-ral / rsl, -tab / tsb, -fan / fsn, 1.0];
}

var mat4x4 = makeOrtho(0, canvasObj.clientWidth, 0, canvasObj.clientHeight, -1.0, 1.0);

var uniformMat4 = webgl.getUniformLocation(programObject, "uMat");
webgl.uniformMatrix4fv(uniformMat4, false, mat4x4);

var imgObj = document.getElementById("testImage");
var textureObject = webgl.createTexture();

webgl.activeTexture(webgl.TEXTURE1);
webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGBA, webgl.RGBA, webgl.UNSIGNED_BYTE, imgObj);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.LINEAR);
webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.LINEAR);
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);

var uniformTexture = webgl.getUniformLocation(programObject, "imageTexture");
webgl.uniform1i(uniformTexture, 1);

var buffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, buffer);
webgl.enable(webgl.BLEND);
webgl.blendFunc(webgl.SRC_COLOR, webgl.ONE_MINUS_SRC_ALPHA);

var boundX = canvasObj.clientWidth;
var boundY = canvasObj.clientHeight;
var mouseX = boundX / 2.0;
var mouseY = boundY / 2.0;
var dx = Math.random() * 2.0 + 1.0;
var dy = Math.random() * 2.0 + 1.0;
var rad = 0.0;
var size = 100.0;
var dSize = 0.1;
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);

function gogogo()
{
	animFrameID = window.requestAnimationFrame(gogogo);
	webgl.clearColor(0.0, 0.0, 0.0, 1.0);
	webgl.clear(webgl.COLOR_BUFFER_BIT);

webgl.uniform1f(uniformPointSize, size);
	webgl.uniform1f(uniformPointRadian, rad);

var verticesData = [mouseX, mouseY];//[canvasObj.clientWidth / 2.0, canvasObj.clientHeight / 2.0];

webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(verticesData), webgl.STATIC_DRAW);
	webgl.enableVertexAttribArray(v4PositionIndex);
	webgl.vertexAttribPointer(v4PositionIndex, 2, webgl.FLOAT, false, 0, 0);
	webgl.uniform4f(uniformColor, 1.0, 1.0, 1.0, 1.0);
	webgl.viewport(0, 0, canvasObj.clientWidth, canvasObj.clientHeight);
	webgl.drawArrays(webgl.POINTS, 0, 1);

mouseX += dx;
	mouseY += dy;
	if(mouseX < 0.0 || mouseX > boundX)
	{
		dx = -dx;
		mouseX += dx;
	}
	if(mouseY < 0.0 || mouseY > boundY)
	{
		dy = -dy;
		mouseY += dy;
	}
	rad += 0.02;
	if(rad > 1e10) rad = 0.0;
	size += dSize;
	if(size < 80.0 || size > 150)
	{
		dSize = -dSize;
		size += dSize;
	}
}

cancelAnimationFrame(animFrameID);

if(!initFailed)
	gogogo();

本工具提供代码的短期/长期保存（目前未实现），您可以将自己的WebGL代码分享给您的朋友观看哦~
正在初始化...