Coder Social home page Coder Social logo

glslify / glsl-raytrace Goto Github PK

View Code? Open in Web Editor NEW
35.0 15.0 3.0 176 KB

:rainbow: Given a signed distance function and ray, trace a scene to find the first point of intersection.

Home Page: http://stack.gl/glsl-raytrace/

License: Other

JavaScript 97.27% GLSL 1.56% HTML 1.17%

glsl-raytrace's Introduction

glsl-raytrace

stable

Given a signed distance function and ray, trace a scene to find the first point of intersection.

Usage

NPM

raytrace = require(glsl-raytrace, <map>, <steps>)

Loads the raytrace function into your shader. Note that map and steps are required to be defined when using this module.

vec2 map(vec3 position)

Your signed distance function, responsible for defining the solid shapes in your scene. Accepts position, and returns a vec2, representing:

  • The signed distance from the surface, i.e. how far from the surface that position is. If inside the surface, this number should be negative. If a collision isn't made, this number should be -1.0. Fortunately there's a bunch of easily composable primitives so this isn't as scary as it sounds once you're familiar with it.
  • A second attribute for assigning a property to the surface. Often, this is used as a material ID to apply different effects to different surfaces, but it could really be anything.

int steps

The maximum number of steps to attempt for each trace.

vec2 doModel(vec3 p);

#pragma glslify: raytrace = require('glsl-raytrace', map = doModel, steps = 90)

vec2 doModel(vec3 position) {
  float radius  = 1.0;
  float dist    = length(position) - radius;
  float objType = 1.0;

  return vec2(dist, objType);
}

vec2 raytrace(vec3 ro, vec3 rd)

Once set up, you can then use the raytrace function to trace a ray and get how far it travels before making a collision. You can then use this value to determine the point of the collision, the surface normal and lighting conditions, etc.

  • ro is the ray origin.
  • rd is a unit vector (i.e. normalized) representing the ray direction.
#pragma glslify: square   = require('glsl-square-frame')
#pragma glslify: camera   = require('glsl-camera-ray')
#pragma glslify: raytrace = require('glsl-raytrace')

uniform vec2  iResolution;
uniform float iGlobalTime;

void main() {
  // Bootstrap a Shadertoy-style raytracing scene:
  float cameraAngle  = 0.8 * iGlobalTime;
  vec3  rayOrigin    = vec3(3.5 * sin(cameraAngle), 3.0, 3.5 * cos(cameraAngle));
  vec3  rayTarget    = vec3(0, 0, 0);
  vec2  screenPos    = square(iResolution.xy);
  float lensLength   = 2.0;
  vec3  rayDirection = camera(rayOrigin, rayTarget, screenPos, lensLength);

  vec2 collision = raytrace(rayOrigin, rayDirection);

  // If the ray collides, draw the surface
  if (collision.x > -0.5) {
    // Determine the point of collision
    vec3 pos = rayOrigin + rayDirection * collision.x;

    // ...
  }

  // ...
}

raytrace(vec3 ro, vec3 rd, float maxd, float precis)

For more control, you may optionally include:

  • float maxd: the maxium distance to trace. Defaults to 20.
  • float precis: the minimum closeness to the surface before considering the trace to be a collision. Defaults to 0.001. Increasing this number will improve performance.

Contributing

See stackgl/contributing for details.

License

MIT. See LICENSE.md for details.

glsl-raytrace's People

Contributors

hughsk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

gdg fand longde123

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.