Guide on utilizing fragment shaders from glslsandbox.com

Question

Guide on utilizing fragment shaders from glslsandbox.com

I'm interested in experimenting with ShaderMaterial from Three.js, but I am not familiar with the OpenGL Shading Language. When I try to use the fragment shader code from the website mentioned above, I encounter a number of errors. I'm unsure if the vertex and fragment shaders are dependent on each other or if it doesn't matter. If they are connected, what should I include in the vertex shader? Thank you.

        uniform float time;
    varying vec2 vUv;
    varying vec2 surfacePosition;
    uniform vec2 resolution;

    void main()
    {
    vec3 posChanged = position;
    posChanged.x = posChanged.x*(abs(sin(time*1.0)));
    posChanged.y = posChanged.y*(abs(cos(time*1.0)));
    posChanged.z = posChanged.z*(abs(sin(time*1.0)));
    gl_Position = projectionMatrix * modelViewMatrix * vec4(posChanged,1.0);
    }

I would like to implement the fragment shader from this glslsandbox.com

javascript three.js webgl

Answer 1

Answer №1

An illustration is provided below, heavily inspired by this demo, yet featuring the default glslsandbox.com shader integrated.

var $ = document.querySelector.bind(document);

var camera = new THREE.Camera();
camera.position.z = 1;

var scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry(2, 2);

var uniforms = {
  time: { type: "f", value: 1.0 },
  resolution: { type: "v2", value: new THREE.Vector2() },
  mouse: { type: "v2", value: new THREE.Vector2() },
};

var material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: $('#vs').text,
  fragmentShader: $('#fs').text,
});

var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener('mousemove', recordMousePosition);

render(0);

function recordMousePosition(e) {
  // normalize the mouse position across the canvas
  // so in the shader the values go from -1 to +1
  var canvas = renderer.domElement;
  var rect = canvas.getBoundingClientRect();

  uniforms.mouse.value.x = (e.clientX - rect.left) / canvas.clientWidth  *  2 - 1;
  uniforms.mouse.value.y = (e.clientY - rect.top ) / canvas.clientHeight * -2 + 1;      
}

function resize() {
  var canvas = renderer.domElement;
  var dpr    = window.devicePixelRatio;  // make 1 or less if too slow
  var width  = canvas.clientWidth  * dpr;
  var height = canvas.clientHeight * dpr;
  if (width != canvas.width || height != canvas.height) {
    renderer.setSize( width, height, false );
    uniforms.resolution.value.x = renderer.domElement.width;
    uniforms.resolution.value.y = renderer.domElement.height;
  }
}

function render(time) {
  resize();
  uniforms.time.value = time * 0.001;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
}

<script id="vs" type="not-js">
void main(){
  gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fs" type="not-js">
precision mediump float;

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main(){
  vec2 position = (gl_FragCoord.xy / resolution.xy) + mouse / 4.0;

  float color = 0.0;
  color += sin(position.x * cos(time / 15.0) * 80.0) + cos(position.y * cos(time / 15.0) * 10.0);
  color += sin(position.y * sin(time / 10.0) * 40.0) + cos(position.x * sin(time / 25.0) * 40.0);
  color += sin(position.x * sin(time /  5.0) * 10.0) + sin(position.y * sin(time / 35.0) * 80.0);
  color *= sin(time / 10.0) * 0.5;

  gl_FragColor = vec4(vec3(color, color * 0.5, sin(color + time / 3.0) * 0.75), 1.0);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

Answer 2

An illustration is provided below, heavily inspired by this demo, yet featuring the default glslsandbox.com shader integrated.

var $ = document.querySelector.bind(document);

var camera = new THREE.Camera();
camera.position.z = 1;

var scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry(2, 2);

var uniforms = {
  time: { type: "f", value: 1.0 },
  resolution: { type: "v2", value: new THREE.Vector2() },
  mouse: { type: "v2", value: new THREE.Vector2() },
};

var material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: $('#vs').text,
  fragmentShader: $('#fs').text,
});

var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener('mousemove', recordMousePosition);

render(0);

function recordMousePosition(e) {
  // normalize the mouse position across the canvas
  // so in the shader the values go from -1 to +1
  var canvas = renderer.domElement;
  var rect = canvas.getBoundingClientRect();

  uniforms.mouse.value.x = (e.clientX - rect.left) / canvas.clientWidth  *  2 - 1;
  uniforms.mouse.value.y = (e.clientY - rect.top ) / canvas.clientHeight * -2 + 1;      
}

function resize() {
  var canvas = renderer.domElement;
  var dpr    = window.devicePixelRatio;  // make 1 or less if too slow
  var width  = canvas.clientWidth  * dpr;
  var height = canvas.clientHeight * dpr;
  if (width != canvas.width || height != canvas.height) {
    renderer.setSize( width, height, false );
    uniforms.resolution.value.x = renderer.domElement.width;
    uniforms.resolution.value.y = renderer.domElement.height;
  }
}

function render(time) {
  resize();
  uniforms.time.value = time * 0.001;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
}

<script id="vs" type="not-js">
void main(){
  gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fs" type="not-js">
precision mediump float;

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;

void main(){
  vec2 position = (gl_FragCoord.xy / resolution.xy) + mouse / 4.0;

  float color = 0.0;
  color += sin(position.x * cos(time / 15.0) * 80.0) + cos(position.y * cos(time / 15.0) * 10.0);
  color += sin(position.y * sin(time / 10.0) * 40.0) + cos(position.x * sin(time / 25.0) * 40.0);
  color += sin(position.x * sin(time /  5.0) * 10.0) + sin(position.y * sin(time / 35.0) * 80.0);
  color *= sin(time / 10.0) * 0.5;

  gl_FragColor = vec4(vec3(color, color * 0.5, sin(color + time / 3.0) * 0.75), 1.0);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

Guide on utilizing fragment shaders from glslsandbox.com

Answer №1

Similar questions

How can I verify my identity on an external website using jQuery?

The option value in mat-autocomplete is not displaying correctly on IOS devices

What is the best way to modify the inline style width of a table td from pixels to percentage in order to make it

Issues presenting themselves with Material UI Icons

I am encountering an issue where my .glb file is not appearing in the dist/assets directory while working with react.js and three.js

Loading STL files from a buffer instead of a path within Three.js

Unable to utilize Socket.io version 2.0.3

Tips for sharing the scope using module.exports

An issue occurred while trying to establish the referrer policy

Issue with handling .bind in Angular's karma/jasmine tests Angular's karma/j

Refreshing a section of a webpage using AJAX and PHP

Exploring touch interactions using D3.js and TUIO

Best practices for aligning the widths of input-group-addon elements

Error encountered with React Hooks - TypeError

Leveraging a JavaScript variable within a PHP snippet

HTML5 Mouse Canvas

Prevent reloading the page when adding a flash element using JavaScript (jQuery)

The HTML 5 video is not functioning properly on an iPad, and the layout of the iPad has black areas on the sides

How can I style the inner div by adding a class to the first div?

Using Angular.js, apply the "visible" class conditionally based on a variable