Encountering a compiling issue with a fragment shader while working with Three.js. Below is the code I'm using: https://jsbin.com/cigadibeya/3/edit?html,js,output. I attempted to create an animation similar to this example:
THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog Fragment shader is not compiled.
ERROR: 0:241: 'texture' : no matching overloaded function found
ERROR: 0:241: 'xyz' : field selection requires structure or vector on left hand side
The issue arises from the discrepancies in the various versions of THREE WebGL GLSL. Your current version is r82, which utilizes GLSL 1.0, requiring the use of texture2D that has been deprecated in GLSL 3.0, the version used by ShaderToy.
For details on GLSL versions corresponding to different THREE releases, refer to
To determine the current GLSL version for a specific THREE release, check from r119 onwards where the GLSL version is automatically added.
For a comprehensive guide on migration between versions r119 and r120, visit https://github.com/mrdoob/three.js/wiki/Migration-Guide#r119--r120
const renderer = new THREE.WebGLRenderer();
const gl = renderer.getContext();
const glslVersion = gl.getParameter(gl.SHADING_LANGUAGE_VERSION); console.log('GLSL Version:', glslVersion);
Furthermore, ensure to rename the main function to main as ShaderToy recognizes mainImage / fragColor => gl_FragColor conventions. ShaderToy operates within its own specific environment and abstractions.
Image shaders execute the mainImage() function to create procedural images by determining a color for each pixel.
Even after making all the necessary changes, if you still encounter a black screen, consider adjusting the position of your camera as it might be too close to the scene.
Try setting:
camera.position.z = 10;
//...
return (lightIntensity * (k_d * dotLN + k_s * pow(dotRV, alpha)) * 0.5 + 0.5 * texture2D(iChannel0, ref.xy).xyz);
//...
void main() {
vec2 fragCoord = gl_FragCoord.xy;
vec3 dir = rayDirection(45.0, iResolution.xy, fragCoord);
vec3 eye = vec3(0.0, 0.0, 5.0);
vec2 sdf = shortestDistanceToSurface(eye, dir, MIN_DIST, MAX_DIST);
float dist = sdf.x;
if (dist > MAX_DIST - EPSILON) {
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
return;
}
vec3 p = eye + dist * dir;
vec3 N = estimateNormal(p);
float l1 = length(cross(vec3(0., 0.0, 1.), N));
l1 = smoothstep(0.65, 0.6, l1) - smoothstep(l1, 0.65, 0.6);
float l2 = length(cross(vec3(0., 0.01, 1.05), N));
l2 = smoothstep(0.65, 0.6, l2) - smoothstep(l2, 0.65, 0.6);
float l3 = length(cross(vec3(0.02, 0.0, 1.1), N));
l3 = smoothstep(0.65, 0.59, l3) - smoothstep(l3, 0.65, 0.59);
vec3 color = vec3(l1, l2, l3);
gl_FragColor = vec4(color, 1.0);
}
Implement these changes along with the updated scripts to resolve the issue and enhance the rendering of your scene.
Consider the object below: { id: 1, name: 'jdoe', currentDayHours: null, totalHours: [{ task: 'cleaning', hours: 10}, { task: 'reading', hours: 2 }]} A function is needed to update the currentDayHours based on the task param ...
Starting the rendering component with vuejs is my goal. I currently have a basic node server set up. const Vue = require('vue'); const server = require('express')(); const template = require('fs').readFileSync('index. ...
As I was reviewing promises, I had a question about the order in which the .then/catch calls are executed when using the code below. Are the catch calls being placed at the end of the queue stack? I already have a clear understanding of the distinction bet ...
I am looking to add a click event to my custom dropdown, which replaces a SELECT element. The purpose of this click event is to trigger the corresponding OPTION item when an LI element is clicked. It seems like Woocommerce uses some JavaScript or PHP func ...
import React from 'react' import { Link } from 'react-scroll' import "./Protocol.css" import { ANALYTICS, TRADE, USERS, TRADERS, VOTES, ZEROES } from "../../Constants" const Protocol = () => { return ( ...
I have a pure CSS accordion and I want to enhance it with some JavaScript functionality for users who have JavaScript enabled. The CSS accordion currently utilizes the :checked pseudo-class. The new feature I am looking to add is: if a button that is alre ...
I have a database that I am using to populate a table with results. To interact with these results, I utilize JavaScript in addition to PHP for retrieving values from the database and displaying them in the table. <table id="datatable" class="table tab ...
I've been utilizing some code for implementing infinite scrolling on a Tumblr blog through AJAX, and it's been performing well except for the loading of specific Flash content. The script for the infinite scroll can be found here. To address the ...
I am attempting to create my first app using ReactJS and Material UI, but I am facing some challenges. My main goal is to display a left drawer when the button on the bar is clicked. Here is the code I currently have in my App.jsx file: import React from ...
Looking for a way to reduce prices of items in Mongoose. { name:"itemname", price: 30 } I want to apply a 10% reduction to the price, but $inc and $mul won't work for this scenario. {$mul: {price:0.10}} This code would reduce the price to 10% of t ...
Currently, I am attempting to connect a javascript file to my html document. Following the directions at this link, I am trying to enable the selection of multiple dates from a calendar as input in a form. The instructions mention that I need to include ...
I am in need of showcasing 3D images. I have a .obj file that is 80 MB in size which I converted to a json file size of nearly 75 MB. While using three js, I managed to display a rotating 3D image, but the main issue is the loading speed, which currently t ...
styles.css @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"); body { font-family: 'Roboto', sans-serif; color: #333; } .wrapper { max-width: 960px; margin: 0 auto; } button { background ...
It seems that I mistakenly created two modals. The issue arises when I open either of them for the first time and then close it, as from that point on, neither modal is able to be opened again by performing the same action that initially worked. https://i ...
I've come across a simple code snippet, but for some reason, my getjson function isn't working as expected. My Python script properly prints a JSON encoded value. Does anyone have any suggestions? HTML <!DOCTYPE html> <html> <h ...
Hey there! I'm facing a situation where I have a button within the child component that emits an event when clicked. Is there a way to trigger this event when the parent component is mounted? Alternatively, is there another method to achieve this goal ...
A simplified network-style chart has been created using Dimple's line plot as the foundation. For example, please refer to this link: http://jsfiddle.net/cc1gpt2o/ myChart.addCategoryAxis("x", "Entity"); myChart.addCategoryAxis("y", "Entity").add ...
I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the ...
There is a JavaScript function that captures the value from a select dropdown and appends it to the end of a textarea field (mask) whenever a new selection is made. function addToEditMask(select, mask) { var selectedValue = document.getElementById(sel ...
I have a div with images inside. I created two arrows (previous, next) within a larger div using the src of one of the images as the background URL for each arrow. My goal is to make the next arrow change the large image to the src of the following image w ...