প্রথমত, আমি বলতে চাই যে আমি গভীরতার মানচিত্র এবং কিউব্যাপগুলি ব্যবহার করে শ্যাডো ম্যাপিং সম্পর্কে প্রচুর পোস্ট পড়েছি এবং আমি বুঝতে পারি তারা কীভাবে কাজ করে এবং এছাড়াও ওপেনজিএল ব্যবহার করে তাদের সাথে আমার কাজ করার অভিজ্ঞতা রয়েছে তবে আমার বাস্তবায়ন করার একটি সমস্যা আছে "EZ3" নামক আমার 3D গ্রাফিক্স ইঞ্জিনে একক পয়েন্ট আলোর উত্স ব্যবহার করে সর্বশক্তি ছায়া ম্যাপিং কৌশল। আমার ইঞ্জিন একটি ওয়েব থ্রিডি গ্রাফিক্স এপিআই এবং জাভাস্ক্রিপ্ট প্রোগ্রামিং ভাষা হিসাবে ব্যবহার করে, এটি কম্পিউটার বিজ্ঞানে আমার স্নাতক থিসিসের জন্য।
মূলত এইভাবেই আমি আমার ছায়া ম্যাপিং অ্যালগরিদম বাস্তবায়ন করেছি, তবে আমি কেবল পয়েন্ট লাইটের ক্ষেত্রে ফোকাস করব কারণ তাদের সাথে আমি সর্বজনীন ছায়া ম্যাপিং সংরক্ষণাগারভুক্ত করতে পারি।
প্রথমত, আমি সক্রিয়ভাবে সম্মুখ মুখটি এইভাবে কুলিং করছি:
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;
}
দ্বিতীয়ত, প্রতিটি কিউব্যাপের মুখের জন্য গভীরতার মানগুলি রেকর্ড করার জন্য আমি একটি গভীরতা প্রোগ্রাম তৈরি করি, এটি GLSL 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;
}
অবশেষে, এটি আমি পেয়ে যাচ্ছি ফলাফলটি আমার দৃশ্যে একটি বিমান, একটি ঘনক্ষেত এবং একটি গোলক রয়েছে। তদতিরিক্ত, লাল উজ্জ্বল গোলকটি পয়েন্ট আলোর উত্স:
আপনি দেখতে পাচ্ছেন, আমি পয়েন্ট হালকা গভীরতার ফ্রেমবফারের কিউব্যাপের মতো মনে হচ্ছে এটি তাদের মুখের মধ্যে একটি ভাল দ্রবণীয়তা করছে না।
এখন অবধি, এটিকে কীভাবে সমাধান করা যায় সে সম্পর্কে আমার কোনও ধারণা নেই।
