Middle of draw code:
for(var t = 0;t < object.textures.length;t++) {
if(object.custom.gl_texture == null) {
world.GL.gl.activeTexture(world.GL.gl['TEXTURE' + t]);
if (t == 1) { var gl = world.GL.gl;
var tex = gl.createTexture();
// world.GL.gl.bindTexture(world.GL.gl.TEXTURE_CUBE_MAP, object.textures[t]);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, tex);
// gl.bindTexture(gl.TEXTURE_2D, texture);
// gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
// gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
// gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
// 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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
// gl.bindTexture(gl.TEXTURE_2D, null);
// Get A 2D context
/** #type {Canvas2DRenderingContext} */
if (typeof window.TEST == 'undefined') {
window.TEST = null;
var T = document.createElement("canvas");
T.id = 'blabla';
document.body.append(T);
} else {
var T = document.getElementById("blabla");
}
const ctx = T.getContext("2d");
ctx.canvas.width = 128;
ctx.canvas.height = 128;
const faceInfos = [
{ target: gl.TEXTURE_CUBE_MAP_POSITIVE_X, faceColor: '#F00', textColor: '#0FF', text: '+X' },
{ target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, faceColor: '#FF0', textColor: '#00F', text: '-X' },
{ target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, faceColor: '#0F0', textColor: '#F0F', text: '+Y' },
{ target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, faceColor: '#0FF', textColor: '#F00', text: '-Y' },
{ target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, faceColor: '#00F', textColor: '#FF0', text: '+Z' },
{ target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, faceColor: '#F0F', textColor: '#0F0', text: 'CUBEMAP' },
];
faceInfos.forEach((faceInfo) => {
const {target, faceColor, textColor, text} = faceInfo;
gen2DTextFace(ctx, faceColor, textColor, text);
// Upload the canvas to the cubemap face.
const level = 0;
const internalFormat = gl.RGBA;
const format = gl.RGBA;
const type = gl.UNSIGNED_BYTE;
gl.texImage2D(target, level, internalFormat, format, type, ctx.canvas);
});
gl.generateMipmap(gl.TEXTURE_CUBE_MAP);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
} //
// App.tools.cubeMapTextures(world.GL.gl);
else {
// ORI
world.GL.gl.bindTexture(world.GL.gl.TEXTURE_2D, object.textures[t]);
world.GL.gl.pixelStorei(world.GL.gl.UNPACK_FLIP_Y_WEBGL, false);
world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MAG_FILTER, world.GL.gl.NEAREST);
world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MIN_FILTER, world.GL.gl.NEAREST);
world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_S, world.GL.gl.CLAMP_TO_EDGE);
world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_T, world.GL.gl.CLAMP_TO_EDGE);
}
// -- Allocate storage for the texture ORI COMMENTED
// world.GL.gl.texStorage2D(world.GL.gl.TEXTURE_2D, 1, world.GL.gl.RGB8, 512, 512);
// world.GL.gl.texSubImage2D(world.GL.gl.TEXTURE_2D, 0, 0, 0, world.GL.gl.RGB, world.GL.gl.UNSIGNED_BYTE, image);
// world.GL.gl.generateMipmap(world.GL.gl.TEXTURE_2D);
// ADDED HERE cubeMapSampler
world.GL.gl.uniform1i(object.shaderProgram.uCubeMapSampler, t);
} else {
object.custom.gl_texture(object, t);
}
}
My shader vertex:
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;
uniform vec3 uAmbientColor;
uniform vec3 uLightingDirection;
uniform vec3 uDirectionalColor;
uniform bool uUseLighting;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
// Spot
uniform vec3 u_lightWorldPosition;
// uniform vec3 u_viewWorldPosition;
// uniform mat4 u_world;
// uniform mat4 u_worldViewProjection;
// uniform mat4 u_worldInverseTranspose;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
void main(void) {
// orient the normals and pass to the fragment shader
// v_normal = mat3(u_worldInverseTranspose) * aVertexNormal;
v_normal = mat3(uNMatrix) * aVertexNormal;
// uniform mat4 uMVMatrix;
// uniform mat4 uPMatrix;
// uniform mat3 uNMatrix;
// compute the world position of the surfoace
vec3 surfaceWorldPosition = (uNMatrix * aVertexPosition).xyz;
// compute the vector of the surface to the light
// and pass it to the fragment shader
v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
// compute the vector of the surface to the view/camera
// and pass it to the fragment shader
v_surfaceToView = (uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0)).xyz - surfaceWorldPosition;
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
if (!uUseLighting) {
vLightWeighting = vec3(1.0, 1.0, 1.0);
}
else {
vec3 transformedNormal = uNMatrix * aVertexNormal;
float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
}
}
Fragment shader:
// shader for 1 textures
precision mediump float;
precision highp float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
uniform float textureSamplerAmount[1];
int MixOperandString = 0;
uniform sampler2D uSampler;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform sampler2D uSampler3;
uniform sampler2D uSampler4;
uniform sampler2D uSampler5;
uniform sampler2D uSampler6;
uniform sampler2D uSampler7;
// The CubeMap texture.
uniform samplerCube uCubeMapSampler;
varying vec3 v_normal;
void main(void) {
// normalize
//vec3 normal = normalize(v_normal);
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor1 = texture2D(uSampler1, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor2 = texture2D(uSampler2, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor3 = texture2D(uSampler3, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor4 = texture2D(uSampler4, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor5 = texture2D(uSampler5, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor6 = texture2D(uSampler6, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor7 = texture2D(uSampler7, vec2(vTextureCoord.s, vTextureCoord.t));
if (1 == 1) {
// gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); // ori
// gl_FragColor = textureCube(uCubeMapSampler, normal);
gl_FragColor = vec4( smoothstep(textureColor.r, textureColor.b,textureColor.g ) , smoothstep(textureColor.r, textureColor.b,textureColor.g ) ,0 ,smoothstep(textureColor.r, textureColor.b,textureColor.g ) );
} else if (1 == 2) {
if ( 0 == 0) {
gl_FragColor = vec4( (textureColor.rgb * textureColor1.rgb) * vLightWeighting, textureColor.a);
} else if (0 == 1) {
gl_FragColor = vec4( (textureColor.rgb / textureColor1.rgb) * vLightWeighting, textureColor.a);
}
} else if (1 == 3) {
if (0 == 0) {
gl_FragColor =vec4( (textureColor.rgb * textureColor1.rgb * textureColor2.rgb ) * vLightWeighting, textureColor.a);
}
else if (0 == 1) {
gl_FragColor = vec4( (textureColor.rgb * textureColor1.rgb / textureColor2.rgb ) * vLightWeighting, textureColor.a);
}
} else if (1 == 4) {
if (0 == 0) {
gl_FragColor = textureColor * textureColor1 * textureColor2 * textureColor3;
}
else if (0 == 1) {
gl_FragColor = textureColor / textureColor1 / textureColor2 / textureColor3;
}
}
}
Any suggestion ?
I try to push drawing but get error logs:
GL_INVALID_OPERATION: Two textures of different types use the same sampler location.
I got faild shader compile if i add to the fragment shader
void main(void) {
// normalize
//vec3 normal = normalize(v_normal);
...
}
LAST UPDATE:
My uCubeMapSampler is undefined but i dont know why.
if (null !== gl.getUniformLocation(shaderProgram, 'uCubeMapSampler')) {
console.log('NULL ??? ');
shaderProgram.uCubeMapSampler = gl.getUniformLocation(shaderProgram, 'uCubeMapSampler');
}
Related
I have a problem with framebuffer attachments. Basically, my framebuffers always worked fine, but for my last project I needed to initialize them with some color values. So I created an attachment with a texture containing the color values I wanted. This leads to some really unexplainable (to me) behaviour, you can see in the code below that I create a framebuffer with an attachment, then have one shader which renders a very simple shape to the framebuffer and another shader which reads out the values with some noise added to the readout position.
The weird thing is that
The readouts seem to be weirdly all over the place, if you delete the framebuffer attachment in the source (just comment out the lines so that an empty object remains in the array) you will see how it is meant to look like (notice the noisy edges, so writing to and reading from framebuffer works as expected).
Instead it looks like this:
Also changing the values of the attachment texture changes the result, which is weird as I never read from the framebuffer before writing to it. It seems as if the readouts return the initial color value most of the time (in this case gray).
If you remove the noise term or attach a constant noise term (independent of position), the readouts seem to work just fine.
(function main() {
const dim = [512, 512];
twgl.setDefaults({ attribPrefix: "a_" });
const gl = twgl.getContext(document.querySelector("canvas"));
gl.canvas.width = dim[0];
gl.canvas.height = dim[1];
const bfi = twgl.primitives.createXYQuadBufferInfo(gl);
const pgi = {
cross: twgl.createProgramInfo(gl, ["vs", "fs_cross"]),
noise: twgl.createProgramInfo(gl, ["vs", "fs_noise"])
};
const fbi = twgl.createFramebufferInfo(
gl,
[
{
attachment: twgl.createTexture(gl, {
src: Array(dim[0] * dim[1])
.fill([128, 128, 0, 0])
.flat()
})
}
],
...dim
);
(function frame() {
twgl.bindFramebufferInfo(gl, fbi);
gl.useProgram(pgi.cross.program);
twgl.setUniforms(pgi.cross, {
u_resolution: dim
});
twgl.setBuffersAndAttributes(gl, pgi.cross, bfi);
twgl.drawBufferInfo(gl, bfi);
twgl.bindFramebufferInfo(gl, null);
gl.useProgram(pgi.noise.program);
twgl.setUniforms(pgi.noise, {
u_framebuffer: fbi.attachments[0],
u_pi: Math.PI,
u_resolution: dim,
u_seed: Array(24).fill().map(Math.random)
});
twgl.setBuffersAndAttributes(gl, pgi.noise, bfi);
twgl.drawBufferInfo(gl, bfi);
window.requestAnimationFrame(frame);
})();
})();
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script id="vs" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec2 a_texcoord;
varying vec2 v_texcoord;
void main() {
v_texcoord = a_texcoord;
gl_Position = a_position;
}
</script>
<script id="fs_cross" type="x-shader/x-fragment">
precision highp float;
varying vec2 v_texcoord;
uniform vec2 u_resolution;
void main() {
if(sign(v_texcoord.x - 0.5) * sign(v_texcoord.y - 0.5) < 0.0) {
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
} else {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
}
</script>
<script id="fs_noise" type="x-shader/x-fragment">
precision highp float;
varying vec2 v_texcoord;
uniform sampler2D u_framebuffer;
uniform float u_pi;
uniform vec2 u_resolution;
uniform vec2 u_seed[12];
vec2 normal(vec2 uv) {
float scl = sqrt(-2.0 * log(uv.x));
float ang = 2.0 * u_pi * uv.y;
return vec2(scl * cos(ang), scl * sin(ang));
}
vec2 noisySample(sampler2D tex, vec2 coord) {
vec2 sum = vec2(0.0, 0.0);
vec2 uni = vec2(0.0, 0.0);
for(int i = 0; i < 6; i++) {
uni = fract(uni + vec2(
dot(gl_FragCoord.xy + sin(gl_FragCoord.xy), u_seed[i]),
dot(gl_FragCoord.xy + sin(gl_FragCoord.xy), u_seed[i + 6])
));
vec2 nc = coord + normal(uni) / u_resolution;
sum += texture2D(u_framebuffer, nc).rg;
}
return sum / 6.0;
}
void main() {
vec2 tmp = noisySample(u_framebuffer, v_texcoord);
gl_FragColor = vec4(tmp, 0.5, 1.0);
}
</script>
<canvas></canvas>
I am new to webgl and opengl es ,below vertex shader show error that only produce a plan.The fragment shader is a typical one, it is not provided.
uniform mat4 modelview;
uniform mat4 transform;
uniform mat3 normalMatrix;
uniform mat4 texMatrix;
uniform sampler2D texture;
attribute vec4 vertex;
attribute vec4 color;
attribute vec3 normal;
attribute vec2 texCoord;
varying vec4 vertColor;
varying vec4 vertTexCoord;
const float zero_float = 0.0;
const float one_float = 1.0;
const vec3 zero_vec3 = vec3(0);
varying highp float height;
uniform float brightness;
void main() {
//height =texture2D(texture,vec2(vertex.xz));
//height =texture2D(texture,vec2(vertex.xz)).r;
//gl_Position = transform * vertex;
gl_Position = transform *vec4(vertex.x,vertex.y,brightness,1.0);
vec3 ecVertex = vec3(modelview * vertex);
vec3 ecNormal = normalize(normalMatrix * normal);
vertTexCoord = texMatrix * vec4(texCoord, 1.0, 1.0);
}
The above vertices shader fail showing highmap by using displacement mapping of brightness of texture image, and only displace a plane with texture
Please help how the vertices can shift from the surface of a sphere(original shape) to a higher position according to the brightness of the pixels of the textures.(show hills like on the surface of the sphere, the height of the hills are proportional to the brightness of pixels of the texture)
You can't just move the position
imaging you have a 2x2 quad plane
A--B--C
| /| /|
|/ |/ |
D--E--F
| /| /|
|/ |/ |
G--H--I
Point E has a single normal facing perpendicular the plane but if you move Point E itself perpenticular to the plane suddenly it needs a different normal for each triangle that uses it, 6 triangles in the diagram above. And of course the normals of the other vertices need to change as well.
You'll need to compute new normals in the fragment shader either by using standard derivatives.
function main() {
const gl = document.querySelector('canvas').getContext('webgl');
const ext = gl.getExtension('OES_standard_derivatives');
if (!ext) {
return alert('need OES_standard_derivatives');
}
const m4 = twgl.m4;
const vs = `
attribute vec4 position;
attribute vec2 texcoord;
uniform sampler2D displacementMap;
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;
varying vec3 v_worldPosition;
void main() {
float displacementScale = 10.0;
float displacement = texture2D(displacementMap, texcoord).r * displacementScale;
vec4 displacedPosition = position + vec4(0, displacement, 0, 0);
gl_Position = projection * view * model * displacedPosition;
v_worldPosition = (model * displacedPosition).xyz;
}
`;
const fs = `
#extension GL_OES_standard_derivatives : enable
precision highp float;
varying vec3 v_worldPosition;
void main() {
vec3 dx = dFdx(v_worldPosition);
vec3 dy = dFdy(v_worldPosition);
vec3 normal = normalize(cross(dy, dx));
// just hard code lightDir and color
// to make it easy
vec3 lightDir = normalize(vec3(1, -2, 3));
float light = dot(lightDir, normal);
vec3 color = vec3(0.3, 1, 0.1);
gl_FragColor = vec4(color * (light * 0.5 + 0.5), 1);
}
`;
// compile shader, link, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
// make some vertex data
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.primitives.createPlaneBufferInfo(
gl,
96, // width
64, // height
96, // quads across
64, // quads down
);
const tex = twgl.createTexture(gl, {
src: 'https://threejsfundamentals.org/threejs/resources/images/heightmap-96x64.png',
minMag: gl.NEAREST,
wrap: gl.CLAMP_TO_EDGE,
});
function render(time) {
time *= 0.001; // seconds
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
const fov = 60 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 200;
const projection = m4.perspective(fov, aspect, near, far);
const eye = [Math.cos(time) * 30, 10, Math.sin(time) * 30];
const target = [0, 0, 0];
const up = [0, 1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
const model = m4.identity();
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
twgl.setUniformsAndBindTextures(programInfo, {
projection,
view,
model,
displacementMap: tex,
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas id="canvas"></canvas>
or by looking at multiple points on the displacement map or
function main() {
const gl = document.querySelector('canvas').getContext('webgl');
const m4 = twgl.m4;
const vs = `
attribute vec4 position;
attribute vec2 texcoord;
uniform sampler2D displacementMap;
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;
varying vec2 v_texcoord;
void main() {
float displacementScale = 10.0;
float displacement = texture2D(displacementMap, texcoord).r * displacementScale;
vec4 displacedPosition = position + vec4(0, displacement, 0, 0);
gl_Position = projection * view * model * displacedPosition;
v_texcoord = texcoord;
}
`;
const fs = `
precision highp float;
varying vec2 v_texcoord;
uniform sampler2D displacementMap;
void main() {
// should make this a uniform so it's shared
float displacementScale = 10.0;
// I'm sure there is a better way to compute
// what this offset should be
float offset = 0.01;
vec2 uv0 = v_texcoord;
vec2 uv1 = v_texcoord + vec2(offset, 0);
vec2 uv2 = v_texcoord + vec2(0, offset);
float h0 = texture2D(displacementMap, uv0).r;
float h1 = texture2D(displacementMap, uv1).r;
float h2 = texture2D(displacementMap, uv2).r;
vec3 p0 = vec3(uv0, h0 * displacementScale);
vec3 p1 = vec3(uv1, h1 * displacementScale);
vec3 p2 = vec3(uv2, h2 * displacementScale);
vec3 v0 = p1 - p0;
vec3 v1 = p2 - p0;
vec3 normal = normalize(cross(v1, v0));
// just hard code lightDir and color
// to make it easy
vec3 lightDir = normalize(vec3(1, -3, 2));
float light = dot(lightDir, normal);
vec3 color = vec3(0.3, 1, 0.1);
gl_FragColor = vec4(color * (light * 0.5 + 0.5), 1);
}
`;
// compile shader, link, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
// make some vertex data
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.primitives.createPlaneBufferInfo(
gl,
96, // width
64, // height
96, // quads across
64, // quads down
);
const tex = twgl.createTexture(gl, {
src: 'https://threejsfundamentals.org/threejs/resources/images/heightmap-96x64.png',
minMag: gl.LINEAR,
wrap: gl.CLAMP_TO_EDGE,
});
function render(time) {
time *= 0.001; // seconds
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
const fov = 60 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 200;
const projection = m4.perspective(fov, aspect, near, far);
const eye = [Math.cos(time) * 30, 10, Math.sin(time) * 30];
const target = [0, 0, 0];
const up = [0, 1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
const model = m4.identity();
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
twgl.setUniformsAndBindTextures(programInfo, {
projection,
view,
model,
displacementMap: tex,
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas id="canvas"></canvas>
Note that rather than compute a normal from 3 samples of the texture you could probably precompute them at init time by going over the height map and generating a normal map. You could supply that as 3 channels of the same texture. Like say RGB = normal and A = height
async function main() {
const gl = document.querySelector('canvas').getContext('webgl');
const m4 = twgl.m4;
const v3 = twgl.v3;
const vs = `
attribute vec4 position;
attribute vec2 texcoord;
uniform sampler2D displacementMap;
uniform mat4 projection;
uniform mat4 view;
uniform mat4 model;
varying vec2 v_texcoord;
void main() {
float displacementScale = 10.0;
float displacement = texture2D(displacementMap, texcoord).a * displacementScale;
vec4 displacedPosition = position + vec4(0, displacement, 0, 0);
gl_Position = projection * view * model * displacedPosition;
v_texcoord = texcoord;
}
`;
const fs = `
precision highp float;
varying vec2 v_texcoord;
uniform sampler2D displacementMap;
void main() {
// should make this a uniform so it's shared
float displacementScale = 10.0;
vec3 data = texture2D(displacementMap, v_texcoord).rgb;
vec3 normal = data * 2. - 1.;
// just hard code lightDir and color
// to make it easy
vec3 lightDir = normalize(vec3(1, -3, 2));
float light = dot(lightDir, normal);
vec3 color = vec3(0.3, 1, 0.1);
gl_FragColor = vec4(color * (light * 0.5 + 0.5), 1);
}
`;
// compile shader, link, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
// make some vertex data
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.primitives.createPlaneBufferInfo(
gl,
96, // width
64, // height
96, // quads across
64, // quads down
);
const img = await loadImage('https://threejsfundamentals.org/threejs/resources/images/heightmap-96x64.png');
// get image data
const ctx = document.createElement('canvas').getContext('2d');
ctx.canvas.width = img.width;
ctx.canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imgData = ctx.getImageData(0, 0, img.width, img.height);
// generate normals from height data
const displacementScale = 10;
const data = new Uint8Array(imgData.data.length);
for (let z = 0; z < imgData.height; ++z) {
for (let x = 0; x < imgData.width; ++x) {
const off = (z * img.width + x) * 4;
const h0 = imgData.data[off];
const h1 = imgData.data[off + 4] || 0; // being lazy at edge
const h2 = imgData.data[off + imgData.width * 4] || 0; // being lazy at edge
const p0 = [x , h0 * displacementScale / 255, z ];
const p1 = [x + 1, h1 * displacementScale / 255, z ];
const p2 = [x , h2 * displacementScale / 255, z + 1];
const v0 = v3.normalize(v3.subtract(p1, p0));
const v1 = v3.normalize(v3.subtract(p2, p0));
const normal = v3.normalize(v3.cross(v0, v1));
data[off + 0] = (normal[0] * 0.5 + 0.5) * 255;
data[off + 1] = (normal[1] * 0.5 + 0.5) * 255;
data[off + 2] = (normal[2] * 0.5 + 0.5) * 255;
data[off + 3] = h0;
}
}
const tex = twgl.createTexture(gl, {
src: data,
width: imgData.width,
minMag: gl.LINEAR,
wrap: gl.CLAMP_TO_EDGE,
});
function render(time) {
time *= 0.001; // seconds
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
const fov = 60 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 200;
const projection = m4.perspective(fov, aspect, near, far);
const eye = [Math.cos(time) * 30, 10, Math.sin(time) * 30];
const target = [0, 0, 0];
const up = [0, 1, 0];
const camera = m4.lookAt(eye, target, up);
const view = m4.inverse(camera);
const model = m4.identity();
gl.useProgram(programInfo.program);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
// calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
twgl.setUniformsAndBindTextures(programInfo, {
projection,
view,
model,
displacementMap: tex,
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = _ => resolve(img);
img.onerror = reject;
img.crossOrigin = 'anonymous';
img.src = url;
});
}
main();
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas id="canvas"></canvas>
I am trying to apply both displacement mapping and specular mapping for the earth and only displacement mapping for the moon.
I could transfer height map to normal map but if I use the same height map to apply displacement mapping, it does not work as I expected..
Here is the example image
as you can see the bumpness around the earth and the moon but there are no actual height diffrences.
If I apply specular map to the earth, the earth becomes like this
I want only the ocean of the earth to shine but my code turns the earth into the whole black, I can only see some white dots on the earth...
These textures are from this site
Here is my both vertex shader code and the fragment shader code
"use strict";
const loc_aPosition = 3;
const loc_aNormal = 5;
const loc_aTexture = 7;
const VSHADER_SOURCE =
`#version 300 es
layout(location=${loc_aPosition}) in vec4 aPosition;
layout(location=${loc_aNormal}) in vec4 aNormal;
layout(location=${loc_aTexture}) in vec2 aTexCoord;
uniform mat4 uMvpMatrix;
uniform mat4 uModelMatrix; // Model matrix
uniform mat4 uNormalMatrix; // Transformation matrix of the normal
uniform sampler2D earth_disp;
uniform sampler2D moon_disp;
//uniform float earth_dispScale;
//uniform float moon_dispScale;
//uniform float earth_dispBias;
//uniform float moon_dispBias;
uniform bool uEarth;
uniform bool uMoon;
out vec2 vTexCoord;
out vec3 vNormal;
out vec3 vPosition;
void main()
{
float disp;
if(uEarth)
disp = texture(earth_disp, aTexCoord).r; //Extracting the color information from the image
else if(uMoon)
disp = texture(moon_disp, aTexCoord).r; //Extracting the color information from the image
vec4 displace = aPosition;
float displaceFactor = 2.0;
float displaceBias = 0.5;
if(uEarth || uMoon) //Using Displacement Mapping
{
displace += (displaceFactor * disp - displaceBias) * aNormal;
gl_Position = uMvpMatrix * displace;
}
else //Not using displacement mapping
gl_Position = uMvpMatrix * aPosition;
// Calculate the vertex position in the world coordinate
vPosition = vec3(uModelMatrix * aPosition);
vNormal = normalize(vec3(uNormalMatrix * aNormal));
vTexCoord = aTexCoord;
}`;
// Fragment shader program
const FSHADER_SOURCE =
`#version 300 es
precision mediump float;
uniform vec3 uLightColor; // Light color
uniform vec3 uLightPosition; // Position of the light source
uniform vec3 uAmbientLight; // Ambient light color
uniform sampler2D sun_color;
uniform sampler2D earth_color;
uniform sampler2D moon_color;
uniform sampler2D earth_bump;
uniform sampler2D moon_bump;
uniform sampler2D specularMap;
in vec3 vNormal;
in vec3 vPosition;
in vec2 vTexCoord;
out vec4 fColor;
uniform bool uIsSun;
uniform bool uIsEarth;
uniform bool uIsMoon;
vec2 dHdxy_fwd(sampler2D bumpMap, vec2 UV, float bumpScale)
{
vec2 dSTdx = dFdx( UV );
vec2 dSTdy = dFdy( UV );
float Hll = bumpScale * texture( bumpMap, UV ).x;
float dBx = bumpScale * texture( bumpMap, UV + dSTdx ).x - Hll;
float dBy = bumpScale * texture( bumpMap, UV + dSTdy ).x - Hll;
return vec2( dBx, dBy );
}
vec3 pertubNormalArb(vec3 surf_pos, vec3 surf_norm, vec2 dHdxy)
{
vec3 vSigmaX = vec3( dFdx( surf_pos.x ), dFdx( surf_pos.y ), dFdx( surf_pos.z ) );
vec3 vSigmaY = vec3( dFdy( surf_pos.x ), dFdy( surf_pos.y ), dFdy( surf_pos.z ) );
vec3 vN = surf_norm; // normalized
vec3 R1 = cross( vSigmaY, vN );
vec3 R2 = cross( vN, vSigmaX );
float fDet = dot( vSigmaX, R1 );
fDet *= ( float( gl_FrontFacing ) * 2.0 - 1.0 );
vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 );
return normalize( abs( fDet ) * surf_norm - vGrad );
}
void main()
{
vec2 dHdxy;
vec3 bumpNormal;
float bumpness = 1.0;
if(uIsSun)
fColor = texture(sun_color, vTexCoord);
else if(uIsEarth)
{
fColor = texture(earth_color, vTexCoord);
dHdxy = dHdxy_fwd(earth_bump, vTexCoord, bumpness);
}
else if(uIsMoon)
{
fColor = texture(moon_color, vTexCoord);
dHdxy = dHdxy_fwd(moon_bump, vTexCoord, bumpness);
}
// Normalize the normal because it is interpolated and not 1.0 in length any more
vec3 normal = normalize(vNormal);
// Calculate the light direction and make its length 1.
vec3 lightDirection = normalize(uLightPosition - vPosition);
// The dot product of the light direction and the orientation of a surface (the normal)
float nDotL;
if(uIsSun)
nDotL = 1.0;
else
nDotL = max(dot(lightDirection, normal), 0.0);
// Calculate the final color from diffuse reflection and ambient reflection
vec3 diffuse = uLightColor * fColor.rgb * nDotL;
vec3 ambient = uAmbientLight * fColor.rgb;
float specularFactor = texture(specularMap, vTexCoord).r; //Extracting the color information from the image
vec3 diffuseBump;
if(uIsEarth || uIsMoon)
{
bumpNormal = pertubNormalArb(vPosition, normal, dHdxy);
diffuseBump = min(diffuse + dot(bumpNormal, lightDirection), 1.1);
}
vec3 specular = vec3(0.0);
float shiness = 12.0;
vec3 lightSpecular = vec3(1.0);
if(uIsEarth && nDotL > 0.0)
{
vec3 v = normalize(-vPosition); // EyePosition
vec3 r = reflect(-lightDirection, bumpNormal); // Reflect from the surface
specular = lightSpecular * specularFactor * pow(dot(r, v), shiness);
}
//Update Final Color
if(uIsEarth)
fColor = vec4( (diffuse * diffuseBump * specular) + ambient, fColor.a); // Specular
else if(uIsMoon)
fColor = vec4( (diffuse * diffuseBump) + ambient, fColor.a);
else if(uIsSun)
fColor = vec4(diffuse + ambient, fColor.a);
}`;
Could you tell me where do I have to check?
If it was me I'd first strip the shader down the simplest thing and see if I get what I want. You want a specular shine so do you get a specular shine with only specular calculations in your shaders
Trimming your shaders to just draw a flat phong shading didn't produce the correct results
This line
fColor = vec4( (diffuse * specular) + ambient, fColor.a);
needed to be
fColor = vec4( (diffuse + specular) + ambient, fColor.a);
You add the specular, not multiply by it.
"use strict";
const loc_aPosition = 3;
const loc_aNormal = 5;
const loc_aTexture = 7;
const VSHADER_SOURCE =
`#version 300 es
layout(location=${loc_aPosition}) in vec4 aPosition;
layout(location=${loc_aNormal}) in vec4 aNormal;
uniform mat4 uMvpMatrix;
uniform mat4 uModelMatrix; // Model matrix
uniform mat4 uNormalMatrix; // Transformation matrix of the normal
out vec3 vNormal;
out vec3 vPosition;
void main()
{
gl_Position = uMvpMatrix * aPosition;
// Calculate the vertex position in the world coordinate
vPosition = vec3(uModelMatrix * aPosition);
vNormal = normalize(vec3(uNormalMatrix * aNormal));
}`;
// Fragment shader program
const FSHADER_SOURCE =
`#version 300 es
precision highp float;
uniform vec3 uLightColor; // Light color
uniform vec3 uLightPosition; // Position of the light source
uniform vec3 uAmbientLight; // Ambient light color
in vec3 vNormal;
in vec3 vPosition;
out vec4 fColor;
void main()
{
vec2 dHdxy;
vec3 bumpNormal;
float bumpness = 1.0;
fColor = vec4(0.5, 0.5, 1, 1);
// Normalize the normal because it is interpolated and not 1.0 in length any more
vec3 normal = normalize(vNormal);
// Calculate the light direction and make its length 1.
vec3 lightDirection = normalize(uLightPosition - vPosition);
// The dot product of the light direction and the orientation of a surface (the normal)
float nDotL;
nDotL = max(dot(lightDirection, normal), 0.0);
// Calculate the final color from diffuse reflection and ambient reflection
vec3 diffuse = uLightColor * fColor.rgb * nDotL;
vec3 ambient = uAmbientLight * fColor.rgb;
float specularFactor = 1.0;
bumpNormal = normal;
vec3 specular = vec3(0.0);
float shiness = 12.0;
vec3 lightSpecular = vec3(1.0);
vec3 v = normalize(-vPosition); // EyePosition
vec3 r = reflect(-lightDirection, bumpNormal); // Reflect from the surface
specular = lightSpecular * specularFactor * pow(dot(r, v), shiness);
fColor = vec4( (diffuse + specular) + ambient, fColor.a); // Specular
}`;
function main() {
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl2');
if (!gl) { return alert('need webgl2'); }
const prgInfo = twgl.createProgramInfo(gl, [VSHADER_SOURCE, FSHADER_SOURCE]);
const verts = twgl.primitives.createSphereVertices(1, 40, 40);
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
aPosition: verts.position,
aNormal: verts.normal,
aTexCoord: verts.texcoord,
indices: verts.indices,
});
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer for each attribute
twgl.setBuffersAndAttributes(gl, prgInfo, bufferInfo);
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(prgInfo.program);
const fov = 60 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 20.0;
const mat = m4.perspective(fov, aspect, near, far);
m4.translate(mat, [0, 0, -3], mat);
// calls gl.activeTexture, gl.bindTexture, gl.uniform
twgl.setUniforms(prgInfo, {
uMvpMatrix: mat,
uModelMatrix: m4.identity(), // Model matrix
uNormalMatrix: m4.identity(), // Transformation matrix of the normal
uLightColor: [1, 1, 1], // Light color
uLightPosition: [2, 2, 10], // Position of the light source
uAmbientLight: [0, 0, 0], // Ambient light color
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
}
main();
body { margin: 0 }
canvas { display: block; width: 100vw; height: 100vh; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>
So now we can add in the specular map
"use strict";
const loc_aPosition = 3;
const loc_aNormal = 5;
const loc_aTexCoord = 7;
const VSHADER_SOURCE =
`#version 300 es
layout(location=${loc_aPosition}) in vec4 aPosition;
layout(location=${loc_aNormal}) in vec4 aNormal;
layout(location=${loc_aTexCoord}) in vec2 aTexCoord;
uniform mat4 uMvpMatrix;
uniform mat4 uModelMatrix; // Model matrix
uniform mat4 uNormalMatrix; // Transformation matrix of the normal
out vec3 vNormal;
out vec3 vPosition;
out vec2 vTexCoord;
void main()
{
gl_Position = uMvpMatrix * aPosition;
// Calculate the vertex position in the world coordinate
vPosition = vec3(uModelMatrix * aPosition);
vNormal = normalize(vec3(uNormalMatrix * aNormal));
vTexCoord = aTexCoord;
}`;
// Fragment shader program
const FSHADER_SOURCE =
`#version 300 es
precision highp float;
uniform vec3 uLightColor; // Light color
uniform vec3 uLightPosition; // Position of the light source
uniform vec3 uAmbientLight; // Ambient light color
uniform sampler2D specularMap;
in vec3 vNormal;
in vec3 vPosition;
in vec2 vTexCoord;
out vec4 fColor;
void main()
{
vec2 dHdxy;
vec3 bumpNormal;
float bumpness = 1.0;
fColor = vec4(0.5, 0.5, 1, 1);
// Normalize the normal because it is interpolated and not 1.0 in length any more
vec3 normal = normalize(vNormal);
// Calculate the light direction and make its length 1.
vec3 lightDirection = normalize(uLightPosition - vPosition);
// The dot product of the light direction and the orientation of a surface (the normal)
float nDotL;
nDotL = max(dot(lightDirection, normal), 0.0);
// Calculate the final color from diffuse reflection and ambient reflection
vec3 diffuse = uLightColor * fColor.rgb * nDotL;
vec3 ambient = uAmbientLight * fColor.rgb;
float specularFactor = texture(specularMap, vTexCoord).r; //Extracting the color information from the image
bumpNormal = normal;
vec3 specular = vec3(0.0);
float shiness = 12.0;
vec3 lightSpecular = vec3(1.0);
vec3 v = normalize(-vPosition); // EyePosition
vec3 r = reflect(-lightDirection, bumpNormal); // Reflect from the surface
specular = lightSpecular * specularFactor * pow(dot(r, v), shiness);
fColor = vec4( (diffuse + specular) + ambient, fColor.a); // Specular
}`;
function main() {
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl2');
if (!gl) { return alert('need webgl2'); }
const prgInfo = twgl.createProgramInfo(gl, [VSHADER_SOURCE, FSHADER_SOURCE]);
const verts = twgl.primitives.createSphereVertices(1, 40, 40);
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
aPosition: verts.position,
aNormal: verts.normal,
aTexCoord: verts.texcoord,
indices: verts.indices,
});
const specularTex = twgl.createTexture(gl, {src: 'https://i.imgur.com/JlIJu5V.jpg'});
function render(time) {
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer for each attribute
twgl.setBuffersAndAttributes(gl, prgInfo, bufferInfo);
gl.useProgram(prgInfo.program);
const fov = 60 * Math.PI / 180;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.1;
const far = 20.0;
const mat = m4.perspective(fov, aspect, near, far);
m4.translate(mat, [0, 0, -3], mat);
const model = m4.rotationY(time / 1000);
m4.multiply(mat, model, mat);
// calls gl.activeTexture, gl.bindTexture, gl.uniform
twgl.setUniforms(prgInfo, {
uMvpMatrix: mat,
uModelMatrix: model, // Model matrix
uNormalMatrix: model, // Transformation matrix of the normal
uLightColor: [1, 1, 1], // Light color
uLightPosition: [2, 2, 10], // Position of the light source
uAmbientLight: [0, 0, 0], // Ambient light color
specularMap: specularTex,
});
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
body { margin: 0 }
canvas { display: block; width: 100vw; height: 100vh; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>
Then you should argably not use lots of boolean conditionals on your shader. Either make different shaders for find a way to do it without the booleans. So for example we don't need
uniform sampler2D earth_disp;
uniform sampler2D moon_disp;
uniform sampler2D sun_color;
uniform sampler2D earth_color;
uniform sampler2D moon_color;
uniform sampler2D earth_bump;
uniform sampler2D moon_bump;
uniform bool uIsSun;
uniform bool uIsEarth;
uniform bool uIsMoon;
we can just have
uniform sampler2D displacementMap;
uniform sampler2D surfaceColor;
uniform sampler2D bumpMap;
Then we can set the displacementMap and the bumpMap to a single pixel 0,0,0,0 texture and there will be no displacement and no bump.
As for different lighting for sun, given the sun uses neither the bump map nor the displacement map nor even lighting at all it would arguably be better to use a different shader but, we can also just add a maxDot value like this
uniform float maxDot;
...
nDotL = max(dot(lightDirection, normal), maxDot)
If maxDot is zero we'll get a normal dot product. If maxDot is one we get no lighting.
"use strict";
const loc_aPosition = 3;
const loc_aNormal = 5;
const loc_aTexture = 7;
const VSHADER_SOURCE =
`#version 300 es
layout(location=${loc_aPosition}) in vec4 aPosition;
layout(location=${loc_aNormal}) in vec3 aNormal;
layout(location=${loc_aTexture}) in vec2 aTexCoord;
uniform mat4 uMvpMatrix;
uniform mat4 uModelMatrix; // Model matrix
uniform mat4 uNormalMatrix; // Transformation matrix of the normal
uniform sampler2D displacementMap;
out vec2 vTexCoord;
out vec3 vNormal;
out vec3 vPosition;
void main()
{
float disp;
disp = texture(displacementMap, aTexCoord).r;
vec4 displace = aPosition;
float displaceFactor = 0.1;
float displaceBias = 0.0;
displace.xyz += (displaceFactor * disp - displaceBias) * aNormal;
gl_Position = uMvpMatrix * displace;
// Calculate the vertex position in the world coordinate
vPosition = vec3(uModelMatrix * aPosition);
vNormal = normalize(mat3(uNormalMatrix) * aNormal);
vTexCoord = aTexCoord;
}`;
// Fragment shader program
const FSHADER_SOURCE =
`#version 300 es
precision highp float;
uniform vec3 uLightColor; // Light color
uniform vec3 uLightPosition; // Position of the light source
uniform vec3 uAmbientLight; // Ambient light color
uniform sampler2D surfaceColor;
uniform sampler2D bumpMap;
uniform sampler2D specularMap;
uniform float maxDot;
in vec3 vNormal;
in vec3 vPosition;
in vec2 vTexCoord;
out vec4 fColor;
vec2 dHdxy_fwd(sampler2D bumpMap, vec2 UV, float bumpScale)
{
vec2 dSTdx = dFdx( UV );
vec2 dSTdy = dFdy( UV );
float Hll = bumpScale * texture( bumpMap, UV ).x;
float dBx = bumpScale * texture( bumpMap, UV + dSTdx ).x - Hll;
float dBy = bumpScale * texture( bumpMap, UV + dSTdy ).x - Hll;
return vec2( dBx, dBy );
}
vec3 pertubNormalArb(vec3 surf_pos, vec3 surf_norm, vec2 dHdxy)
{
vec3 vSigmaX = vec3( dFdx( surf_pos.x ), dFdx( surf_pos.y ), dFdx( surf_pos.z ) );
vec3 vSigmaY = vec3( dFdy( surf_pos.x ), dFdy( surf_pos.y ), dFdy( surf_pos.z ) );
vec3 vN = surf_norm; // normalized
vec3 R1 = cross( vSigmaY, vN );
vec3 R2 = cross( vN, vSigmaX );
float fDet = dot( vSigmaX, R1 );
fDet *= ( float( gl_FrontFacing ) * 2.0 - 1.0 );
vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 );
return normalize( abs( fDet ) * surf_norm - vGrad );
}
void main()
{
vec2 dHdxy;
vec3 bumpNormal;
float bumpness = 1.0;
fColor = texture(surfaceColor, vTexCoord);
dHdxy = dHdxy_fwd(bumpMap, vTexCoord, bumpness);
// Normalize the normal because it is interpolated and not 1.0 in length any more
vec3 normal = normalize(vNormal);
// Calculate the light direction and make its length 1.
vec3 lightDirection = normalize(uLightPosition - vPosition);
// The dot product of the light direction and the orientation of a surface (the normal)
float nDotL;
nDotL = max(dot(lightDirection, normal), maxDot);
// Calculate the final color from diffuse reflection and ambient reflection
vec3 diffuse = uLightColor * fColor.rgb * nDotL;
vec3 ambient = uAmbientLight * fColor.rgb;
float specularFactor = texture(specularMap, vTexCoord).r; //Extracting the color information from the image
vec3 diffuseBump;
bumpNormal = pertubNormalArb(vPosition, normal, dHdxy);
diffuseBump = min(diffuse + dot(bumpNormal, lightDirection), 1.1);
vec3 specular = vec3(0.0);
float shiness = 12.0;
vec3 lightSpecular = vec3(1.0);
vec3 v = normalize(-vPosition); // EyePosition
vec3 r = reflect(-lightDirection, bumpNormal); // Reflect from the surface
specular = lightSpecular * specularFactor * pow(dot(r, v), shiness);
//Update Final Color
fColor = vec4( (diffuse * diffuseBump + specular) + ambient, fColor.a); // Specular
}`;
function main() {
const m4 = twgl.m4;
const gl = document.querySelector('canvas').getContext('webgl2');
if (!gl) { return alert('need webgl2'); }
const prgInfo = twgl.createProgramInfo(gl, [VSHADER_SOURCE, FSHADER_SOURCE]);
const verts = twgl.primitives.createSphereVertices(1, 40, 40);
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
aPosition: verts.position,
aNormal: verts.normal,
aTexCoord: verts.texcoord,
indices: verts.indices,
});
const textures = twgl.createTextures(gl, {
zero: { src: new Uint8Array([0, 0, 0, 0])},
earthSpecular: { src: 'https://i.imgur.com/JlIJu5V.jpg' },
earthColor: { src: 'https://i.imgur.com/eCpD7bM.jpg' },
earthBump: { src: 'https://i.imgur.com/LzFNOP8.jpg' },
sunColor: { src: 'https://i.imgur.com/gl8zBLI.jpg', },
moonColor: { src: 'https://i.imgur.com/oLiU4fm.jpg', },
moonBump: { src: 'https://i.imgur.com/bDnjW8C.jpg', },
});
function render(time) {
// calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer for each attribute
twgl.setBuffersAndAttributes(gl, prgInfo, bufferInfo);
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(prgInfo.program);
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const fov = 60 * Math.PI / 180 / aspect;
const near = 0.1;
const far = 20.0;
const viewProjection = m4.perspective(fov, aspect, near, far);
m4.translate(viewProjection, [0, 0, -6], viewProjection);
draw([0, 0, 0], {
displacementMap: textures.earthBump,
bumpMap: textures.earthBump,
surfaceColor: textures.earthColor,
specularMap: textures.earthSpecular,
maxDot: 0,
uAmbientLight: [0, 0, 0],
});
draw([-2.2, 0, 0], {
displacementMap: textures.zero,
bumpMap: textures.zero,
surfaceColor: textures.sunColor,
specularMap: textures.zero,
maxDot: 1,
uAmbientLight: [0, 0, 0],
});
draw([2.2, 0, 0], {
displacementMap: textures.moonBump,
bumpMap: textures.moonBump,
surfaceColor: textures.moonColor,
specularMap: textures.zero,
maxDot: 0,
uAmbientLight: [0, 0, 0],
});
function draw(translation, uniforms) {
const model = m4.translation(translation);
m4.rotateY(model, time / 1000, model);
// calls gl.activeTexture, gl.bindTexture, gl.uniform
twgl.setUniforms(prgInfo, {
uMvpMatrix: m4.multiply(viewProjection, model),
uModelMatrix: model, // Model matrix
uNormalMatrix: m4.transpose(m4.inverse(model)), // Transformation matrix of the normal
uLightColor: [1, 1, 1], // Light color
uLightPosition: [2, 2, 10], // Position of the light source
uAmbientLight: [1, 0, 0], // Ambient light color
});
twgl.setUniforms(prgInfo, uniforms);
// calls gl.drawArrays or gl.drawElements
twgl.drawBufferInfo(gl, bufferInfo);
}
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
body { margin: 0 }
canvas { display: block; width: 100vw; height: 100vh; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<canvas></canvas>
As for the displacement, displacement only works on vertices so you need a lot of vertices in your sphere to be able to see any displacement
As well there was an bug related to displacement. You're passing in normals as vec4 and this line
displace += (displaceFactor * disp - displaceBias) * aNormal;
Ends up adding a vec4 displacement. In other words let's say you started with an a_Position of vec4(1,0,0,1) which would be on the left side of the sphere. aNormal because you declared it as a vec4 is probably vec4(1,0,0,1) as well. Assuming you're actually passing it vec3 normal data via attributes from your buffer the default value for W is 1. Let's assume disp is 1, displaceFactor is 2 and displaceBias is 0.5 which is what you had. You end up wioth
displace = vec4(1,0,0,1) + (2 * 1 + 0.5) * vec4(1,0,0,1)
displace = vec4(1,0,0,1) + (1.5) * vec4(1,0,0,1)
displace = vec4(1,0,0,1) + vec4(1.5,0,0,1.5)
displace = vec4(2.5,0,0,2.5)
But you don't want W to be 2.5. One fix is to just use the xyz part of the normal.
displace.xyz += (displaceFactor * disp - displaceBias) * aNormal.xyz;
The more normal fix would be to only declare the normal attribute as vec3
in vec3 aNormal;
displace.xyz += (displaceFactor * disp - displaceBias) * aNormal;
In my example above the spheres are only radius = 1 so we only want adjust this displacement a little. I set displaceFactor to 0.1 and displaceBias to 0.
I'm trying to make a graphic engine in WebGL, but I'm having lots of trouble.
One of this problems is about attributes being null or -1 when I call them with "gl.getUniformLocation".
My main problem with this right now is "aVertexTextureCoords", which is always -1.
I leave here my shaders, just in case they're the problem.
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec4 aVertexColor;
attribute vec2 aVertexTextureCoords;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uNMatrix;
uniform float uAlpha;
const int NUM_LIGHTS = 4;
uniform vec4 uMaterialDiffuse;
uniform vec3 uLightPosition[NUM_LIGHTS];
//varyings
varying vec4 vColor;
varying vec2 vTextureCoord;
varying vec3 vNormal;
varying vec3 vLightRay[NUM_LIGHTS];
void main(void) {
//Transformed vertex position
vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
//Transformed normal position
vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
//Calculate light ray per each light
for(int i=0; i < NUM_LIGHTS; i++){
vec4 lightPosition = uMVMatrix * vec4(uLightPosition[i], 1.0);
vLightRay[i] = vertex.xyz - lightPosition.xyz;
}
//Final vertex position
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aVertexTextureCoords;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
//object uniforms
uniform bool uWireframe;
uniform vec4 uMaterialAmbient;
uniform vec4 uMaterialDiffuse;
//Incluimos un uniform que asociara la textura a un uniform
uniform sampler2D uSampler;
//light uniforms
const int NUM_LIGHTS = 4;
uniform bool uLightSource;
uniform vec4 uLightAmbient;
uniform vec4 uLightDiffuse[NUM_LIGHTS];
uniform float uCutOff;
//varyings
varying vec2 vTextureCoord;
varying vec3 vNormal;
varying vec3 vLightRay[NUM_LIGHTS];
void main(void)
{
if(uWireframe || uLightSource){
gl_FragColor = uMaterialDiffuse;
}
else{
vec4 Ia = uLightAmbient * uMaterialAmbient; //Ambient component: one for all
vec4 finalColor = vec4(0.0,0.0,0.0,1.0); //Color that will be assigned to gl_FragColor
vec3 N = normalize(vNormal);
vec3 L = vec3(0.0);
float lambertTerm = 0.0;
for(int i = 0; i < NUM_LIGHTS; i++){ //For each light
L = normalize(vLightRay[i]); //Calculate reflexion
lambertTerm = dot(N, -L);
if (lambertTerm > uCutOff){
finalColor += uLightDiffuse[i] * uMaterialDiffuse *lambertTerm; //Add diffuse component, one per light
}
}
//Final color
finalColor += Ia;
finalColor.a = 1.0; //Add ambient component: one for all
gl_FragColor = finalColor * texture2D(uSampler, vTextureCoord); //The alpha value in this example will be 1.0
}
}
</script>
Can somebody tell me what I'm doing wrong?
Calling gl.getUniformLocation for a vertex attribute is wrong because it's an attribute, not a uniform. Replace the call with gl.getAttribLocation.
when I'm running my app on ipad1 I see different result then when I'm running the same app on ipad2. I'm interested in book size in the middle of screen.
iPad1 result
iPad2 result
My code is below.
- (void)drawGallery{
glDepthFunc(GL_LESS);
glEnable(GL_DEPTH_TEST);
ResourceManager *rm = [ResourceManager sharedInstance];
GLuint currProgram = [rm getProgram:PROGRAM_BASIC_LIGHTNING];
glUseProgram(currProgram);
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
glViewport(0, 0, 768, 1024 + 2 * GALLERY_OFFSET_Y);
GLfloat modelviewProj[16];
for (Sheet *sh in self.interfaceManager.gallery.sheets){
if ([self.interfaceManager.gallery shouldDrawSheet:sh]){
[self MakePerspectiveMatrix:modelviewProj
OriginX:0.0
OriginY:0.0
Width:SCREEN_WIDTH
Height:SCREEN_HEIGHT
Rotation:sh.rotation
TranslationX:sh.translationX
TranslationZ:sh.translationZ
ScaleX:1.0
ScaleY:SCREEN_HEIGHT/(SCREEN_HEIGHT + 2 * GALLERY_OFFSET_Y)];
vertexDataTextured *model;
if (sh.type == SHEET_TYPE_LEFT){
model = (vertexDataTextured *)[rm getModel:MODEL_SHEET_LEFT];
} else {
model = (vertexDataTextured *)[rm getModel:MODEL_SHEET_RIGHT];
}
// update uniform values
glUniformMatrix4fv(basic_lighting_uniforms[BASIC_LIGHTING_UNIFORM_MODEL_VIEW_PROJECTION_MATRIX], 1, GL_FALSE, modelviewProj);
glUniform1f(basic_lighting_uniforms[BASIC_LIGHTING_UNIFORM_ROTATION], degreeToRadians(-sh.rotation));
glActiveTexture(GL_TEXTURE0);
GLuint texture = [rm getTexture:TEXTURE_COLORING_PICTURE Index1:self.currentBook.number Index2:sh.number];
glBindTexture (GL_TEXTURE_2D, texture);
glUniform1i(basic_lighting_uniforms[BASIC_LIGHTING_UNIFORM_TEXTURE], 0);
glVertexAttribPointer(BASIC_LIGHTING_ATTRIB_VERTEX, 3, GL_FLOAT, GL_FALSE, sizeof(vertexDataTextured), &model[0].vertex);
glEnableVertexAttribArray(BASIC_LIGHTING_ATTRIB_VERTEX);
glVertexAttribPointer(BASIC_LIGHTING_ATTRIB_TEX_COORDS, 2, GL_FLOAT, GL_FALSE, sizeof(vertexDataTextured), &model[0].texCoord);
glEnableVertexAttribArray(BASIC_LIGHTING_ATTRIB_TEX_COORDS);
glDrawArrays(GL_TRIANGLES, 0, 6);
if (![self validateProgram:currProgram]) {
NSLog(#"Failed to validate program: (%d)", currProgram);
}
}
}
}
Vertex Shader:
uniform mat4 modelViewProjectionMatrix;
uniform float rotation;
attribute lowp vec3 position;
attribute lowp vec2 texCoords;
varying lowp vec2 fTexCoords;
varying lowp vec4 computed_color;
void main()
{
fTexCoords = texCoords;
vec4 postmp = vec4(position.xyz, 1.0);
vec4 newposition = modelViewProjectionMatrix * postmp;
gl_Position = newposition;
vec3 ambient_color = vec3(0.5, 0.5, 0.5);
vec3 norm = vec3(sin(rotation), 0.0, cos(rotation));
vec3 light_position1 = vec3(15.0, 0.0, 20.0);
vec3 light_direction1 = normalize( vec3 (0.2, 0.0, 1.0) );
vec4 light_diffuse_color1 = vec4 (0.4, 0.4, 0.4, 1.0);
float ndotl1 = max(0.0, dot(light_direction1, norm));
vec4 temp_color1 = ndotl1 * light_diffuse_color1 * 15.0 / (length(light_position1 - newposition.xyz));
vec3 light_position2 = vec3(-30.0, 0.0, 25.0);
vec3 light_direction2 = normalize( vec3(-0.2, 0.0, 1.0) );
vec4 light_diffuse_color2 = vec4 (0.5, 0.5, 0.5, 1.0);
float ndotl2 = max(0.0, dot(light_direction2, norm));
vec4 temp_color2 = ndotl2 * light_diffuse_color2 * 15.0 / (length(light_position2 - newposition.xyz));
computed_color = vec4(temp_color1.rgb + temp_color2.rgb + ambient_color, 1.0);
}
Fragment shader:
precision lowp float;
uniform sampler2D texture;
varying vec2 fTexCoords;
varying lowp vec4 computed_color;
void main()
{
gl_FragColor = texture2D(texture, fTexCoords) * computed_color;
}
The problem was in lowp presicion for position. Thanks to Brad Larson.