html网页盒子怎么做成纹理,HTML5+WEBGL入门程序(纹理贴图中的过滤设置)

最新推荐文章于 2024-03-07 16:13:39 发布

爱燃烧

最新推荐文章于 2024-03-07 16:13:39 发布

阅读量151

点赞数

文章标签： html网页盒子怎么做成纹理

WebGL中文教程

src="Oak3D_v_0_5_5.js">

precision mediump

float;

varying vec2

vTextureCoord;

uniform sampler2D

uSampler;

void main(void) {

gl_FragColor = texture2D(uSampler,

vTextureCoord);

}

attribute vec3

aVertexPosition;

attribute vec2

aTextureCoord;

uniform mat4

uMVMatrix;

uniform mat4

uPMatrix;

varying vec2

vTextureCoord;

void main(void) {

gl_Position = uPMatrix * uMVMatrix *

vec4(aVertexPosition, 1.0);

vTextureCoord = aTextureCoord;

}

var gl;

function initGL(canvas)

{

try {

gl =

canvas.getContext("experimental-webgl");

gl.viewportWidth = canvas.width;

gl.viewportHeight = canvas.height;

} catch (e) {

}

if (!gl) {

alert("抱歉，不能初始化webGL！");

}

function getShader(gl,

id) {

var shaderScript =

document.getElementByIdx_x(id);

if (!shaderScript) {

return

null;

}

var str = "";

var k = shaderScript.firstChild;

while (k) {

(k.nodeType == 3) {

str += k.textContent;

}

k =

k.nextSibling;

}

var shader;

if (shaderScript.type == "x-shader/x-fragment")

{

shader =

gl.createShader(gl.FRAGMENT_SHADER);

} else if (shaderScript.type ==

"x-shader/x-vertex") {

shader =

gl.createShader(gl.VERTEX_SHADER);

} else {

return

null;

}

gl.shaderSource(shader, str);

gl.compileShader(shader);

if (!gl.getShaderParameter(shader,

gl.COMPILE_STATUS)) {

alert(gl.getShaderInfoLog(shader));

return

null;

}

return shader;

}

var shaderProgram;

function initShaders()

{

var fragmentShader = getShader(gl,

"shader-fs");

var vertexShader = getShader(gl,

"shader-vs");

shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram,

vertexShader);

gl.attachShader(shaderProgram,

fragmentShader);

gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram,

gl.LINK_STATUS)) {

alert("Could not initialise shaders");

}

gl.useProgram(shaderProgram);

shaderProgram.vertexPositionAttribute =

gl.getAttribLocation(shaderProgram, "aVertexPosition");

gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

shaderProgram.textureCoordAttribute =

gl.getAttribLocation(shaderProgram, "aTextureCoord");

gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

shaderProgram.pMatrixUniform =

gl.getUniformLocation(shaderProgram, "uPMatrix");

shaderProgram.mvMatrixUniform =

gl.getUniformLocation(shaderProgram, "uMVMatrix");

shaderProgram.samplerUniform =

gl.getUniformLocation(shaderProgram, "uSampler");

}

var currentlyPressedKeys = {};

function

handleKeyDown(event) {

currentlyPressedKeys[event.keyCode] =

true;

if (String.fromCharCode(event.keyCode) == "F")

{

filter +=

if (filter

== 3) {

filter = 0;

}

function

handleKeyUp(event) {

currentlyPressedKeys[event.keyCode] =

false;

}

function handleKeys() {

if (currentlyPressedKeys[33]) {

z -=

0.05;

}

if (currentlyPressedKeys[34]) {

z +=

0.05;

}

function handleLoadedTexture(textures) {

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,

true);

gl.bindTexture(gl.TEXTURE_2D,

textures[0]);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,

gl.RGBA, gl.UNSIGNED_BYTE, textures[0].image);