सबसे पहले, मैं यह कहना चाहता हूं कि मैंने छाया मानचित्रण के बारे में बहुत सारे पोस्ट पढ़े हैं जो कि गहरे मानचित्र और क्यूमैप्स का उपयोग करते हैं और मैं समझता हूं कि वे कैसे काम करते हैं और यह भी, मेरे पास ओपनजीएल का उपयोग करते हुए उनके साथ काम करने का अनुभव है, लेकिन, मुझे एक मुद्दा लागू करना है ओम्निडायरेक्शनल शैडो मैपिंग तकनीक "ईज़ी 3" नामक मेरे 3 डी ग्राफिक्स इंजन में एकल बिंदु प्रकाश स्रोत का उपयोग करते हुए। मेरा इंजन वेबजीएल को एक 3 डी ग्राफिक्स एपीआई और जावास्क्रिप्ट के रूप में प्रोग्रामिंग भाषा के रूप में उपयोग करता है, यह कंप्यूटर विज्ञान में मेरे स्नातक की थीसिस के लिए है।
मूल रूप से यह है कि मैंने अपनी छाया मानचित्रण एल्गोरिथ्म कैसे लागू किया है, लेकिन मैं केवल बिंदु रोशनी के मामले पर ध्यान केंद्रित करूंगा क्योंकि उनके साथ मैं सर्वदिशात्मक छाया मानचित्रण को संग्रहीत कर सकता हूं।
सबसे पहले, मैं इस तरह से सामने वाले को सक्रिय करता हूं:
if (this.state.faceCulling !== Material.FRONT) {
if (this.state.faceCulling === Material.NONE)
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.FRONT);
this.state.faceCulling = Material.FRONT;
}
दूसरा, मैं प्रत्येक क्यूबैप चेहरे के लिए गहराई मूल्यों को रिकॉर्ड करने के लिए एक गहराई कार्यक्रम बनाता हूं, यह जीएलएसएल 1.0 में मेरा गहराई कार्यक्रम कोड है:
वर्टेक्स शेडर:
precision highp float;
attribute vec3 position;
uniform mat4 uModelView;
uniform mat4 uProjection;
void main() {
gl_Position = uProjection * uModelView * vec4(position, 1.0);
}
टुकड़े टुकड़े करना:
precision highp float;
vec4 packDepth(const in float depth) {
const vec4 bitShift = vec4(256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0);
const vec4 bitMask = vec4(0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);
vec4 res = mod(depth * bitShift * vec4(255), vec4(256)) / vec4(255);
res -= res.xxyz * bitMask;
return res;
}
void main() {
gl_FragData[0] = packDepth(gl_FragCoord.z);
}
तीसरा, यह मेरी जावास्क्रिप्ट फ़ंक्शन की बॉडी है जो "अभिलेखागार" सर्वव्यापी छाया मानचित्रण है
program.bind(gl);
for (i = 0; i < lights.length; i++) {
light = lights[i];
// Updates pointlight's projection matrix
light.updateProjection();
// Binds point light's depth framebuffer
light.depthFramebuffer.bind(gl);
// Updates point light's framebuffer in order to create it
// or if it's resolution changes, it'll be created again.
light.depthFramebuffer.update(gl);
// Sets viewport dimensions with depth framebuffer's dimensions
this.viewport(new Vector2(), light.depthFramebuffer.size);
if (light instanceof PointLight) {
up = new Vector3();
view = new Matrix4();
origin = new Vector3();
target = new Vector3();
for (j = 0; j < 6; j++) {
// Check in which cubemap's face we are ...
switch (j) {
case Cubemap.POSITIVE_X:
target.set(1, 0, 0);
up.set(0, -1, 0);
break;
case Cubemap.NEGATIVE_X:
target.set(-1, 0, 0);
up.set(0, -1, 0);
break;
case Cubemap.POSITIVE_Y:
target.set(0, 1, 0);
up.set(0, 0, 1);
break;
case Cubemap.NEGATIVE_Y:
target.set(0, -1, 0);
up.set(0, 0, -1);
break;
case Cubemap.POSITIVE_Z:
target.set(0, 0, 1);
up.set(0, -1, 0);
break;
case Cubemap.NEGATIVE_Z:
target.set(0, 0, -1);
up.set(0, -1, 0);
break;
}
// Creates a view matrix using target and up vectors according to each face of pointlight's
// cubemap. Furthermore, I translate it in minus light position in order to place
// the point light in the world's origin and render each cubemap's face at this
// point of view
view.lookAt(origin, target, up);
view.mul(new EZ3.Matrix4().translate(light.position.clone().negate()));
// Flips the Y-coordinate of each cubemap face
// scaling the projection matrix by (1, -1, 1).
// This is a perspective projection matrix which has:
// 90 degress of FOV.
// 1.0 of aspect ratio.
// Near clipping plane at 0.01.
// Far clipping plane at 2000.0.
projection = light.projection.clone();
projection.scale(new EZ3.Vector3(1, -1, 1));
// Attaches a cubemap face to current framebuffer in order to record depth values for the face with this line
// gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + j, id, 0);
light.depthFramebuffer.texture.attach(gl, j);
// Clears current framebuffer's color with these lines:
// gl.clearColor(1.0,1.0,1.0,1.0);
// gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
this.clear(color);
// Renders shadow caster meshes using the depth program
for (k = 0; k < shadowCasters.length; k++)
this._renderShadowCaster(shadowCasters[k], program, view, projection);
}
} else {
// Directional light & Spotlight case ...
}
}
चौथा, यह है कि मैं अपने मुख्य वर्टेक्स शेडर और फ्रैगमेंट शैडर में अपनी गहराई के क्यूमैप का उपयोग करते हुए ओमनीडायरेक्शनल शैडो मैपिंग की गणना करता हूं:
वर्टेक्स शेडर:
precision highp float;
attribute vec3 position;
uniform mat4 uModel;
uniform mat4 uModelView;
uniform mat4 uProjection;
varying vec3 vPosition;
void main() {
vPosition = vec3(uModel * vec4(position, 1.0));
gl_Position = uProjection * uModelView * vec4(position, 1.0);
}
टुकड़े टुकड़े करना:
float unpackDepth(in vec4 color) {
return dot(color, vec4(1.0 / (256.0 * 256.0 * 256.0), 1.0 / (256.0 * 256.0), 1.0 / 256.0, 1.0 ));
}
float pointShadow(const in PointLight light, const in samplerCube shadowSampler) {
vec3 direction = vPosition - light.position;
float vertexDepth = clamp(length(direction), 0.0, 1.0);
float shadowMapDepth = unpackDepth(textureCube(shadowSampler, direction));
return (vertexDepth > shadowMapDepth) ? light.shadowDarkness : 1.0;
}
अंत में, यह वह परिणाम है जो मुझे मिल रहा है, मेरे दृश्य में एक विमान, एक घन और एक गोला है। इसके अलावा, लाल उज्ज्वल क्षेत्र बिंदु प्रकाश स्रोत है:
जैसा कि आप देख सकते हैं, मुझे लगता है कि पॉइंट लाइट डेप्थ फ्रेमबफ़र का क्यूबैप यह उनके चेहरों के बीच एक अच्छा प्रक्षेप नहीं कर रहा है।
अब तक, मुझे नहीं पता कि इसे कैसे हल किया जाए।
