C++博客-脚踏实地

fixed function pipeline

LSH — Mon, 08 Mar 2021 14:05:00 GMT

//******************************************************************

// OpenGL ES 2.0 vertex shader that implements the following

// OpenGL ES 1.1 fixed function pipeline

// - compute lighting equation for up to eight directional/point/

// - spot lights

// - transform position to clip coordinates

// - texture coordinate transforms for up to two texture coordinates

// - compute fog factor

// - compute user clip plane dot product (stored as v_ucp_factor)

//******************************************************************

#define NUM_TEXTURES 2

#define GLI_FOG_MODE_LINEAR 0

#define GLI_FOG_MODE_EXP 1

#define GLI_FOG_MODE_EXP2 2

struct light {

vec4 position; // light position for a point/spot light or

// normalized dir. for a directional light

vec4 ambient_color;

vec4 diffuse_color;

vec4 specular_color;

vec3 spot_direction;

vec3 attenuation_factors;

float spot_exponent;

float spot_cutoff_angle;

bool compute_distance_attenuation;

};

struct material {

vec4 ambient_color;

vec4 diffuse_color;

vec4 specular_color;

vec4 emissive_color;

float specular_exponent;

};

const float c_zero = 0.0;

const float c_one = 1.0;

const int indx_zero = 0;

const int indx_one = 1;

uniform mat4 mvp_matrix; // combined model-view + projection matrix

uniform mat4 modelview_matrix; // model view matrix

uniform mat3 inv_modelview_matrix; // inverse model-view

// matrix used

// to transform normal

uniform mat4 tex_matrix[NUM_TEXTURES]; // texture matrices

uniform bool enable_tex[NUM_TEXTURES]; // texture enables

uniform bool enable_tex_matrix[NUM_TEXTURES]; // texture matrix enables

uniform material material_state;

uniform vec4 ambient_scene_color;

uniform light light_state[8];

uniform bool light_enable_state[8]; // booleans to indicate which of eight

// lights are enabled

uniform int num_lights; // number of lights enabled = sum of

// light_enable_state bools set to TRUE

uniform bool enable_lighting; // is lighting enabled

uniform bool light_model_two_sided; // is two-sided lighting enabled

uniform bool enable_color_material; // is color material enabled

uniform bool enable_fog; // is fog enabled

uniform float fog_density;

uniform float fog_start, fog_end;

uniform int fog_mode; // fog mode - linear, exp, or exp2

uniform bool xform_eye_p; // xform_eye_p is set if we need

// Peye for user clip plane,

// lighting, or fog

uniform bool rescale_normal; // is rescale normal enabled

uniform bool normalize_normal; // is normalize normal enabled

uniform float rescale_normal_factor; // rescale normal factor if

// glEnable(GL_RESCALE_NORMAL)

uniform vec4 ucp_eqn; // user clip plane equation –

// - one user clip plane specified

uniform bool enable_ucp; // is user clip plane enabled

//******************************************************

// vertex attributes - not all of them may be passed in

//******************************************************

attribute vec4 a_position; // this attribute is always specified

attribute vec4 a_texcoord0;// available if enable_tex[0] is true

attribute vec4 a_texcoord1;// available if enable_tex[1] is true

attribute vec4 a_color; // available if !enable_lighting or

// (enable_lighting && enable_color_material)

attribute vec3 a_normal; // available if xform_normal is set

// (required for lighting)

//************************************************

// varying variables output by the vertex shader

//************************************************

varying vec4 v_texcoord[NUM_TEXTURES];

varying vec4 v_front_color;

varying vec4 v_back_color;

varying float v_fog_factor;

varying float v_ucp_factor;

//************************************************

// temporary variables used by the vertex shader

//************************************************

vec4 p_eye;

vec3 n;

vec4 mat_ambient_color;

vec4 mat_diffuse_color;

vec4

lighting_equation(int i)

{

vec4 computed_color = vec4(c_zero, c_zero, c_zero, c_zero);

vec3 h_vec;

float ndotl, ndoth;

float att_factor;

att_factor = c_one;

if(light_state[i].position.w != c_zero)

{

float spot_factor;

vec3 att_dist;

vec3 VPpli;

// this is a point or spot light

// we assume "w" values for PPli and V are the same

VPpli = light_state[i].position.xyz - p_eye.xyz;

if(light_state[i].compute_distance_attenuation)

{

// compute distance attenuation

att_dist.x = c_one;

att_dist.z = dot(VPpli, VPpli);

att_dist.y = sqrt(att_dist.z);

att_factor = c_one / dot(att_dist,

light_state[i].attenuation_factors);

}

VPpli = normalize(VPpli);

if(light_state[i].spot_cutoff_angle < 180.0)

{

// compute spot factor

spot_factor = dot(-VPpli, light_state[i].spot_direction);

if(spot_factor >= cos(radians(light_state[i].spot_cutoff_angle)))

{

spot_factor = pow(spot_factor,light_state[i].spot_exponent);

}

else{

spot_factor = c_zero;

}

att_factor *= spot_factor;

}

else

{

// directional light

VPpli = light_state[i].position.xyz;

}

if(att_factor > c_zero)

{

// process lighting equation --> compute the light color

computed_color += (light_state[i].ambient_color * mat_ambient_color);

ndotl = max(c_zero, dot(n, VPpli));

computed_color += (ndotl * light_state[i].diffuse_color * mat_diffuse_color);

h_vec = normalize(VPpli + vec3(c_zero, c_zero, c_one));

ndoth = dot(n, h_vec);

if (ndoth > c_zero)

{

computed_color += (pow(ndoth,material_state.specular_exponent) *

material_state.specular_color *

light_state[i].specular_color);

}

computed_color *= att_factor; // multiply color with

// computed attenuation factor

// * computed spot factor

}

return computed_color;

}

float compute_fog()

{

float f;

// use eye Z as approximation

if(fog_mode == GLI_FOG_MODE_LINEAR)

{

f = (fog_end - p_eye.z) / (fog_end - fog_start);

}

else if(fog_mode == GLI_FOG_MODE_EXP)

{

f = exp(-(p_eye.z * fog_density));

}

else

{

f = (p_eye.z * fog_density);

f = exp(-(f * f));

}

f = clamp(f, c_zero, c_one);

return f;

}

vec4 do_lighting()

{

vec4 vtx_color;

int i, j;

vtx_color = material_state.emissive_color +

(mat_ambient_color * ambient_scene_color);

j = (int)c_zero;

for (i=(int)c_zero; i<8; i++)

{

if(j >= num_lights)

break;

if (light_enable_state[i])

{

j++;

vtx_color += lighting_equation(i);

}

vtx_color.a = mat_diffuse_color.a;

return vtx_color;

}

void main(void)

{

int i, j;

// do we need to transform P

if(xform_eye_p)

p_eye = modelview_matrix * a_position;

if(enable_lighting)

{

n = inv_modelview_matrix * a_normal;

if(rescale_normal)

n = rescale_normal_factor * n;

if (normalize_normal)

n = normalize(n);

mat_ambient_color = enable_color_material ? a_color

: material_state.ambient_color;

mat_diffuse_color = enable_color_material ? a_color

: material_state.diffuse_color;

v_front_color = do_lighting();

v_back_color = v_front_color;

// do 2-sided lighting

if(light_model_two_sided)

{

n = -n;

v_back_color = do_lighting();

}

else

{

// set the default output color to be the per-vertex /

// per-primitive color

v_front_color = a_color;

v_back_color = a_color;

}

// do texture xforms

v_texcoord[indx_zero] = vec4(c_zero, c_zero, c_zero, c_one);

if(enable_tex[indx_zero])

{

if(enable_tex_matrix[indx_zero])

v_texcoord[indx_zero] = tex_matrix[indx_zero] * a_texcoord0;

else

v_texcoord[indx_zero] = a_texcoord0;

}

v_texcoord[indx_one] = vec4(c_zero, c_zero, c_zero, c_one);

if(enable_tex[indx_one])

{

if(enable_tex_matrix[indx_one])

v_texcoord[indx_one] = tex_matrix[indx_one] * a_texcoord1;

else

v_texcoord[indx_one] = a_texcoord1;

}

v_ucp_factor = enable_ucp ? dot(p_eye, ucp_eqn) : c_zero;

v_fog_factor = enable_fog ? compute_fog() : c_one;

gl_Position = mvp_matrix * a_position;

}

LSH 2021-03-08 22:05 发表评论

rayIntersect 重新修改

LSH — Sat, 07 Dec 2019 16:59:00 GMT


var iGlobalTime = 0.0;
            var iGlobalStartTime = 0.0;
            // 向量
            var vec2 = function (x, y) {
                this.x = x;
                this.y = y;
            }
            vec2.prototype = {
                Length: function () {
                    return Math.sqrt(this.x * this.x + this.y * this.y);
                }
                ,
                Add: function (other) {
                    return new vec2(this.x + other.x, this.y + other.y);
                }
                ,
                Sub: function (other) {
                    return new vec2(this.x - other.x, this.y - other.y);
                }
                ,
                Mul: function (scale) {
                    return new vec2(this.x * scale, this.y * scale);
                }
                ,
                Div: function (scale) {
                    return new vec2(this.x / scale, this.y / scale);
                }
                ,
                Dot: function (other) {
                    return this.x * other.x + this.y * other.y;
                }
            }
            vec2.zore = new vec2(0.0, 0.0);
            var vec3 = function (x, y, z) {
                this.x = x;
                this.y = y;
                this.z = z;
            }
            vec3.prototype = {
                Length: function () {
                    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
                }
                ,
                Add: function (other) {
                    return new vec3(this.x + other.x, this.y + other.y, this.y + other.y);
                }
                ,
                Sub: function (other) {
                    return new vec3(this.x - other.x, this.y - other.y, this.z - other.z);
                }
                ,
                Mul: function (scale) {
                    return new vec3(this.x * scale, this.y * scale, this.z * scale);
                }
                ,
                Div: function (scale) {
                    return new vec3(this.x / scale, this.y / scale, this.z / scale);
                }
                ,
                Dot: function (other) {
                    return this.x * other.x + this.y * other.y + this.z * other.z;
                }
                ,
                Cross: function (other) {
                    return new vec3(this.y * other.z - this.z * other.y,
                        this.z * other.x - this.x * other.z,
                        this.x * other.y - this.y * other.x);
                }
                ,
                Normalize: function () {
                    var len = this.Length();
                    if (len > 0.0) {
                        var invLen = 1 / len;
                        return new vec3(this.x * invLen, this.y * invLen, this.z * invLen)
                    }
                    return new vec3(0.0, 0.0, 0.0);
                }
            }
            vec3.zore = new vec3(0.0, 0.0, 0.0);
            function radians(angle) {
                return (Math.PI / 180.0) * angle;
            }
            function cos(delta) {
                return Math.cos(delta);
            }
            function sin(delta) {
                return Math.sin(delta);
            }
            function clamp(v, min, max) {
                return (v > max) ? max : ((v < min) ? min : v);
            }
            // 颜色
            var Color = function (r, g, b, a) {
                this.r = r;
                this.g = g;
                this.b = b;
                this.a = a;
            }
            Color.prototype = {
                Add: function (oterh) {
                    this.r += oterh.r;
                    this.g += oterh.g;
                    this.b += oterh.b;
                    this.a += oterh.a;
                    return this;
                }
                ,
                Sub: function (oterh) {
                    this.r -= oterh.r;
                    this.g -= oterh.g;
                    this.b -= oterh.b;
                    this.a -= oterh.a;
                    return this;
                }
                ,
                Mul: function (scale) {
                    this.r *= scale;
                    this.g *= scale;
                    this.b *= scale;
                    this.a *= scale;
                    return this;
                }
                ,
                Div: function (oterh) {
                    this.r /= scale;
                    this.g /= scale;
                    this.b /= scale;
                    this.a /= scale;
                    return this;
                }
            }
            Color.balck = new Color(0.0, 0.0, 0.0, 255.0);
            Color.white = new Color(255.0, 255.0, 255.0, 255.0);
            var mat4 = function (m11, m12, m13, m14,
                m21, m22, m23, m24,
                m31, m32, m33, m34,
                m41, m42, m43, m44) {
                this.m11 = m11; this.m12 = m12; this.m13 = m13; this.m14 = m14;
                this.m21 = m21; this.m22 = m22; this.m23 = m23; this.m24 = m24;
                this.m31 = m31; this.m32 = m32; this.m33 = m33; this.m34 = m34;
                this.m41 = m41; this.m42 = m42; this.m43 = m43; this.m44 = m44;
            }
            mat4.prototype = {
                Mul: function (other) {
                    var new_m11 = other.m11 * this.m11 + other.m12 * this.m21 + other.m13 * this.m31 + other.m14 * this.m41;
                    var new_m12 = other.m11 * this.m12 + other.m12 * this.m22 + other.m13 * this.m32 + other.m14 * this.m42;
                    var new_m13 = other.m11 * this.m13 + other.m12 * this.m23 + other.m13 * this.m33 + other.m14 * this.m43;
                    var new_m14 = other.m11 * this.m14 + other.m12 * this.m24 + other.m13 * this.m34 + other.m14 * this.m44;
                    var new_m21 = other.m21 * this.m11 + other.m22 * this.m21 + other.m23 * this.m31 + other.m24 * this.m41;
                    var new_m22 = other.m21 * this.m12 + other.m22 * this.m22 + other.m23 * this.m32 + other.m24 * this.m42;
                    var new_m23 = other.m21 * this.m13 + other.m22 * this.m23 + other.m23 * this.m33 + other.m24 * this.m43;
                    var new_m24 = other.m21 * this.m14 + other.m22 * this.m24 + other.m23 * this.m34 + other.m24 * this.m44;
                    var new_m31 = other.m31 * this.m11 + other.m32 * this.m21 + other.m33 * this.m31 + other.m34 * this.m41;
                    var new_m32 = other.m31 * this.m12 + other.m32 * this.m22 + other.m33 * this.m32 + other.m34 * this.m42;
                    var new_m33 = other.m31 * this.m13 + other.m32 * this.m23 + other.m33 * this.m33 + other.m34 * this.m43;
                    var new_m34 = other.m31 * this.m14 + other.m32 * this.m24 + other.m33 * this.m34 + other.m34 * this.m44;
                    var new_m41 = other.m41 * this.m11 + other.m42 * this.m21 + other.m43 * this.m31 + other.m44 * this.m41;
                    var new_m42 = other.m41 * this.m12 + other.m42 * this.m22 + other.m43 * this.m32 + other.m44 * this.m42;
                    var new_m43 = other.m41 * this.m13 + other.m42 * this.m23 + other.m43 * this.m33 + other.m44 * this.m43;
                    var new_m44 = other.m41 * this.m14 + other.m42 * this.m24 + other.m43 * this.m34 + other.m44 * this.m44;
                    return new mat4(new_m11, new_m12, new_m13, new_m14,
                        new_m21, new_m22, new_m23, new_m24,
                        new_m31, new_m32, new_m33, new_m34,
                        new_m41, new_m42, new_m43, new_m44);
                },
                MulVec3: function (vec3_a) {
                    var new_x = vec3_a.x * this.m11 + vec3_a.y * this.m21 + vec3_a.z * this.m31 + 1.0 * this.m41;
                    var new_y = vec3_a.x * this.m12 + vec3_a.y * this.m22 + vec3_a.z * this.m32 + 1.0 * this.m42;
                    var new_z = vec3_a.x * this.m13 + vec3_a.y * this.m23 + vec3_a.z * this.m33 + 1.0 * this.m43;
                    return new vec3(new_x, new_y, new_z);
                }
                ,
                MulNormal: function (vec3_a) {
                    var new_x = vec3_a.x * this.m11 + vec3_a.y * this.m21 + vec3_a.z * this.m31;
                    var new_y = vec3_a.x * this.m12 + vec3_a.y * this.m22 + vec3_a.z * this.m32;
                    var new_z = vec3_a.x * this.m13 + vec3_a.y * this.m23 + vec3_a.z * this.m33;
                    return new vec3(new_x, new_y, new_z);
                }
            }
            function setRotation(float_x, float_y, float_z) {
                var a = sin(float_x); var b = cos(float_x);
                var c = sin(float_y); var d = cos(float_y);
                var e = sin(float_z); var f = cos(float_z);
                var ac = a * c;
                var bc = b * c;
                return new mat4(d * f, d * e, -c, 0.0,
                    ac * f - b * e, ac * e + b * f, a * d, 0.0,
                    bc * f + a * e, bc * e - a * f, b * d, 0.0,
                    0.0, 0.0, 0.0, 1.0);
            }
            function setTranslation(float_x, float_y, float_z) {
                return new mat4(1.0, 0.0, 0.0, 0.0,
                    0.0, 1.0, 0.0, 0.0,
                    0.0, 0.0, 1.0, 0.0,
                    float_x, float_y, float_z, 1.0);
            }
            var Triangle = function () {
                this.vec3_a = vec3.zore; this.vec2_aUV = vec2.zore;
                this.vec3_b = vec3.zore; this.vec2_bUV = vec2.zore;
                this.vec3_c = vec3.zore; this.vec2_cUV = vec2.zore;
                this.vec3_n = vec3.zore;
            };
            triangles = new Array();
            triangles[0] = new Triangle();
            triangles[1] = new Triangle();
            triangles[2] = new Triangle();
            triangles[3] = new Triangle();
            triangles[4] = new Triangle();
            triangles[5] = new Triangle();
            triangles[6] = new Triangle();
            triangles[7] = new Triangle();
            triangles[8] = new Triangle();
            triangles[9] = new Triangle();
            triangles[10] = new Triangle();
            triangles[11] = new Triangle();
            triangles[12] = new Triangle();
            triangles[13] = new Triangle();
            function createCube() {
                verts = new Array();
                verts[0] = new vec3(-1.0, -1.0, -1.0);
                verts[1] = new vec3(-1.0, -1.0, 1.0);
                verts[2] = new vec3(-1.0, 1.0, -1.0);
                verts[3] = new vec3(-1.0, 1.0, 1.0);
                verts[4] = new vec3(1.0, -1.0, -1.0);
                verts[5] = new vec3(1.0, -1.0, 1.0);
                verts[6] = new vec3(1.0, 1.0, -1.0);
                verts[7] = new vec3(1.0, 1.0, 1.0);
                triangles[0].vec3_a = verts[1]; triangles[0].vec2_aUV = new vec2(0.0, 0.0);
                triangles[0].vec3_b = verts[5]; triangles[0].vec2_bUV = new vec2(1.0, 0.0);
                triangles[0].vec3_c = verts[7]; triangles[0].vec2_cUV = new vec2(1.0, 1.0);
                triangles[0].vec3_n = new vec3(0.0, 0.0, 1.0);
                triangles[1].vec3_a = verts[1]; triangles[1].vec2_aUV = new vec2(0.0, 0.0);
                triangles[1].vec3_b = verts[7]; triangles[1].vec2_bUV = new vec2(1.0, 1.0);
                triangles[1].vec3_c = verts[3]; triangles[1].vec2_cUV = new vec2(0.0, 1.0);
                triangles[1].vec3_n = new vec3(0.0, 0.0, 1.0);
                triangles[2].vec3_a = verts[5]; triangles[2].vec2_aUV = new vec2(0.0, 0.0);
                triangles[2].vec3_b = verts[4]; triangles[2].vec2_bUV = new vec2(1.0, 0.0);
                triangles[2].vec3_c = verts[6]; triangles[2].vec2_cUV = new vec2(1.0, 1.0);
                triangles[2].vec3_n = new vec3(1.0, 0.0, 0.0);
                triangles[3].vec3_a = verts[5]; triangles[3].vec2_aUV = new vec2(0.0, 0.0);
                triangles[3].vec3_b = verts[6]; triangles[3].vec2_bUV = new vec2(1.0, 1.0);
                triangles[3].vec3_c = verts[7]; triangles[3].vec2_cUV = new vec2(0.0, 1.0);
                triangles[3].vec3_n = new vec3(1.0, 0.0, 0.0);
                triangles[4].vec3_a = verts[3]; triangles[4].vec2_aUV = new vec2(0.0, 0.0);
                triangles[4].vec3_b = verts[7]; triangles[4].vec2_bUV = new vec2(1.0, 0.0);
                triangles[4].vec3_c = verts[6];; triangles[4].vec2_cUV = new vec2(1.0, 1.0);
                triangles[4].vec3_n = new vec3(0.0, 1.0, 0.0);
                triangles[5].vec3_a = verts[3]; triangles[5].vec2_aUV = new vec2(0.0, 0.0);
                triangles[5].vec3_b = verts[6]; triangles[5].vec2_bUV = new vec2(1.0, 1.0);
                triangles[5].vec3_c = verts[2]; triangles[5].vec2_cUV = new vec2(0.0, 1.0);
                triangles[5].vec3_n = new vec3(0.0, 1.0, 0.0);
                triangles[6].vec3_a = verts[0]; triangles[6].vec2_aUV = new vec2(1.0, 0.0);
                triangles[6].vec3_b = verts[6]; triangles[6].vec2_bUV = new vec2(0.0, 1.0);
                triangles[6].vec3_c = verts[4]; triangles[6].vec2_cUV = new vec2(0.0, 0.0);
                triangles[6].vec3_n = new vec3(0.0, 0.0, -1.0);
                triangles[7].vec3_a = verts[0]; triangles[7].vec2_aUV = new vec2(1.0, 0.0);
                triangles[7].vec3_b = verts[2]; triangles[7].vec2_bUV = new vec2(1.0, 1.0);
                triangles[7].vec3_c = verts[6]; triangles[7].vec2_cUV = new vec2(0.0, 1.0);
                triangles[7].vec3_n = new vec3(0.0, 0.0, -1.0);
                triangles[8].vec3_a = verts[1]; triangles[8].vec2_aUV = new vec2(1.0, 0.0);
                triangles[8].vec3_b = verts[2]; triangles[8].vec2_bUV = new vec2(0.0, 1.0);
                triangles[8].vec3_c = verts[0]; triangles[8].vec2_cUV = new vec2(0.0, 0.0);
                triangles[8].vec3_n = new vec3(-1.0, 0.0, 0.0);
                triangles[9].vec3_a = verts[1]; triangles[9].vec2_aUV = new vec2(1.0, 0.0);
                triangles[9].vec3_b = verts[3]; triangles[9].vec2_bUV = new vec2(1.0, 1.0);
                triangles[9].vec3_c = verts[2]; triangles[9].vec2_cUV = new vec2(0.0, 1.0);
                triangles[9].vec3_n = new vec3(-1.0, 0.0, 0.0);
                triangles[10].vec3_a = verts[1]; triangles[10].vec2_aUV = new vec2(0.0, 0.0);
                triangles[10].vec3_b = verts[0]; triangles[10].vec2_bUV = new vec2(0.0, 1.0);
                triangles[10].vec3_c = verts[4]; triangles[10].vec2_cUV = new vec2(1.0, 1.0);
                triangles[10].vec3_n = new vec3(0.0, -1.0, 0.0);
                triangles[11].vec3_a = verts[1]; triangles[11].vec2_aUV = new vec2(0.0, 0.0);
                triangles[11].vec3_b = verts[4]; triangles[11].vec2_bUV = new vec2(1.0, 1.0);
                triangles[11].vec3_c = verts[5]; triangles[11].vec2_cUV = new vec2(1.0, 0.0);
                triangles[11].vec3_n = new vec3(0.0, -1.0, 0.0);
            }
            function createFloor() {
                verts = new Array();
                verts[0] = new vec3(-3.0, -1.0, -3.0);
                verts[1] = new vec3(-3.0, -1.0, 3.0);
                verts[2] = new vec3(3.0, -1.0, 3.0);
                verts[3] = new vec3(3.0, -1.0, -3.0);
                triangles[12].vec3_a = verts[0]; triangles[12].vec2_aUV = new vec2(0.0, 0.0);
                triangles[12].vec3_b = verts[1]; triangles[12].vec2_bUV = new vec2(0.0, 1.0);
                triangles[12].vec3_c = verts[3]; triangles[12].vec2_cUV = new vec2(1.0, 0.0);
                triangles[12].vec3_n = new vec3(0.0, 1.0, 0.0);
                triangles[13].vec3_a = verts[1]; triangles[13].vec2_aUV = new vec2(0.0, 1.0);
                triangles[13].vec3_b = verts[2]; triangles[13].vec2_bUV = new vec2(1.0, 1.0);
                triangles[13].vec3_c = verts[3]; triangles[13].vec2_cUV = new vec2(1.0, 0.0);
                triangles[13].vec3_n = new vec3(0.0, 1.0, 0.0);
            }
            function createTexture() {
                var img = document.getElementById("texture1");
                if (!img.complete) return;
                if (window.samplerTexture) return;
                samplerTexture = new Texture(
                    img.width,
                    img.height,
                    GetImageData(img),
                    "repeat",
                    "repeat",
                    "blend"
                )
            }
            function RayIntersectTriangle(
                vec3_ro, vec3_rd,
                vec3_v0, vec3_v1, vec3_v2,
                vec3_result) {
                var E1 = vec3_v1.Sub(vec3_v0);
                var E2 = vec3_v2.Sub(vec3_v0);
                var P = vec3_rd.Cross(E2);
                var det = E1.Dot(P);
                var T = vec3.zore;
                if (det > 0.0)
                    T = vec3_ro.Sub(vec3_v0);
                else {
                    T = vec3_v0.Sub(vec3_ro);
                    det = -det;
                }
                if (det < 0.001)
                    return false;
                var u = T.Dot(P);
                if (u < 0. || u > det)
                    return false;
                var Q = T.Cross(E1);
                v = vec3_rd.Dot(Q);
                if (v < 0. || u + v > det)
                    return false;
                vec3_result.x = E2.Dot(Q);
                var fInvDet = 1. / det;
                vec3_result.x *= fInvDet;
                vec3_result.y = u * fInvDet;
                vec3_result.z = v * fInvDet;
                return true;
            }
            var mdv;
            var lig = new vec3(0.3, 0.7, 0.5).Normalize();
            function SurfaceShader(vec3_nor, vec2_uv, float_z, vec3_wnor) {
                var dif = clamp(vec3_nor.Dot(lig), 0.0, 1.0);
                var brdf = 0.5 + 0.8 * dif;
                brdf *= 4.0 * Math.exp(-0.7 * Math.abs(float_z));
                if (window.samplerTexture) {
                    var c = window.samplerTexture.GetRGB(vec2_uv.x, 1.0 - vec2_uv.y);
                    c.r, c.g, c.b, c.a
                    return new Color(c.r * brdf, c.g * brdf, c.b * brdf, c.a)
                }
                return new Color(128.0 * brdf, 128.0 * brdf, 196.0 * brdf, 255);
            }
            function pixel_shader(x, y, w, h) {
                var pix = new vec2(-1.0 + 2.0 * x / w, -1.0 + 2.0 * y / h);
                pix.x *= w / h;
                var ro = new vec3(0.0, 0.0, 2.0);
                var rd = new vec3(pix.x, pix.y, 0.0).Sub(ro).Normalize();
                var color = Color.balck;
                // clear zbuffer
                var mindist = -1000000.0;
                for (var i = 0; i < 14; i++) {
                    // transform to eye space
                    var ep0 = mdv.MulVec3(triangles[i].vec3_a);
                    var ep1 = mdv.MulVec3(triangles[i].vec3_b);
                    var ep2 = mdv.MulVec3(triangles[i].vec3_c);
                    var nor = mdv.MulNormal(triangles[i].vec3_n);
                    var result = vec3.zore;
                    if (RayIntersectTriangle(ro, rd, ep0, ep1, ep2, result)) {
                        // do uv linear interpolation.
                        var uv = triangles[i].vec2_bUV.Sub(triangles[i].vec2_aUV).Mul(result.y).Add(
                            triangles[i].vec2_cUV.Sub(triangles[i].vec2_aUV).Mul(result.z)
                        );
                        var z = ro.z + result.x * rd.z;
                        if (z > mindist) {
                            mindist = z;
                            // perform lighting/shading
                            color = SurfaceShader(nor, uv, z, triangles[i].n);
                        }
                    }
                }
                return color;
            }
            function main() {
                var d = new Date();
                iGlobalTime = (d.getTime() - iGlobalStartTime) / 1000;
                mdv = setTranslation(0.0, 0.5, -3.0).Mul(
                    setRotation(0.6, 0.0, 0.0).Mul(
                        setRotation(0.0, 3.1 * sin(0.3 * iGlobalTime), 0.0)
                    )
                );
                var canvas = document.getElementById('nes_screen');
                if (canvas && canvas.getContext) {
                    var ctx = canvas.getContext('2d');
                    var w = 200; //canvas.clientWidth, 
                    var h = 120; //canvas.clientHeight;
                    ctx.fillStyle = "#000000";
                    ctx.fillRect(0, 0, w, h);
                    var imgdata = ctx.getImageData(0, 0, w, h);
                    var pixels = imgdata.data;
                    var i = 0;
                    for (var y = h - 1; y >= 0; y--)
                        for (var x = 0; x < w; x++) {
                            var data = pixel_shader(x, y, w, h);
                            pixels[i++] = data.r;
                            pixels[i++] = data.g;
                            pixels[i++] = data.b;
                            pixels[i++] = data.a;
                        }
                    ctx.putImageData(imgdata, 0, 0);
                }
                //setTimeout(main,33);
                requestAnimationFrame(main);
            }
            function RequestFullScreen(ele) {
                if (ele == null) ele = document.documentElement;
                if (ele.requestFullscreen) ele.requestFullscreen();
                else if (ele.msRequestFullscreen) ele.msRequestFullscreen();
                else if (ele.mozRequestFullScreen) ele.mozRequestFullScreen();
                else if (ele.webkitRequestFullscreen) ele.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            }
            function GetImageData(img) {
                var canvas = document.createElement('canvas');
                canvas.width = img.width; //☜
                canvas.height = img.height;
                canvas.style.backgroundColor = '#000';
                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                var data = ctx.getImageData(0, 0, img.width, img.height).data;
                return data;
            }
            function Clamp(min, max, value) {
                value = value < min ? min : value;
                value = max < value ? max : value;
                return value;
            }
            function Lerp(a, b, t) {
                return a + (b - a) * t;
            }
            function Texture(width, height, data, wrapS, wrapT, mode) {
                this.width = width;
                this.height = height;
                this.data = data;
                this.wrapS = wrapS == null ? "clamp" : wrapS;
                this.wrapT = wrapT == null ? "clamp" : wrapT;
                this.mode = mode === "blend" ? "blend" : "modulate";
            } Texture.prototype = {
                GetRGB: function (s, t) {
                    var wrapS = this.wrapS;
                    var wrapT = this.wrapT;
                    var mode = this.mode;
                    if (wrapS === "clamp") {
                        s = Clamp(0, 1, s)
                    } else if (wrapS === "repeat") {
                        s -= (s | 0);
                        s = s < 0 ? s + 1 : s;
                    }
                    if (wrapT === "clamp") {
                        t = Clamp(0, 1, t);
                    } else if (wrapT === "repeat") {
                        t -= (t | 0);
                        t = t < 0 ? t + 1 : t;
                    }
                    var w = s * this.width;
                    var h = t * this.height;
                    var i = w | 0;
                    var j = h | 0;
                    var di = w - i;
                    var dj = h - j;
                    i = Clamp(0, this.width - 1, i);
                    j = Clamp(0, this.height - 1, j);
                    i1 = i + 1;
                    j1 = j + 1;
                    if (wrapS === "clamp") {
                        i1 = Clamp(0, this.width - 1, i1);
                    } else if (wrapS === "repeat") {
                        if (i1 === this.width) {
                            i1 = 0;
                        }
                    }
                    if (wrapT === "clamp") {
                        j1 = Clamp(0, this.width - 1, j1);
                    } else if (wrapT === "repeat") {
                        if (j1 === this.width) {
                            j1 = 0;
                        }
                    }
                    var components = 4;
                    var pij = (j * this.width + i) * components;
                    var pi1j = (j * this.width + i1) * components;
                    var pij1 = (j1 * this.width + i) * components;
                    var pi1ji = (j1 * this.width + i1) * components;
                    if (mode === "modulate") {
                    } else if (mode === "blend") {
                    }
                    return {
                        r: this.Biliner(this.data[pij], this.data[pi1j], this.data[pij1], this.data[pi1ji], di, dj),
                        g: this.Biliner(this.data[pij + 1], this.data[pi1j + 1], this.data[pij1 + 1], this.data[pi1ji + 1], di, dj),
                        b: this.Biliner(this.data[pij + 2], this.data[pi1j + 2], this.data[pij1 + 2], this.data[pi1ji + 2], di, dj),
                        a: this.Biliner(this.data[pij + 3], this.data[pi1j + 3], this.data[pij1 + 3], this.data[pi1ji + 3], di, dj)
                    }
                },
                Biliner: function (a, b, c, d, s, t) {
                    var v1 = a + (b - a) * s;
                    var v2 = c + (d - c) * s;
                    return v1 + (v2 - v1) * t;
                }
            }
            function init() {
                var d = new Date();
                iGlobalStartTime = d.getTime();
                var canvas = document.getElementById('nes_screen');
                canvas.onmousedown = function (ev) {
                    if (ev.button === 2) RequestFullScreen(canvas);
                }
                createCube();
                createFloor();
                createTexture();
                window.createTexture = createTexture;
            }
            try {
                init();
                main();
            }
            catch (err) {
                alert(err.message);
            }

----------------------------------
一段光线求交的场景!
----------------------------------

LSH 2019-12-08 00:59 发表评论

350行路径追踪渲染器online demo

LSH — Sat, 07 Dec 2019 07:21:00 GMT


function CreateFPSCounter() {
    var mFrame;
    var mTo;
    var mFPS;
    var mLastTime;
    var mDeltaTime;
    var iReset = function (time) {
        time = time || 0;
        mFrame = 0;
        mTo = time;
        mFPS = 60.0;
        mLastTime = time;
        mDeltaTime = 0;
    }
    var iCount = function (time) {
        mFrame++;
        mDeltaTime = time - mLastTime;
        mLastTime = time;
        if ((time - mTo) > 500.0) {
            mFPS = 1000.0 * mFrame / (time - mTo);
            mFrame = 0;
            mTo = time;
            return true;
        }
        return false;
    }
    var iGetFPS = function () {
        return mFPS;
    }
    var iGetDeltaTime = function () {
        return mDeltaTime;
    }
    return { Reset: iReset, Count: iCount, GetFPS: iGetFPS, GetDeltaTime: iGetDeltaTime };
}
function RequestFullScreen(ele) {
    if (ele == null) ele = document.documentElement;
    if (ele.requestFullscreen) ele.requestFullscreen();
    else if (ele.msRequestFullscreen) ele.msRequestFullscreen();
    else if (ele.mozRequestFullScreen) ele.mozRequestFullScreen();
    else if (ele.webkitRequestFullscreen) ele.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
function Init() {
    if (window.init_flag === undefined) {
        console.log("init_flag");
        var iMouse = window.iMouse = { x: 0, y: 0, z: 0, w: 0 };
        var cv = document.getElementById("displayPort");
        var fpsConter = CreateFPSCounter();
        var context = cv.getContext('2d');
        var W = cv.clientWidth; H = cv.clientHeight;
        var imageData = context.getImageData(0, 0, W, H);
        var pixels = imageData.data;
        for (var i = 0; i < W * H; ++i)
            pixels[4 * i + 3] = 255;
        function MainLoop(deltaTime) {
            var tracer = window.rayTracer;
            if (tracer == null) return;
            if (iMouse.z > 0.) tracer.ResetFrames();
            var frames = tracer.CountFrames();
            var i = 0, color;
            for (var y = 0; y < H; ++y) {
                for (var x = 0; x < W; ++x, ++i) {
                    color = tracer.Render(x, y, W, H);
                    pixels[i++] = (color.r * 255) | 0;
                    pixels[i++] = (color.g * 255) | 0;
                    pixels[i++] = (color.b * 255) | 0;
                }
            }
            context.putImageData(imageData, 0, 0);
            // console.log(deltaTime, fpsConter.GetFPS())
        }
        function elementPos(element) {
            var x = 0, y = 0;
            while (element.offsetParent) {
                x += element.offsetLeft;
                y += element.offsetTop;
                element = element.offsetParent;
            }
            return { x: x, y: y };
        }
        function getMouseCoords(ev, canvasElement) {
            var pos = elementPos(canvasElement);
            var mcx = (ev.pageX - pos.x) * canvasElement.width / canvasElement.offsetWidth;
            var mcy = (ev.pageY - pos.y) * canvasElement.height / canvasElement.offsetHeight;
            return { x: mcx, y: mcy };
        }
        cv.onmousemove = function (ev) {
            var mouse = getMouseCoords(ev, cv);
            iMouse.x = mouse.x;
            iMouse.y = mouse.y;
        }
        cv.onmousedown = function (ev) {
            if (ev.button === 0) iMouse.z = 1;
            else if (ev.button === 2) { 
                iMouse.w = 1;
                RequestFullScreen(cv);
            }
        }
        document.onmouseup = function (ev) {
            if (ev.button === 0) iMouse.z = 0;
            else if (ev.button === 2) iMouse.w = 0;
        }
        ; (function (loopFunc) {
            var fisrt = true;
            function L(timestamp) {
                if (fisrt) {
                    fisrt = false, fpsConter.Reset(timestamp)
                } else {
                    fpsConter.Count(timestamp);
                }
                loopFunc(fpsConter.GetDeltaTime());
                requestAnimationFrame(L)
            };
            requestAnimationFrame(L);
        })(MainLoop);
        window.init_flag = true;
    }
}
function CreateTracer() {
    try {
        (new Function(document.getElementById("codeEditor").value))();
        window.rayTracer = new window.pt();
        window.iMouse.x = window.iMouse.y = 0;
        var cv = document.getElementById("displayPort");
        var W = cv.clientWidth; H = cv.clientHeight;
        window.rayTracer.CreateBackBuffer(W, H);
    } catch(e) {
        alert(e)
    }
}
Init();
CreateTracer();


window.pt = (function () {
    // 3维向量
    function Vec3(x, y, z) {
        x = x === undefined ? 0 : x;
        this.x = x;
        this.y = y === undefined ? x : y;
        this.z = z === undefined ? x : z;
    } Vec3.prototype = {
        Set: function (x, y, z) { this.x = x, this.y = y, this.z = z; return this; },
        Copy: function (other) { this.x = other.x, this.y = other.y, this.z = other.z; return this; },
        Add: function (other) { return new Vec3(this.x + other.x, this.y + other.y, this.z + other.z); },
        AddSelf: function (other) { this.x += other.x, this.y += other.y, this.z += other.z; return this; },
        Sub: function (other) { return new Vec3(this.x - other.x, this.y - other.y, this.z - other.z); },
        SubSelf: function (other) { this.x -= other.x, this.y -= other.y, this.z -= other.z; return this; },
        Scale: function (factor) { return new Vec3(this.x * factor, this.y * factor, this.z * factor); },
        ScaleSelf: function (factor) { this.x *= factor, this.y *= factor, this.z *= factor; return this; },
        Length: function () { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); },
        Normalize: function () { return this.Scale(1. / this.Length()); },
        NormalizeSelf: function () { var l = 1. / Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); this.x *= l; this.y *= l; this.z *= l; return this; },
        Dot: function (other) { return this.x * other.x + this.y * other.y + this.z * other.z; },
        Cross: function (other) { return new Vec3(this.y * other.z - this.z * other.y, this.z * other.x - this.x * other.z, this.x * other.y - this.y * other.x); }
    }
    var eye = new Vec3(0, 0, -2.41);
    var up = new Vec3(0, 1, 0);
    var zero = new Vec3(0, 0, 0);
    var one = new Vec3(1, 1, 1);
    var sqrt2 = Math.sqrt(2);
    // 颜色
    function Color(r, g, b) { this.r = r; this.g = g; this.b = b; }
    Color.prototype = {
        Set: function (r, g, b) { this.r = r; this.g = g; this.b = b; return this; },
        Copy: function (other) { this.r = other.r, this.g = other.g, this.b = other.b; return this; },
        Scale: function (factor) { return new Color(this.r * factor, this.g * factor, this.b * factor); },
        ScaleSelf: function (factor) { this.r *= factor, this.g *= factor, this.b *= factor; return this; },
        Multiply: function (other) { return new Color(this.r * other.r, this.g * other.g, this.b * other.b); },
        MultiplySelf: function (other) { this.r *= other.r, this.g *= other.g, this.b *= other.b; return this; },
        Lerp: function (other, t) { return new Color((1 - t) * this.r + t * other.r, (1 - t) * this.g + t * other.g, (1 - t) * this.b + t * other.b); },
        Gamma: function (s) { var inv = 1/s; return new Color(Math.pow(this.r, inv), Math.pow(this.g, inv), Math.pow(this.b, inv)); },
        GammaSelf: function (s) { var inv = 1/s; return this.Set(Math.pow(this.r, inv), Math.pow(this.g, inv), Math.pow(this.b, inv)); return this; }
    }
    function MakeColor255(r, g, b) { return new Color(r / 255, g / 255, b / 255); }
    var colorWhite = new Color(1, 1, 1);
    var colorBlack = new Color(0, 0, 0);
    var colorRed = new Color(1, 0, 0);
    var colorGreen = new Color(0, 1, 0);
    var colorBlue = new Color(0, 0, 1);
    var colorSky = new Color(0.5, 0.7, 1.0);
    // 光线
    function Ray(o, d, t) {
        this.origin = o;
        this.direction = d;
        this.t = t || 1;
    } Ray.prototype = {
        GetOrigin: function () { return this.origin; },
        GetDirection: function () { return this.direction; },
        GetT: function () { return this.t; },
        GetPoint: function (t) { return this.origin.Add(this.direction.Scale(typeof t === 'number' ? t : this.t)); },
    }
    function Material(type, parameters) {
        this.type = type;
        this.parameters = parameters == null ? {} : parameters;
    }
    // 球体
    function Sphere(center, radius, material) {
        this.center = center;
        this.radius = radius;
        this.material = material;
    } Sphere.prototype = {
        Intersection(ray) {
            var oc = ray.GetOrigin().Sub(this.center);
            var b = oc.Dot(ray.GetDirection());
            var c = oc.Dot(oc) - this.radius * this.radius;
            var h = b * b - c;
            if (h < 0) return -1;
            return -b - Math.sqrt(h);
        },
        HitNormal(hit) {
            return hit.Sub(this.center).ScaleSelf(1. / this.radius);
        }
    }
    // 相机
    function Camera(eye, target, up) {
        this.eye = new Vec3().Copy(eye);
        this.target = new Vec3().Copy(target);
        this.up = new Vec3().Copy(up);
        this.CalcUVW(eye);
        this.an = 0;
        this.ro = new Vec3().Copy(this.eye);
    } Camera.prototype = {
        CalcUVW(eye) {
            this.w = this.target.Sub(eye).NormalizeSelf();
            this.u = this.w.Cross(this.up).NormalizeSelf();
            this.v = this.u.Cross(this.w);
        },
        GetRay(u, v, width, height) {
            if (iMouse.z > 0.) {
                var an = 2 * Math.PI * (iMouse.x / width);
                this.ro = new Vec3().Set(this.eye.z * Math.sin(an), 0.0, this.eye.z * Math.cos(an));
                this.CalcUVW(this.ro);
                this.an = an;
            }
            var ro = this.ro;
            var rd = this.target.Sub(this.eye).AddSelf(new Vec3(u * sqrt2, v * sqrt2, 0.)).NormalizeSelf();
            var x = rd.x, y = rd.y, z = rd.z;
            rd.x = x * this.u.x + y * this.v.x + z * this.w.x;
            rd.y = x * this.u.y + y * this.v.y + z * this.w.y;
            rd.z = x * this.u.z + y * this.v.z + z * this.w.z;
            return new Ray(ro, rd, 0);
        }
    }
    // 后缓冲区
    function BackBuffer(width, height, frames) {
        this.width = width;
        this.height = height;
        this.data = new Array(width * height * 4);
    } BackBuffer.prototype = {
        Clear: function (r, g, b) {
            r = r === undefined ? 0 : r;
            g = g === undefined ? r : g;
            b = b === undefined ? r : b;
            var size = this.width * this.height;
            for (var i = 0; i < size; ++i) {
                this.data[4 * i + 0] = r;
                this.data[4 * i + 1] = g;
                this.data[4 * i + 2] = b;
                this.data[4 * i + 3] = 1;
            }
        },
        Read: function (x, y) {
            var offset = (y * this.width + x) * 4;
            var r = this.data[offset + 0];
            var g = this.data[offset + 1];
            var b = this.data[offset + 2];
            return [r, g, b];
        },
        Write: function (x, y, r, g, b) {
            var offset = (y * this.width + x) * 4;
            this.data[offset + 0] = r;
            this.data[offset + 1] = g;
            this.data[offset + 2] = b;
        }
    }
    // 追踪器
    function Tracer() {
        this.camera = new Camera(eye, zero, up);
        this.spheres = new Array(
            new Sphere(new Vec3(-0.5, 0.0, 0.), 1.0, new Material(1, { refractRate: 1.5, color: MakeColor255(196, 32, 128) })),
            new Sphere(new Vec3(0.825, -0.5, -0.5), 0.5, new Material(2, { color: new Color(0.1, 1., 0.125) })),
            new Sphere(new Vec3(-0.75, -0.65, -1.), 0.2, new Material(2, { fuzz: 0.3, color: colorBlue })),
            new Sphere(new Vec3(0.25, 0.15, -1.), 0.25, new Material(3, { refractRate: 1.2, glass : true, fuzz: 0.3, color: colorWhite })),
            new Sphere(new Vec3(-1.05, -0.25, -1.), 0.25, new Material(3, { refractRate: 1.2, fuzz: 0.3, color: colorWhite })),
            new Sphere(new Vec3(0.0, -10000.85, -1.0), 10000.0, new Material(1, null))
        );
        this.frames = 0;
    } Tracer.prototype = {
        RandomPointInUnitSphere: function () {
            return new Vec3(
                Math.random() * 2. - 1.,
                Math.random() * 2. - 1.,
                Math.random() * 2. - 1.
            );
        },
        // 基向量
        Frisvad: function (n, f, r) {
            if (n.z < -0.999999) {
                f.Set(0., -1, 0);
                r.Set(-1, 0, 0);
            } else {
                var a = 1. / (1. + n.z);
                var b = -n.x * n.y * a;
                f.Set(1. - n.x * n.x * a, b, -n.x);
                r.Set(b, 1. - n.y * n.y * a, -n.y);
            }
        },
        // cos权重随机半球采样
        CosWeightedRandomHemisphereDirection(normal) {
            var x = Math.random(), y = Math.random();
            var u = new Vec3(), v = new Vec3(), w = normal;
            this.Frisvad(w, u, v);
            var ra = Math.sqrt(y);
            var rx = ra * Math.cos(2 * Math.PI * x);
            var ry = ra * Math.sin(2 * Math.PI * x);
            var rz = Math.sqrt(1.0 - y);
            u.x = rx * u.x + ry * v.x + rz * w.x;
            u.y = rx * u.y + ry * v.y + rz * w.y;
            u.z = rx * u.z + ry * v.z + rz * w.z;
            return u.NormalizeSelf();
        },
        Scatered: function (color, ray, sphere) {
            var material = sphere.material;
            var hit = ray.GetPoint();
            if (material.type === 1) {
                return this.Diffused(color, hit, sphere.HitNormal(hit), ray.GetDirection())
            } else if (material.type === 2) {
                return this.Reflected(color, hit, sphere.HitNormal(hit), ray.GetDirection(), material.parameters.fuzz);
            } else if (material.type === 3) {
                return this.Refracted(color, hit, sphere.HitNormal(hit), ray.GetDirection(), material.parameters.refractRate, material.parameters.glass);
            }
        },
        Diffused: function (color, hit, normal, direction) {
            color.ScaleSelf(0.5);
            var target = hit.Add(normal).AddSelf(this.RandomPointInUnitSphere());
            return new Ray(hit, target.SubSelf(hit).NormalizeSelf());
            //return new Ray(hit, this.CosWeightedRandomHemisphereDirection(normal));
        },
        Reflected: function (color, hit, normal, direction, fuzz) {
            function reflect(direction, normal) {
                var l = -2 * direction.Dot(normal);
                return normal.Scale(l).AddSelf(direction);
            }
            color.ScaleSelf(0.5);
            var n = this.RandomPointInUnitSphere().ScaleSelf(fuzz || 0);
            var r = reflect(direction, normal);
            return new Ray(hit, r.AddSelf(n).NormalizeSelf());
        },
        Refracted: function (color, hit, normal, direction, refractRate, glass) {
            var glass = glass === undefined ? false : glass;
            var outwardNormal, realRate;
            var cosWi = direction.Dot(normal);
            if (cosWi > 0) {
                outwardNormal = normal.Scale(-1);
                realRate = glass ? 1.0 / refractRate : refractRate;
                //realRate = 1.0 / refractRate;
                //realRate = refractRate;
                cosWi = direction.Dot(outwardNormal);
            } else {
                outwardNormal = normal;
                realRate = glass ? refractRate : 1.0 / refractRate;
                //realRate = refractRate;
                //realRate = 1.0 / refractRate;
            }
            var cos2Wo = 1.0 - realRate * realRate * (1.0 - cosWi * cosWi);
            if (cos2Wo > 0) {
                var y = outwardNormal.Scale(-Math.sqrt(cos2Wo));
                var x = outwardNormal.Scale(-cosWi).AddSelf(direction).ScaleSelf(realRate);
                var refractRay = x.AddSelf(y);
                return new Ray(hit, refractRay);
            } else {
                return this.Reflected(color, hit, normal, direction);
            }
        },
        Trace: function (ray, deep) {
            var color = new Color().Copy(colorWhite);
            if (deep > 5) {
                color.Copy(colorBlack);
                return color;
            }
            var hitSomething = false, min = 999, t, sphere;
            this.spheres.forEach(function (sp) {
                t = sp.Intersection(ray);
                if (t > 0. && t < min) {
                    hitSomething = true;
                    min = t;
                    sphere = sp;
                }
            });
            if (hitSomething) {
                ray.t = min;
                var material = sphere.material;
                if (material.parameters.color) color.Copy(material.parameters.color);
                var newRay = this.Scatered(color, ray, sphere, color);
                color.MultiplySelf(this.Trace(newRay, deep + 1));
            } else {
                var t = 0.5 * (ray.direction.y + 1.0);
                return colorWhite.Lerp(colorSky, t);
            }
            return color;
        },
        Render: function (x, y, width, height) {
            // antialiasing
            var u = (x + Math.random()) / width, v = (y + Math.random()) / height;
            u = (u * 2 - 1.) * (width / height);
            v = 1. - v * 2;
            var ray = this.camera.GetRay(u, v, width, height);
            var color = this.Trace(ray, 0);
            // backbuffer
            var buffer = this.buffer;
            if (buffer) {
                var frames = this.frames;
                var c = buffer.Read(x, y);
                var f = (frames - 1) / frames;
                var r = c[0], g = c[1], b = c[2];
                r = r * f + color.r / frames;
                g = g * f + color.g / frames;
                b = b * f + color.b / frames;
                buffer.Write(x, y, r, g, b);
                color.Set(r, g, b)
            }
            // gamma corrected
            color.GammaSelf(2.2);
            return color;
        },
        CreateBackBuffer: function (width, height) {
            var buffer = new BackBuffer(width, height);
            buffer.Clear();
            this.buffer = buffer;
        },
        CountFrames: function () {
            return ++this.frames;
        },
        ResetFrames: function () {
            this.frames = 0;
            return this.frames;
        },
    }
    return Tracer;
})()

这是一个简单的路径追踪demo

移动视角:左键按下+鼠标移动

全屏查看:右键按下

LSH 2019-12-07 15:21 发表评论

关于向量的叉乘操作

LSH — Sun, 03 Nov 2019 15:34:00 GMT

在三维中常常需要重算正交的基向量组,
由于叉乘操作是有序的. 一般来说 : UxV不等于VxU,
所有往往记不住到底是哪个左向量乘哪个右向量求出
第三个向量,由于吃了一些亏所以做了总结.
i,j,k三个基向量, 如果你使用的图形引擎Z往屏幕外面,
右手边X和上方向Y规定为正方向的一组正交向量,如果
你使用的模型的基向量组和它相同,那么放心用.
ixj=k, kxi=j, jxk=i
但是你可能不总是那么幸运.也许你打算使用Z往屏幕里面,
右手边X和上方向Y规定为正方向的一组正交向量,这时你就
需要改变叉乘方式了
jxi=k, ixk=j, kxj=i
也就是统统反过来使用就可以了.
但是如果你想使用Z往屏幕里面,右手边X和下方向Y规定
为正方向的一组正交向量时这时你又需要怎么弄呢?
其实还是:
ixj=k, kxi=j, jxk=i
如果你想使用Z往屏幕里面,左手边X和下方向Y规定
为正方向的一组正交向量时这时你又需要怎么弄呢?
这时又是:
jxi=k, ixk=j, kxj=i
也是统统反过来使用.
这时怎么得到得结论?
其实就是通过计算得到的
以下都假设x右为正方向,y上为正方向,z往屏幕外为正方向设备的环境
测试.

var vec3 = glMatrix.vec3;

console.log("-------------------->z轴往屏幕里为正的坐标系");

var u = vec3.fromValues(1,0,0)

var v = vec3.fromValues(0,1,0)

var w = vec3.fromValues(0,0,-1)

console.log(vec3.cross(vec3.create(), w,v));

console.log(vec3.cross(vec3.create(), u,w));

console.log(vec3.cross(vec3.create(), v,u));

console.log("-------------------->y轴向下为正的坐标系");

var u = vec3.fromValues(1,0,0)

var v = vec3.fromValues(0,-1,0)

var w = vec3.fromValues(0,0,1)

console.log(vec3.cross(vec3.create(), w,v));

console.log(vec3.cross(vec3.create(), u,w));

console.log(vec3.cross(vec3.create(), v,u));

console.log("-------------------->x轴向左为正的坐标系");

var u = vec3.fromValues(-1,0,0)

var v = vec3.fromValues(0,1,0)

var w = vec3.fromValues(0,0,1)

console.log(vec3.cross(vec3.create(), w,v));

console.log(vec3.cross(vec3.create(), u,w));

console.log(vec3.cross(vec3.create(), v,u));

console.log("-------------------->全部反为正坐标系");

var u = vec3.fromValues(-1,0,0)

var v = vec3.fromValues(0,-1,0)

var w = vec3.fromValues(0,0,-1)

console.log(vec3.cross(vec3.create(), w,v));

console.log(vec3.cross(vec3.create(), u,w));

console.log(vec3.cross(vec3.create(), v,u));

以上都能得到正确的向量组

console.log("-------------------->z轴往屏幕外为正坐标系");

var u = vec3.fromValues(1,0,0)

var v = vec3.fromValues(0,1,0)

var w = vec3.fromValues(0,0,1)

console.log(vec3.cross(vec3.create(), v,w));

console.log(vec3.cross(vec3.create(), w,u));

console.log(vec3.cross(vec3.create(), u,v));

console.log("-------------------->任意两个是为负数的坐标系");

var u = vec3.fromValues(-1,0,0)

var v = vec3.fromValues(0,1,0)

var w = vec3.fromValues(0,0,-1)

console.log(vec3.cross(vec3.create(), v,w));

console.log(vec3.cross(vec3.create(), w,u));

console.log(vec3.cross(vec3.create(), u,v));

以上也都能得到正确的向量组.
结论就是如果偶数相反就正常使用,如果是奇数相反就
用反过来用.

LSH 2019-11-03 23:34 发表评论

排列组合

LSH — Wed, 26 Jun 2019 04:57:00 GMT

// 排列:正数n的全排列
// n 正数n
// return 数值
function A(n) {
    if (n <= 0) return n;
    var sum = 1;
    for (var i = n; i > 0; --i) {
        sum *= i;
    }
    return sum;
}

// 组合:从n个中选择m个来组合
// n 正数n
// m 正数m
// return 数值
function C(n, m) {
    return A(n) / (A(m) * A(n - m));
}

// 数组组合: 从array中选择n个元素来组合
// array 数组
// n 正数n
// return 多少种组合
function ArrayComb(array, n) {
    var result = [], t = [], e;

    function Recursion(index, array, n, t, result) {
        if (t.length === n) { result.push(t.slice()); return };

        for (var i = index; i < array.length; ++i) {
            e = array[i];
            t.push(e);
            Recursion(i + 1, array, n, t, result);
            t.pop();
        }
    }

    Recursion(0, array, n, t, result);
    return result;
}

LSH 2019-06-26 12:57 发表评论

rayIntersect

LSH — Thu, 22 Mar 2018 16:27:00 GMT

摘要: ---------------------------------- 一段光线求交的场景! ---------------------------------- 点我看源码 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --... 阅读全文

LSH 2018-03-23 00:27 发表评论

矩阵计算器

LSH — Thu, 19 Jan 2017 15:36:00 GMT

摘要: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->矩阵计算器 (1.0)

&l... 阅读全文

LSH 2017-01-19 23:36 发表评论

Quine program

LSH — Fri, 16 Dec 2016 08:44:00 GMT

c/c++

//>this is a Quine program implement by c language.
//>reference http://www.madore.org/~david/computers/quine.html
#include
int main(void){
  char n='\n'; char g='\\'; char q='"'; char s=';';
  char*s1="//>this is a Quine program implement by c language.%c//>reference http://www.madore.org/~david/computers/quine.html%c#include %cint main(void){%c  char n='%cn'; char g='%c%c'; char q='%c'; char s=';';%c  char*s1=%c%s%c;%c  printf(s1,n,n,n,n,g,g,g,q,n,q,s1,q,n,s,n,s,n)%c%c  return 0%c%c}";
  printf(s1,n,n,n,n,g,g,g,q,n,q,s1,q,n,s,n,s,n);
  return 0;
}

javascript

var c1='"'; var c2='\n'; var c3='\\'; var c4=';';
var s1="var c1='%c1'; var c2='%c3n'; var c3='%c3%c3'; var c4=';';%c2var s1=%c1%s1%c1%c4%c2console.log((((((((((s1.replace('%c1', c1)).replace('%c1', c1)).replace('%c1', c1)).replace('%c2', c2)).replace('%c2', c2)).replace('%c3', c3)).replace('%c3', c3)).replace('%c3', c3)).replace('%c4', c4)).replace('%s1', s1))";
console.log((((((((((s1.replace('%c1', c1)).replace('%c1', c1)).replace('%c1', c1)).replace('%c2', c2)).replace('%c2', c2)).replace('%c3', c3)).replace('%c3', c3)).replace('%c3', c3)).replace('%c4', c4)).replace('%s1', s1))

LSH 2016-12-16 16:44 发表评论

js模块编程

LSH — Sun, 02 Oct 2016 12:33:00 GMT

        void function(global)
        {
            var mapping = {}, cache = {};
            global.define = function(id, func){
                mapping[id] = func;
            };

            global.require = function(id){
                if(cache[id])
                    return cache[id];
                else
                    return cache[id] = mapping[id]({});
            };
        }(this);

        define("moduleA", function(exports)
        {
            function ClassA(){
            }

            ClassA.prototype.print = function(){
                alert("moduleA.ClassA")
            }

            exports.New = function(){
                return new ClassA();
            }

            return exports;

        });

        define("moduleB", function(exports)
        {
            function ClassB(){
            }

            ClassB.prototype.print = function(){
                alert("moduleB.ClassB")
            }

            exports.New = function(){
                return new ClassB();
            }

            return exports;
        });

        define("moduleC", function(exports)
        {
            function ClassC(){
            }

            ClassC.prototype.print = function(){
                var classA = require("moduleA").New();
                classA.print();

                var classB = require("moduleB").New();
                classB.print();

                alert("moduleC.ClassC")
            }

            exports.New = function(){
                return new ClassC();
            }

            return exports;
        });

        var classC = require("moduleC").New();
        classC.print();

LSH 2016-10-02 20:33 发表评论

trace.bat

LSH — Sun, 18 Sep 2016 19:07:00 GMT

@echo off

:Main

setlocal EnableDelayedExpansion

call :ShowInputIP

call :CheckIP

if %errorlevel% == 1 (

call :TrackIP !IP! 1

)

setlocal DisableDelayedExpansion

goto :Main

::---------------------------------------------------------------

:TrackIP

ping %1 -n 2 -i %2 >rs.txt

set /a c=%2+1

if %c% geq 65 (

echo 超出TTL限制[65]

ping %1 -n 1

goto :eof

)

for /f "tokens=1-5* delims= " %%i in (rs.txt) do (

if "%%i" == "来自" (

echo 追踪到IP[%%j] TTL=%2

if %%j == !IP! (

echo 追踪完成!!!

) else (

call :TrackIP %1 %c%

)

goto :eof

) else (

if "%%i" == "请求超时。" (

echo 跳跃TTL [TTL=%2%]

call :TrackIP %1 %c%

goto :eof

)

goto :eof

::---------------------------------------------------------------

:ShowInputIP

echo 请输入要跟踪 ip/域名地址:

set /p IP=

goto :eof

::---------------------------------------------------------------

:CheckIP

ping %IP% -n 1 >temp.txt

set context=

for /f "tokens=1-5* delims= " %%i in (temp.txt) do (

if "%%m" == "具有" (

set context=%%l

set IP=!context:~1,-1!

echo 解析域名 [%IP%] → IP [!IP!]

goto :CheckEnd

)

:CheckEnd

del temp.txt

exit /b 1

LSH 2016-09-19 03:07 发表评论