Skip to content

VitionVlad/shadow.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

shadow.js

3d engine for your web site it is simple to integrate, can show a good graphics, allow to write your custom shaders, and a lot of fun with shadows! main feature is that you can mix shadowpass with main pass to get multiple shadow maps, or even, render diferent shadows for an object, like a box that casts a sphere as shadow Screenshot from 2023-04-10 14-07-26

How to use?

first, create an engine handle

var eng = new Engine("#glcanvas", standartPostProces, true, true, 4000);

where "#glcanvas" is id to your canvas, standartPostProces shader is shader for post procesing, and a basic one comes with engine, one true is to change the resolution to screen resolution, another for orietantion, and last is shadowmap resolution

now create a mesh, for example:

var mesh = new Mesh(vertexes, normals, uv, standartFragmentShader, standartVertexShader, eng, albedotexture, speculartexture, normalmap, texture X resolution, texture Y resolution, collision can be true or false, cubemap you can pass null);

and a function for infinite loop, you can copy this, then make your changes, main thing here is to endFrame() function to be at end, other dont matter

function drawFrame(now){
    eng.beginShadowPass();
    
    mesh.Draw(eng);

    eng.beginFrame();
    
    mesh.Draw(eng);

    eng.endFrame(drawFrame, now);
}

of course dont forget to do some configurations like:

eng.pos.y = -2.7;
eng.rot.x = 0.0;
eng.rot.y = 0.0;
eng.shadowpos.z = -1.0;
eng.shadowpos.y = -2.7;
eng.shadowrot.y = 0.7;

for positions or

eng.useorthosh = true;
eng.sfar = 100.0;
eng.sfov = 15.0;

shadowmap fov, far, or even use orthographic projection, where sfov will be the size, same goes with main camera:

eng.fov = 4;
eng.useortho = true;

Screenshot from 2023-04-10 15-03-15

particle system added, now you can create different particles, for snow/rain and other.

image

now, you can pass an Uniform class to an additionaluniform field in mesh (array requiered) and get as many as you want uniforms with different values (vec2, vec3, mat4, float, textures, cubemaps)

image

image

and use it like this:

var uni = new Uniform(333);
mesh.additionaluniform = new Array([uni]);

Now you can add simple physiscs for meshes via the prop class, it has mass, and uses two meshes, one will interact with other.

var prop1 = new Prop(0.1);
prop1.MeshMeshInteract(mesh2, mesh);

About

my own 3d webgl2 game engine

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published