I am following up on a question about passing a color array for segments to THREE.LineSegments, but I am looking for a solution that does not involve low-level shaders. I am not familiar with shaders at all, so I would prefer to avoid them if possible. Is there a way to pass opacity to individual color elements in a THREE.BufferGeometry without having to deal with shaders?
After reading a concise introduction to shaders for three.js on this website, I decided to simplify the shaders used in the example I previously mentioned to their basic versions found in this potentially relevant link.
<script id="vertexShader" type="x-shader/x-vertex">
precision mediump float;
precision mediump int;
attribute vec4 color;
varying vec4 vColor;
void main() {
vColor = color;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
precision mediump int;
varying vec4 vColor;
void main() {
vec4 color = vec4( vColor );
gl_FragColor = color;
}
</script>
Using these simplified shaders and the THREE.ShaderMaterial,
var material = new THREE.ShaderMaterial({
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent,
transparent: true,
blending: THREE.AdditiveBlending,
depthTest: false
});
I then filled the
var colors = new Float32Array(segments * 4 * 2);
array with color and alpha values, and assigned it to
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 4, true));
This allowed me to achieve the desired effect. As a note, the variable segments indicates the number of segments in my THREE.LineSegments mesh. Additionally, as previously advised by WestLangley in my earlier question, I needed to include color vectors twice (for both ends of a segment) hence the multiplier of 2. It's been an interesting journey; next on the agenda: reintroduce lineWidth into the mix.
I stumbled upon a clever technique for creating translucent lines in three.js without the need for custom shaders. I've included the key lines of code below... ref: https://jsfiddle.net/dtLfgab3/
var edgeShaderMaterial = new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors,
transparent: true,
opacity: 0.3
});
var lineSegments = new THREE.LineSegments(edgeGeometry, edgeShaderMaterial);
I've been struggling for hours trying to understand why I am unable to access and transfer data in my array from the JSON data in JIRA using the REST API. Basically, I am attempting to retrieve the JSON data from the JIRA website via URL with Basic Au ...
I am relatively new to VueJS and currently in the process of exploring its features. One specific issue I am facing on my website involves a TopBar component that includes both the logo and the menu. <template> <div id="topBar"> <div ...
My website is encountering a problem when trying to load a script from a localhost server. The error message displayed is PROTOCOL ERROR: https://localhost:4200/script/test.js net::ERR_SSL_PROTOCOL_ERROR Here is the code snippet causing the issue: <!DO ...
My goal is to send a request using $http with angular js in order to retrieve a json object from google maps. $http.get('http://maps.googleapis.com/maps/api/geocode/json?address=' + data[ 'street' ] + ',' + data[ 'city&a ...
I am working with a React JS code page that looks like this: import React, { useState } from "react"; import { Auth, API } from "aws-amplify"; function dailyFiles(props) { const [apiError502, setApiError502] = useState(false); // Extracted into a re ...
Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...
https://i.stack.imgur.com/aOajr.png Here is the content of my shopping cart. Below, I will explain the flow. [product image clicked] -> ajax request fetches details from database for that particular product id and appends (product name,id and price ...
Encountered an error during the build process, whether on the server or locally. This issue arises when using package managers like yarn, npm, and others. The error specifically points to a problem in the CSS file, but it only occurs in the production bu ...
I am having difficulty creating a direct anchor link to a website. Whenever I attempt to link to the ID using: where #20841 is my anchor tag. Angular interferes with the URL and changes it to: This functions properly in Chrome and Firefox, but i ...
Currently, I am diving into the world of React by exploring its documentation and challenging myself to build a small chat application. While I have a good grasp on the basics, I am encountering some issues with states. Within my code, there is an object ...
Currently working on a web scraping project, I have managed to gather some valuable data. However, I am now faced with the challenge of looping through multiple pages. Update: Using nodeJS for this project Knowing that there are 10 pages in total, I atte ...
I'm currently tackling the challenge of passing a Date from a managed bean to JavaScript and then displaying it as a timer in the format "hh:mm:ss aa". I've attempted it but so far, no luck. Code: DateTimeManagmentMB.java (Managed Bean) import ...
Currently, I am integrating a SOAP call within an Angular application. One requirement I have is to include CDATA for a specific section of the payload for certain calls. angular.forEach(contactsCollection, function (item, index) { contacts = contact ...
I am currently working on a web application using SailsJS and AngularJS. My project requires session management to track user login status. I came across this helpful tutorial and implemented an index.ejs view located in the /view folder. Within the index. ...
Currently, I am in the process of developing a web application using NodeJS. The basic idea behind my approach is to have a primary structure where different tools can be added based on specific requirements for the app. My challenge lies in having my mai ...
I've encountered a challenge trying to accomplish the following tasks simultaneously: Developing in Node.js Coding in TypeScript Implementing async await Facilitating debugging Background: In my TypeScript-based Node.js project, I am incorporating ...
Below is the HTML code snippet for the date field. <asp:TextBox ID="txtExpiryDate" runat="server" Width="80px" MaxLength="10" CssClass="fromDate" /> And here is the HTML code snippet for the Submit button. <asp:Button ID="cmdSubmit" runat=" ...
javaScriptCode app.js const express = require('express') const app = express() const {route} = require('./routes/route') app.use(express.static('./public')); app.use(express.json()); app.use(express.urlencoded()); app.use(rout ...
Within the code snippet below, there is a condition written as (if (epsflag==0)<?php $a=",hide:'true'";?> ). I am looking to achieve the same condition using JavaScript. Essentially, I want to conditionally utilize a JavaScript variable in ...
When attempting to use the onChange event for JSColor to call a function, I consistently encounter an error indicating that the function is not defined. The code snippet below illustrates the issue: export class NavBar extends React.Component { constr ...