const vertexShaderSource = `
attribute vec4 a_Position;
void main() {
gl_Position = a_Position;
}
`;
const fragmentShaderSource = `
precision highp float;
uniform float u_Time;
uniform vec2 u_Resolution;
const int samples_per_pixel = 40;
const float PI = 3.14159265359;
const int MAX_DEPTH = 10;
const int MATERIAL_LAMBERTIAN = 1; // 拡散
const int MATERIAL_METAL = 2; // 金属
const int MATERIAL_DIELECTRIC = 3; // ガラス
// ------------------------------------------------------------------------------------------------ Ray
struct Ray {
vec3 orig;
vec3 dir;
};
vec3 Ray_at(Ray r, float t) {
return r.orig + t * r.dir;
}
struct Material {
int type;
vec3 albedo;
float fuzz;
float ref_idx;
};
struct HitRecord {
vec3 p;
vec3 normal;
float t;
bool front_face;
Material material;
};
void HitRecord_setFaceNormal(inout HitRecord rec, Ray r, vec3 outward_normal) {
rec.front_face = dot(r.dir, outward_normal) < 0.0;
rec.normal = rec.front_face ? outward_normal : -outward_normal;
}
// ------------------------------------------------------------------------------------------------ utils
float rndNum;
// 0.0～1.0を返す疑似乱数生成
float random() {
vec3 seed = vec3(gl_FragCoord.xy, rndNum);
rndNum = rndNum + 1.0;
float dt = dot(seed.xy, vec2(12.9898, 78.233)) + seed.z;
return fract(sin(dt) * 43758.5453);
}
// [min,max) の実数乱数を返す
float random_range(float min, float max) {
return min + (max - min) * random();
}
vec3 random_vec3() {
return vec3(random(), random(), random());
}
vec3 random_vec3_range(float min, float max) {
return vec3(random_range(min, max), random_range(min, max), random_range(min, max));
}
vec3 random_in_unit_sphere() {
for (int i = 0; i < 100; i++) {
vec3 p = random_vec3_range(-1.0, 1.0);
if (dot(p, p) < 1.0) {
return p;
}
}
return vec3(0.0); // 諦める
}
vec3 random_unit_vector() {
float a = random_range(0.0, 2.0 * PI);
float z = random_range(-1.0, 1.0);
float r = sqrt(1.0 - z * z);
return vec3(r * cos(a), r * sin(a), z);
}
vec3 random_in_unit_disk() {
for (int i = 0; i < 100; i++) {
vec3 p = vec3(random_range(-1.0, 1.0), random_range(-1.0, 1.0), 0);
if (dot(p, p) < 1.0) {
return p;
}
}
return vec3(0.0); // 諦める
}
float degrees_to_radians(float degrees) {
return degrees * PI / 180.0;
}
// ------------------------------------------------------------------------------------------------ マテリアル
Material Material_initLambertian(vec3 albedo) {
return Material(MATERIAL_LAMBERTIAN, albedo, 0.0, 0.0);
}
Material Material_initMetal(vec3 albedo, float fuzz) {
return Material(MATERIAL_METAL, albedo, fuzz, 0.0);
}
Material Material_initDielectric(float ref_idx) {
return Material(MATERIAL_DIELECTRIC, vec3(0.0), 0.0, ref_idx);
}
float schlick(float cosine, float ref_idx) {
float r0 = (1.0 - ref_idx) / (1.0 + ref_idx);
r0 = r0 * r0;
return r0 + (1.0 - r0) * pow((1.0 - cosine), 5.0);
}
bool Material_scatter(Material mat, Ray r_in, HitRecord rec, inout vec3 attenuation, inout Ray scattered) {
if (mat.type == MATERIAL_METAL) {
vec3 reflected = reflect(normalize(r_in.dir), rec.normal);
scattered = Ray(rec.p, reflected + mat.fuzz * random_in_unit_sphere());
attenuation = mat.albedo;
return (dot(scattered.dir, rec.normal) > 0.0);
} else if (mat.type == MATERIAL_LAMBERTIAN) {
vec3 scatter_direction = rec.normal + random_unit_vector();
scattered = Ray(rec.p, scatter_direction);
attenuation = mat.albedo;
return true;
} else if (mat.type == MATERIAL_DIELECTRIC) {
attenuation = vec3(1.0, 1.0, 1.0);
float etai_over_etat = (rec.front_face) ? (1.0 / mat.ref_idx) : (mat.ref_idx);
vec3 unit_direction = normalize(r_in.dir);
float cos_theta = min(dot(-unit_direction, rec.normal), 1.0);
float sin_theta = sqrt(1.0 - cos_theta * cos_theta);
if (etai_over_etat * sin_theta > 1.0) {
vec3 reflected = reflect(unit_direction, rec.normal);
scattered = Ray(rec.p, reflected);
return true;
}
float reflect_prob = schlick(cos_theta, etai_over_etat);
if (random() < reflect_prob) {
vec3 reflected = reflect(unit_direction, rec.normal);
scattered = Ray(rec.p, reflected);
return true;
}
vec3 refracted = refract(unit_direction, rec.normal, etai_over_etat);
scattered = Ray(rec.p, refracted);
return true;
}
}
// ------------------------------------------------------------------------------------------------ 球体
const int SPHERES_SIZE = 4;
struct Sphere {
vec3 center;
float radius;
Material material;
};
Sphere spheres[SPHERES_SIZE];
bool Sphere_hit(Sphere sphere, Ray r, float ray_tmin, float ray_tmax, inout HitRecord rec) {
vec3 oc = sphere.center - r.orig;
float a = dot(r.dir, r.dir);
float h = dot(r.dir, oc);
float c = dot(oc, oc) - sphere.radius * sphere.radius;
float discriminant = h * h - a * c;
if (discriminant < 0.0) {
return false;
}
float sqrtd = sqrt(discriminant);
// Find the nearest root that lies in the acceptable range.
float root = (h - sqrtd) / a;
if (root <= ray_tmin || ray_tmax <= root) {
root = (h + sqrtd) / a;
if (root <= ray_tmin || ray_tmax <= root) {
return false;
}
}
rec.t = root;
rec.p = Ray_at(r, rec.t);
rec.material = sphere.material;
vec3 outward_normal = (rec.p - sphere.center) / sphere.radius;
HitRecord_setFaceNormal(rec, r, outward_normal);
return true;
}
bool spheresHit(Ray r, float ray_tmin, float ray_tmax, inout HitRecord rec) {
HitRecord temp_rec;
bool hit_anything = false;
float closest_so_far = ray_tmax;
for (int i = 0; i < SPHERES_SIZE; i++) {
if (Sphere_hit(spheres[i], r, ray_tmin, closest_so_far, temp_rec)) {
hit_anything = true;
closest_so_far = temp_rec.t;
rec = temp_rec;
}
}
return hit_anything;
}
// ------------------------------------------------------------------------------------------------ camera
struct Camera {
vec3 origin;
vec3 lower_left_corner;
vec3 horizontal;
vec3 vertical;
vec3 u, v, w;
float lens_radius;
};
void Camera_init(inout Camera camera, vec3 lookfrom, vec3 lookat, vec3 vup, float vfov, float aspect_ratio, float aperture, float focus_dist) {
float theta = degrees_to_radians(vfov);
float h = tan(theta / 2.0);
float viewport_height = 2.0 * h;
float viewport_width = aspect_ratio * viewport_height;
camera.w = normalize(lookfrom - lookat);
camera.u = normalize(cross(vup, camera.w));
camera.v = cross(camera.w, camera.u);
camera.origin = lookfrom;
camera.horizontal = focus_dist * viewport_width * camera.u;
camera.vertical = focus_dist * viewport_height * camera.v;
camera.lower_left_corner = camera.origin - camera.horizontal / 2.0 - camera.vertical / 2.0 - focus_dist * camera.w;
camera.lens_radius = aperture / 2.0;
}
Ray Camera_getRay(inout Camera camera, float u, float v) {
vec3 rd = camera.lens_radius * random_in_unit_disk();
vec3 offset = u * rd.xxx + v * rd.yyy;
return Ray(camera.origin + offset, camera.lower_left_corner + u * camera.horizontal + v * camera.vertical - camera.origin - offset);
}
// ------------------------------------------------------------------------------------------------ render
vec3 ray_color(Ray r) {
vec3 accumulated_color = vec3(1.0, 1.0, 1.0);
for (int depth = 0; depth < MAX_DEPTH; depth++) {
HitRecord rec;
// レイがオブジェクトにヒットしたかを確認
if (spheresHit(r, 0.001, 3.402823466e+38, rec)) {
Ray scattered;
vec3 attenuation;
if (!Material_scatter(rec.material, r, rec, attenuation, scattered)) {
return vec3(0.0);
}
r = scattered;
accumulated_color *= attenuation;
} else {
// 背景色を計算
vec3 unit_direction = normalize(r.dir);
float a = 0.5 * (unit_direction.y + 1.0);
accumulated_color *= mix(vec3(1.0, 1.0, 1.0), vec3(0.5, 0.7, 1.0), a);
return accumulated_color;
}
}
return vec3(0.0);
}
// ------------------------------------------------------------------------------------------------ main
void main() {
rndNum = 0.0;
spheres[0] = Sphere(vec3(0.0, 0.0, 0.0), 0.5, Material_initLambertian(vec3(0.7, 0.3, 0.3)));
spheres[1] = Sphere(vec3(0.0, -100.5, 0.0), 100.0, Material_initLambertian(vec3(0.8, 0.8, 0.0))); // big
float a = -u_Time / 600.0;
float dis = cos(u_Time / 1200.0) * 0.3 + 1.3;
spheres[2] = Sphere(vec3(cos(a) * dis, 0.0, sin(a) * dis), 0.5, Material_initMetal(vec3(.8, .8, .8), 0.0));
a += PI;
spheres[3] = Sphere(vec3(cos(a) * dis, 0.0, sin(a) * dis), 0.5, Material_initDielectric(1.5));
Camera cam;
vec3 lookfrom = vec3(3.0, 2.0 + sin(u_Time / 1300.0) * 2.0, 3.0);
vec3 lookat = vec3(0.0, 0.0, 0.0);
vec3 vup = vec3(0.0, 1.0, 0.0);
float dist_to_focus = length(lookfrom - lookat);
float aperture = 0.1;
Camera_init(cam, lookfrom, lookat, vup, 20.0, u_Resolution.x / u_Resolution.y, aperture, dist_to_focus);
vec3 pixel_color = vec3(0.0, 0.0, 0.0);
for (int i = 0; i < samples_per_pixel; i++) {
float u = (gl_FragCoord.x + random() - 0.5) / (u_Resolution.x - 1.0);
float v = (gl_FragCoord.y + random() - 0.5) / (u_Resolution.y - 1.0);
Ray r = Camera_getRay(cam, u, v);
pixel_color += ray_color(r);
}
float scale = 1.0 / float(samples_per_pixel);
gl_FragColor = vec4(sqrt(scale * pixel_color.r), sqrt(scale * pixel_color.g), sqrt(scale * pixel_color.b), 1.0);
//gl_FragColor = vec4(gl_FragCoord.x / u_Resolution.x, random(), random(), 1.0);
}
`;
$(async () => {
const aspect_ratio = 16.0 / 9.0;
const image_width = 400;
let image_height = Math.floor(image_width / aspect_ratio);
image_height = (image_height < 1) ? 1 : image_height;
const canvas = document.createElement("canvas") as HTMLCanvasElement;
canvas.width = image_width;
canvas.height = image_height;
document.body.appendChild(canvas);
const canvasWebGL = new CanvasWebGL(canvas, vertexShaderSource, fragmentShaderSource);
let fps = 0;
let lastSection = 0;
const onFrame = (time: DOMHighResTimeStamp) => {
const section = Math.floor(time / 1000);
if (lastSection != section) {
lastSection = section;
$("#fps").text(fps);
fps = 0;
}
fps++;
canvasWebGL.render(time);
requestAnimationFrame(onFrame);
};
requestAnimationFrame(onFrame);
});
class CanvasWebGL {
private readonly gl: WebGLRenderingContext;
private readonly uTimeLocation: WebGLUniformLocation | null;
constructor(canvas: HTMLCanvasElement, vertexShaderSource: string, fragmentShaderSource: string) {
const gl = canvas.getContext("webgl");
if (!gl) {
throw "WebGL is not supported!";
}
this.gl = gl;
const vertexShader = this.createShader(gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = this.createShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Program link error:', gl.getProgramInfoLog(program));
}
gl.useProgram(program);
const vertices = new Float32Array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0
]);
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const aPosition = gl.getAttribLocation(program, "a_Position");
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
const uResolutionLocation = gl.getUniformLocation(program, "u_Resolution");
gl.uniform2f(uResolutionLocation, canvas.width, canvas.height);
this.uTimeLocation = gl.getUniformLocation(program, "u_Time");
//this.render(0);
}
render(time: number) {
const gl = this.gl;
gl.uniform1f(this.uTimeLocation, time);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
private createShader(type: GLenum, source: string): WebGLShader {
const shader = this.gl.createShader(type);
if (!shader) {
throw "shader can't created!"
}
this.gl.shaderSource(shader, source);
this.gl.compileShader(shader);
if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
throw `Shader compile error: ${this.gl.getShaderInfoLog(shader)}`;
}
return shader;
}
}
!
