use sampler for texture
This commit is contained in:
parent
f1018f6874
commit
40eb2d53c9
60
main.js
60
main.js
|
@ -15,7 +15,7 @@ function main() {
|
||||||
varying lowp vec2 vVertexPosition;
|
varying lowp vec2 vVertexPosition;
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
vVertexPosition = aVertexPosition;
|
vVertexPosition = (aVertexPosition + 1.0)/2.0;
|
||||||
gl_Position = vec4(aVertexPosition.x, aVertexPosition.y, 0.0, 1.0);
|
gl_Position = vec4(aVertexPosition.x, aVertexPosition.y, 0.0, 1.0);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -23,11 +23,10 @@ function main() {
|
||||||
const fsSource = `
|
const fsSource = `
|
||||||
varying lowp vec2 vVertexPosition;
|
varying lowp vec2 vVertexPosition;
|
||||||
|
|
||||||
|
uniform sampler2D uSampler;
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
lowp float x = (vVertexPosition.x + 1.0)/2.0;
|
gl_FragColor = vec4(texture2D(uSampler, vVertexPosition).a, 0.0, 0.0, 1.0);
|
||||||
lowp float y = (vVertexPosition.y + 1.0)/2.0;
|
|
||||||
gl_FragColor = vec4(x, y, mod(x + y, 0.5), 1.0);
|
|
||||||
//gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -62,6 +61,9 @@ function main() {
|
||||||
attribLocations: {
|
attribLocations: {
|
||||||
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
|
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
|
||||||
},
|
},
|
||||||
|
uniformLocation: {
|
||||||
|
sampler: gl.getUniformLocation(shaderProgram, 'uShader'),
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const positionBuffer = gl.createBuffer();
|
const positionBuffer = gl.createBuffer();
|
||||||
|
@ -75,13 +77,44 @@ function main() {
|
||||||
|
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
|
||||||
|
|
||||||
function drawMe() {
|
|
||||||
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
const width = 4;
|
||||||
|
const height = 5;
|
||||||
|
const field = new Uint8Array(width*height);
|
||||||
|
for (var i = 0; i < height; i += 1) {
|
||||||
|
for (var j = 0; j < width; j += 1) {
|
||||||
|
// Each bin is the same size when +1
|
||||||
|
// 0.1, 0.9, 1.0, ..., 255.0, 255.9, 256.0
|
||||||
|
// |------|, ,|-----------|, |--RNG stops here--|
|
||||||
|
field[i*width + j] = Math.floor(Math.random() * (255 + 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(field);
|
||||||
|
|
||||||
|
const texture = gl.createTexture();
|
||||||
|
{
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||||
|
const level = 0;
|
||||||
|
const internalFormat = gl.ALPHA;
|
||||||
|
const border = 0;
|
||||||
|
const srcFormat = gl.ALPHA;
|
||||||
|
const srcType = gl.UNSIGNED_BYTE;
|
||||||
|
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, field);
|
||||||
|
}
|
||||||
|
|
||||||
|
// GL state functions, must be moved to loop if changing
|
||||||
|
gl.clearColor(1.0, 0.753, 0.796, 1.0);
|
||||||
gl.clearDepth(1.0);
|
gl.clearDepth(1.0);
|
||||||
gl.enable(gl.DEPTH_TEST);
|
gl.enable(gl.DEPTH_TEST);
|
||||||
gl.depthFunc(gl.LEQUAL);
|
gl.depthFunc(gl.LEQUAL);
|
||||||
|
gl.disable(gl.CULL_FACE);
|
||||||
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
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);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
||||||
|
|
||||||
|
gl.useProgram(programInfo.program);
|
||||||
|
|
||||||
{ // Binding vertices
|
{ // Binding vertices
|
||||||
const numComponents = 2;
|
const numComponents = 2;
|
||||||
|
@ -94,7 +127,16 @@ function main() {
|
||||||
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPositions);
|
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPositions);
|
||||||
}
|
}
|
||||||
|
|
||||||
gl.useProgram(programInfo.program);
|
function drawMe() {
|
||||||
|
|
||||||
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||||
|
|
||||||
|
{ // Binding uniforms
|
||||||
|
gl.activeTexture(gl.TEXTURE0);
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||||
|
gl.uniform1i(programInfo.uniformLocation.sampler, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const offset = 0;
|
const offset = 0;
|
||||||
const vertexCount = 4;
|
const vertexCount = 4;
|
||||||
|
|
Loading…
Reference in New Issue