index.html
<!doctype html>
<html>
<head>
<style>
canvas {
border: 1px solid #000000;
}
</style>
<script type="text/javascript" src="image.js"></script>
</head>
<body>
<p>
<b>scale value:</b>
<input id="scalex" type="range" min="-2" max="2" value="1" step="0.1" oninput="updatefunc()" />
<b id="scalevaluex">0</b>
<input id="scaley" type="range" min="-2" max="2" value="1" step="0.1" oninput="updatefunc()" />
<b id="scalevaluey">0</b>
</p>
<p>
<b>offset value:</b>
<input id="offsetx" type="range" min="-1" max="1" value="0" step="0.1" oninput="updatefunc()" />
<b id="offsetvaluex">0</b>
<input id="offsety" type="range" min="-1" max="1" value="0" step="0.1" oninput="updatefunc()" />
<b id="offsetvaluey">0</b>
</p>
<p>
<b>rotate value:</b>
<input id="rotate" type="range" min="0" max="6.28" value="0" step="0.01" oninput="updatefunc()" />
<b id="rotatevalue">0</b>
</p>
<canvas id="tri" width="600" height="600" style="width:300px; height:300px">
</canvas>
<script id="vertex_shader" type="myshader">
// Vertex Shader
precision mediump int;
precision mediump float;
uniform mat3 u_all;
attribute vec2 a_PointVertex; // 顶点坐标
attribute vec2 a_PointUV; // 顶点UV
varying vec2 uv;
void main() {
vec3 coord = u_all * vec3(a_PointVertex, 1.0);
gl_Position = vec4(coord.x, coord.y, 0.0, 1.0);
uv = a_PointUV;
uv.y = 1.0 - uv.y;
}
</script>
<script id="fragment_shader" type="myshader">
// Fragment shader
precision mediump int;
precision mediump float;
uniform sampler2D u_funny_cat; // 有趣的猫的图片
varying vec2 uv;
void main() {
vec4 sample_color = texture2D(u_funny_cat, uv);
gl_FragColor = vec4(sample_color.xyz, 1.0);
}
</script>
<script type="text/javascript">
var pointCanvas = document.getElementById('tri'); // 我们的纸
var gl = pointCanvas.getContext('webgl', { preserveDrawingBuffer: true }); // 我们的笔
var data = [-1, -1, 0, 0,
1, -1, 1, 0,
0, 1, 0.5, 1
];
var dataArr = new Float32Array(data);
var pointCount = 3;
buffer_point = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer_point);
gl.bufferData(gl.ARRAY_BUFFER, dataArr, gl.STATIC_DRAW);
//
var vertex_shader_code = document.getElementById('vertex_shader').textContent;
var vertex_shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertex_shader, vertex_shader_code);
gl.compileShader(vertex_shader);
// 检查shader错误
const v_compiled = gl.getShaderParameter(vertex_shader, gl.COMPILE_STATUS);
if (!v_compiled) {
const v_theError = gl.getShaderInfoLog(vertex_shader);
console.error(v_theError);
gl.deleteShader(vertex_shader);
}
//
var fragment_shader_code = document.getElementById('fragment_shader').textContent;
var fragment_shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragment_shader, fragment_shader_code);
gl.compileShader(fragment_shader);
// 检查shader错误
const f_compiled = gl.getShaderParameter(fragment_shader, gl.COMPILE_STATUS);
if (!f_compiled) {
const f_theError = gl.getShaderInfoLog(fragment_shader);
console.error(f_theError);
gl.deleteShader(fragment_shader);
}
//
var program = gl.createProgram();
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
gl.linkProgram(program);
gl.useProgram(program);
// 创建加载纹理图 funny cat
CreateTextureAndLoadImage(gl);
// attributes location
var a_PointVertex = gl.getAttribLocation(program, 'a_PointVertex');
var a_PointUV = gl.getAttribLocation(program, 'a_PointUV');
gl.vertexAttribPointer(a_PointVertex, 2, gl.FLOAT, false, 16, 0);
gl.enableVertexAttribArray(a_PointVertex);
gl.vertexAttribPointer(a_PointUV, 2, gl.FLOAT, false, 16, 8);
gl.enableVertexAttribArray(a_PointUV);
</script>
<script>
// uniforms location
var u_all_loc = gl.getUniformLocation(program, "u_all");
var u_FunnyCatLocation = gl.getUniformLocation(program, "u_funny_cat");
var scaleDomX = document.getElementById("scalex");
var scaleValueDomX = document.getElementById("scalevaluex");
var scaleDomY = document.getElementById("scaley");
var scaleValueDomY = document.getElementById("scalevaluey");
var offsetDomX = document.getElementById("offsetx");
var offsetValueDomX = document.getElementById("offsetvaluex");
var offsetDomY = document.getElementById("offsety");
var offsetValueDomY = document.getElementById("offsetvaluey");
var rotateDom = document.getElementById("rotate");
var rotateValueDom = document.getElementById("rotatevalue");
function genMat3ForGL(a, b, alpha, A, B) {
let mat3 = [
a * Math.cos(alpha), a * Math.sin(alpha), 0,
-b * Math.sin(alpha), b * Math.cos(alpha), 0,
A, B, 1,
];
return new Float32Array(mat3);
}
function updatefunc() {
gl.uniformMatrix3fv(u_all_loc, false, genMat3ForGL(scaleDomX.value,
scaleDomY.value, rotateDom.value, offsetDomX.value, offsetDomY.value
));
if (images_loaing_progress != 100) {
return;
}
gl.uniform1i(u_FunnyCatLocation, 0);
scaleValueDomX.innerText = scaleDomX.value;
offsetValueDomX.innerText = offsetDomX.value;
scaleValueDomY.innerText = scaleDomY.value;
offsetValueDomY.innerText = offsetDomY.value;
rotateValueDom.innerText = rotateDom.value;
gl.enable(gl.CULL_FACE);
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, pointCount);
}
updatefunc();
</script>
</script>
</body>
</html>
image.js
var images_loaing_progress = 0;
function isPowerOf2(value) {
return (value & (value - 1)) === 0;
}
function CreateTextureAndLoadImage(gl) {
// 在 WebGL 里创建一个 texture
let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// 异步加载一张图片，存进刚刚创建好的 texture 里
var image = new Image();
image.src = "images/funny-cat.jpeg";
image.addEventListener('load', function () {
// gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
gl.generateMipmap(gl.TEXTURE_2D);
} else {
console.log("image loading , not Power of 2");
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
}
images_loaing_progress = 100;
});
return texture;
}
images 目录，放一张你自己的图片
我的是这样：
images/funny-cat.jpeg
