Canvas does not display any results when trying to integrate Shadertoy

While browsing through StackOverflow, I came across a post detailing how to transfer shader examples from ShaderToy into Three.js. You can find the post here.

I followed the steps mentioned in the post and created this Plunker demo. The fragment shader code used in this demo is as follows:

#ifdef GL_ES
  precision highp float;
  #endif
    uniform float iGlobalTime;
    uniform sampler2D iChannel0;
    uniform sampler2D iChannel1;

        varying vec2 vUv;

        void main(void) {
          // Shader calculations here...
      }

Additionally, the Three.js code snippet for implementing the shader looks like this:

// Three.js setup code goes here...

// Problem description asking for help on why the shader isn't rendering.

The Plunker preview doesn't display any output on the page. Can anyone point out what might be going wrong in my implementation? Any suggestions on successfully integrating the shader in Three.js would be greatly appreciated.

Answer №1

Your camera position should be set to camera.position.z = 1000; and

Your loop code must look like this:

var mainLoop = function() {
    requestAnimationFrame(mainLoop);
    timeUniform.iGlobalTime.value += clock.getDelta();
    renderer.render(scene, camera);
};

mainLoop();

Check out the updated version here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the onInput event is triggered, React renders components and console.log() displays different values

When I type in the input field, it triggers the onInputChange() function. This function updates the state of inputValue, and then calls the getValue() function which retrieves the current state of inputValue and logs it to the console. However, the value d ...

I'm having trouble getting my home.js to render in the outlet component

After using Material-UI to create navbar.js, I encountered an issue where the other component was not rendering in the <Outlet/> Component RootLayout.js import { Outlet } from "react-router-dom"; import NavBar from "../component/NavBa ...

Interactive tooltip with hyperlinks powered by jQuery

Is it possible to create a pop-up window with links that behave like a normal tooltip but can be clicked on by the mouse? How can this functionality be achieved without losing focus when hovering over the links causing the window to close? jQuery(docume ...

Using electron cookies in Angular involves integrating Electron's native cookie functionality into an

I am currently dealing with electron and looking to implement cookies conditionally in my project. If the application is built using electron, I want to utilize Electron Cookies; otherwise, I plan to use Angular Cookies. However, I'm encountering diff ...

Uploading files with node.js and express

Currently, I am following the steps outlined in this tutorial: I have successfully followed the instructions until the section where they set up the routes without actually creating any views. The tutorial states: That's it, we have completed sett ...

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...

Verifying that the mapDispatchToProps functions have been triggered using ReactTestingLibrary

I am currently utilizing mapDispatchToProps to invoke a dispatch function that calls an API within the useEffect hook of my functional component. I am facing some challenges when attempting to write unit tests for this scenario using React Testing Library ...

Learn the process of integrating VueJS with RequireJS

I am attempting to set up VueJS with RequireJS. Currently, I am using the following VueJS library: . Below is my configuration file for require: require.config({ baseUrl : "js", paths : { jquery : "libs/jquery-3.2.1.min", fullcalendar : "libs/ful ...

Attempting to determine income in JavaScript with the inclusion of two distinct rates

Trying to come up with a salary calculation for different rates within the same timeframe is proving to be quite challenging. For instance, between 10:00-15:00 the rate is $20 per hour and from 15:00 onwards it drops to $15 per hour. Check out the entire ...

Provide JSON data on a designated pathway

I'm currently working on setting up a basic API that will respond with JSON data when accessed at the path /json The goal is to send back the object {"message": "Hello json"} in JSON format whenever a GET request is made to the /j ...

Issue with the System.Web.HttpRequestValidationException

I've been grappling with an issue related to a week-long problem that involves the error message System.Web.HttpRequestValidationException: A potentially dangerous Request.Form value was detected from the client. This issue arises specifically when de ...

Create an input element using JavaScript/jQuery

Looking for some help with Javascript on a simple task. When a specific option is chosen, I want to add an input field to a div element. <select name="amount" > <option value="50">50$</option> <option value="100">100$</o ...

Utilize the native HTML attribute to capture the mouse wheel event

I'm interested in utilizing the mousewheel event in my project, but all the information I've found online relies on addEventListener(). I want to detect it using native HTML and CSS. In simpler terms, I'm hoping for something along the lines ...

There was a problem retrieving the product information from the API

I have been struggling to pinpoint the exact issue at hand. The foundation of HTML and CSS is pre-written, with JavaScript responsible for generating the core elements to populate the DOM. Within my script, I am attempting to retrieve product data in ord ...

Is it possible to integrate a Twitter bootstrap theme into a Rails 4 application if the Vendor/assets directory is missing?

My goal is to integrate a theme from wrapbootstrap.com into my rails 4.1 application. After creating a new app with rails 4 scaffolding, I proceeded to extract the downloaded zip directory which contains 4 directories and an index.html file. I then placed ...

Instructions on accessing the subsequent li a starting from a designated location

My goal is to change the link color of the button with the id #idIMMUNOLOGY_9, which has the class .active_default, but I must start from the element with the id #idTERRITORIAL_8. I attempted this approach : $('#idTERRITORIAL_8').parent().find( ...

AngularJS does not support the 'Access-Control-Allow-Origin' header

I'm struggling to find a solution for the cross-domain issue in my code: $apiUrl = 'https://gtmetrix.com/api/0.1/test'; $apiUser = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c2a8ada755e4b3afb5bcb9acabb ...

When a VueJS button is located within a div that also contains a link, clicking on

Can someone help me with my HTML issue? <a href="/someplace"> <div> <vuecomp></vuecomp> <span>Click row for more info</span> </div> </a> Following is the Vue component I am working on... ...

The accuracy of real-time visitor numbers in Google Analytics is often unreliable

My website uses Google Analytics to track the page chat.php. The code snippet is correctly placed on the page according to the documentation. Within this page, there is a Flash object that connects users to an IRC chat room. Currently, there are 50 unique ...

Using makeStyles() in MUI for conditional rendering

Trying to dynamically change the value of backgroundColor under the property "& + $track" using props.disabled but it seems that MUI does not recognize it. Why could that be? const useStyles = makeStyles((theme) => ({ root: { overflow: "vis ...