/raymarchingexplorer

This is a template for programming a fragment shader using raymarching and SDF to calculate the enviroment.

Primary LanguageJavaScript

Raymarching Explorer

200

Demo at https://mmtt.com.ar/jpupper/nftsapps/raymarchingexplorer/

Directly at fxhash : https://www.fxhash.xyz/generative/15752

ESPAÑOL :

Este es un template para programar fragment shaders de raymarching utilizando funciones de SDF para calcular el ambiente. Este ejemplo viene con 5 diferentes escenas (cada vez que apretas f5 varia ). Esta creado particularmente para piezas en fxhash pero puede ser utilizado en cualquier lugar

Interaccion.

  • hacer click y mantener el boton izquierdo para controlar la posición de la luz con el mouse.
  • Utilizar las teclas W A S D Q E para moverse como si fuera un FPS.

Este sketch utiliza la clase rendermanager creada por mi para manejar los shaders y subida acá : https://github.com/jpupper/p5shader

Editar el archivo shaders/generative/luzysombra3.frag para cambiar la escena y las cosas. Editar el archivo js/p5obj/luzysombra.js para agregarle uniforms y controlar las variables del manejo de la camara.

Muchas gracias a Kali por ayudarme a resolver las rotaciones de la camara. También por enseñarme raymarching y por el shader de bloom que tiene.

Advertencia : Este codigo puede ser utilizado para todos los fines que se te cante en la medida en que lo cambies lo suficiente como para que las escenas no se noten que son las mismas, si lo subis, distribuis o vendes asi como esta se te pudre todo.

ENGLISH :

This is a template for programming a fragment shader using raymarching and SDF to calculate the enviroment. This example comes with 5 different scenes. Is mostly ready to create generative pieces for fxhash but it can be use anywhere.

Interaction.

  • Click and hold left button to control the light with the mouse position.
  • Use W A S D E Q keys for moving the camera arround like a FPS.

This sketch uses the RenderManager class created by myself uploaded to https://github.com/jpupper/p5shader to handle the shaders.

Edit the file shaders/generative/luzysombra3.frag to change the scenes and the things. Edit the file js/p5obj/luzysombra.js to add uniforms and control the camera movement.

Thanks so much to kali for helping me solve the camera rotations, teaching me raymarching and lend me the bloom shader for this one.

Disclaimer : You may use this code as a template for creating your own 3d SDF scenes but you should change it to the point that it cant be visually recognized from this.

If you want to learn how to do fragment shader programming and raymarching check this tutorials(spanish only). https://mmtt.com.ar/ejemplosshader