opengl – GLSL Shader texture or procedural textures just rendering on top of object (LWJGL 2)

Recently, I have been making a 3D game.
I was messing with my shader files, when I ran into a problem. The “texture” I made for the fragment shader just renders on top of the object, and does not rotate with it or repeat on individual faces, but looks alright when I pass the gl_Vertex colors into gl_FragColor.

Here is the images to tell you what I am talking about
IMG1

While the vertex colors rotate with the object:
IMG2

I am pretty clueless as I’ve never really messed with GLSL shaders at all… I’ve researched a bit but I don’t know what this is called, so I didn’t get any good answers.

Here’s what I know:

  • Fragment shaders mess with all colors on screen
  • Vertex shaders well, mess with vertex point of the specified object you choose to start the shader for.

Should I Multiply the vertex positions with the texture? Should I add them? Do I have to do alot of matrices code to make this work? Does this deal with view and model matrices?

Here’s my code for Fragment:

#version 120 core

uniform float u_time;
uniform vec2 u_resolution;

varying vec4 verpos;

varying vec4 normals;

float plot(vec2 st) {
    return smoothstep(0.02, 0.0, abs(st.y - st.x));
}

void main(void)
{
    vec2 st = gl_FragCoord.xy/u_resolution;

    float y = st.x;
    
    vec3 color = vec3(y);
    
    float pct = plot(st);
    color = (1.0-pct) * color + pct * vec3(1.0, 0.0, 0.0);
    
    //gl_FragColor = vec4(color, 1.0);
    
    // gl_FragColor = vec4(verpos.xyzw);
    gl_FragColor = verpos;
}

And for Vertex:

#version 120 core

vec4 a = gl_Vertex;
varying vec4 verpos;
varying vec4 normals;

void main(void) 
{
    gl_Position = gl_ModelViewProjectionMatrix * a;
    verpos = gl_Vertex;
    normals = vec4(gl_Normal, 1.0);
}

Any help appreciated

Yes, I am using old methods and no VBOs and VAOs

~ Pale_Gray

sharepoint online – Jquery DataTable not rendering on Provider Hosted App

We are trying to display data from SharePoint to a datatable EmployeeDetails , However the table does not render completely as shown below

enter image description here

Below is the HTML Code

<html>
<head>
    <title></title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">
    <script type="text/javascript" src="https://site.sharepoint.com/sites/DeveloperSite/SiteAssets/css/jquery.SPServices-0.7.1a.min.js" ></script>
    <script type="text/javascript" src="https://site.sharepoint.com/sites/DeveloperSite/SiteAssets/js/SPOnline/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://site.sharepoint.com/sites/DeveloperSite/SiteAssets/js/SPOnline/jquery.dataTables.rowGrouping.js"></script>
    

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">    
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">

    <script type="text/javascript">

 //Javacsript Code

 </script>
</head>

<body>
<form id ="AddEmployee">

<div>
  
        <table id="Employees" class="display" cellspacing="0" width="200px">
<tr>

    <td>Employee ID</td>
    <td><select title="eid" name="eid" id="eid"></select></td>

</tr>
<tr>
    <td>Name:</td> 
     <td><input type="text" placeholder="Enter Name" id="txtName" required></td>
</tr>

<tr>
    <td>Age: </td>
    <td><input type="text" placeholder="Enter Age" name="txtAge" id="txtAge" required></td>
</tr>

<tr>
    <td>Address:</td>
    <td><input type="text" placeholder="Enter Address" name="txtAddress" id="txtAddress" required></td>
</tr>

<tr>
    <td>Team:</td>
    <td><select title="team" name="team" id="team"></select></td>
</tr>



<tr>
    <td colspan="2">
        <table width="250px">
            <tr>
                <td><input type="button" id="AddItem" value="Add" onclick="AddItem()" /></td>
                <td><input type="button" id="UpdateItem" value="Update" onclick="UpdateItem()" /></td>
                <td><input type="button" id="DeleteItem" value="Delete" onclick="DeleteItem()" /></td>
            </tr>
        </table>
    </td>
</tr>

</table>

</div>


<div>

    <table id="EmployeeDetails" cellspacing="0" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Address</th>
            <th>Team</th>

        </tr>
    </thead>
    </table>
</div>

</form>

</body>
</html>

Code for binding data to datatable

function LoadEmployeeTable() {

            var executor = new SP.RequestExecutor(appweburl);

            executor.executeAsync(
                {
                    url:
                        appweburl +
                        "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Employee')/items?$select=*,ID,Title,Age,Address,Team/ID,Team/Title&$expand=Team&@target='" +
                        encodeURIComponent(hostweburl) + "'",
                    method: "GET",
                    headers: { "Accept": "application/json; odata=verbose" },
                    success: function (data) {

                        var jsonObject = JSON.parse(data.body);
                        var results = jsonObject.d.results;
                        console.log(results);

                       // $.each(results, function (key, value) {

                       $('#EmployeeDetails').DataTable({

                                data: results,
                                columns: (

                                    {
                                        data: "ID"
                                    },
                                    {
                                        data: "Title"
                                    },
                                    {
                                        data: "Age"
                                    },
                                    {
                                        data: "Address"
                                    },
                                    {
                                        data: "Team.Title"
                                    },
                                    
                                )
                            });   

                       // });
                    },
                    error: function (error) {
                        alert(JSON.stringify(error));
                    }
                }
            );
        }

Document.Ready() function

 $(document).ready(function () {

// Populate Employee Table
   LoadEmployeeTable();

});

Researched a lot online , However didn’t find any article for this issue.

Would really appreciate if anyone here could help me out with binding and refreshing the datatable on button click

Godot C++ NativeScript version not rendering multimesh instance whereas GDScript version does

I am new to Godot. I am aiming to create a RTS game with 10’s of thousands of units and for it to run smoothly. So I’m looking to use GDNative C++ with the Visual Server to handle updating and moving the units and GDScript for everything else.

The following script in GDScript successfully renders a single multi mesh cube at the center of the screen.

extends Spatial

func _ready():

    var meshRid=preload('res://new_cubemesh.tres').get_rid()
    var multimesh = VisualServer.multimesh_create()

    VisualServer.multimesh_allocate(multimesh, 1, VisualServer.MULTIMESH_TRANSFORM_3D, 
    VisualServer.MULTIMESH_COLOR_NONE, VisualServer.MULTIMESH_CUSTOM_DATA_FLOAT)
    VisualServer.multimesh_set_mesh(multimesh, meshRid)

    var instance = VisualServer.instance_create()
    var scenario = get_world().scenario

    VisualServer.instance_set_scenario(instance, scenario)
    VisualServer.instance_set_base(instance, multimesh)

I have implemented the alternative In GDNative (C++) and while it doesn’t crash and does run the code, it does not render the cube. Camera is in correct position to observe the cube at 0,0. I’ve just re-purposed the GDNative C++ tutorial for now.

I really like the community here and the engine so far, so hopefully I am just misunderstanding something here and it is possible what I am trying to achieve.

Thank you for your time, c++ scripts below.

gdexample.cpp

#include "gdexample.h"

using namespace godot;

void GDExample::_register_methods() {
    register_method("_process", &GDExample::_process);
    register_method("_ready", &GDExample::_ready);
}

GDExample::GDExample() {
}

GDExample::~GDExample() {
    // add your cleanup here
}

void GDExample::_init() {
    // initialize any variables here
    base=5;
}

void GDExample::_ready(){

    visual = VisualServer::get_singleton();
    loader = ResourceLoader::get_singleton();

    Ref<Resource> meshResource = loader->load("res://new_cubemesh.tres");
    RID meshRid = meshResource->get_rid();

    multimesh = visual->multimesh_create();
    visual->multimesh_allocate(multimesh, 1, visual->MULTIMESH_TRANSFORM_3D, visual->MULTIMESH_COLOR_NONE, visual->MULTIMESH_CUSTOM_DATA_FLOAT);
    visual->multimesh_set_mesh(multimesh, meshRid);

    RID instance = visual->instance_create();

    Ref<World> world = get_world();
    RID scenario = world->get_scenario();
        
    visual->instance_set_scenario(instance, scenario);
    visual->instance_set_base(instance, multimesh);

}

void GDExample::_process(float delta) {
    return;
}

Let me know if you need gdexample.h or gdlibrary.cpp and I can add, the formatting gets messed up if I include them here for some reason. It’s basically just the tutorial stuff though.

reactjs – Warning: Cannot update a component (`SearchingNameProvider`) while rendering a different component (`Searching`) React Context

  1. Tengo un componente Results que hace un fetch a la api de pokemon envía en el componente Card el resultado del fetch en la prop pokemons

  2. En el componente Card recibo la información y hago otro fetch con el nombre del pokemon, este componente muestra la imagen y el nombre del Pokémon
    Ahora al hacer click sobre sobre las imagenes de la izquierda, quiero mostrar los detalles de ese
    pokemon en el lado derecho, para eso hice un contexto

  3. En la carpeta contexts/searchingNameContext
    Cuando le doy click en Card.js a cada pokemon actualiza el estado mediante las funciones actualizadoras que estan en el cotext

  4. Tengo un componente llamado Searching.js y quiero introducir el nombre de un pokemon y mostralo en la parte derecha
    para eso quiero actualizar el estado global con las mismas funciones

  5. Ahora cuando cargo la pagina, hago click sobre algun pokemon se muestar al lado derecho los detalles de ese pokemon, ahora escribo el nombre de
    de un pokemon en el imput y efectivamente muestra el detalle del pokemon que escribí.

pero si vuelvo a hacer click en alguno de los elementos del lado izquierdo ya no funciona y muestra

index.js:1 Warning: Cannot update a component (SearchingNameProvider) while rendering a different component (Searching). To locate the bad setState() call inside Searching
Adjunto el repositorio por si desean echarle un ojo

===> https://github.com/jhonfe64/api.git

Gracias por la ayuda

//componente Searching

import React, {useState, useEffect, useContext} from 'react';
import styled from 'styled-components';
import {SearchingNameContext} from '../contexts/SearchingNameContext';


const Searching = () => {
    
    //lo que hay que hacer es actualizar los estados globales
    let {searchingName, changeSearchingName} = useContext(SearchingNameContext);
    let {pokemonType, changePokemonType} = useContext(SearchingNameContext);
    let {pokemonId, changePokemonId} = useContext(SearchingNameContext);
    let {pokemonImage, changePokemonImage} = useContext(SearchingNameContext);
    let {pokemonAbilities, changePokemonHabilities} = useContext(SearchingNameContext);

    const (btnClick, setBtnClick) = useState(false);
    const (inputValue, setInputValue) = useState('');
    const (fullInputvalue, setFullInputValue) = useState('');
    const (pokemon, setPokemon) = useState();

    const handleInputValue = (e) => {
        setInputValue(e.target.value);
    }

    const handleClick = (e) => {
        setBtnClick(true);
        e.preventDefault();
        setFullInputValue(inputValue);
    }
  
    useEffect(()=>{
        if(btnClick === true){
            fetch(`https://pokeapi.co/api/v2/pokemon/${fullInputvalue}`)
        .then((res)=>{
            return res.json();
        }).then((singlePokemon)=>{
            setPokemon(singlePokemon);
        })
        }
    },(btnClick, inputValue, fullInputvalue));
 

    return (
        <div>
            <SearchingPokemons>
                {
                    btnClick === true && pokemon ?(
                        changeSearchingName(pokemon.name),
                        changePokemonType(pokemon.types(0).type.name),
                        changePokemonId(pokemon.id),
                        changePokemonImage(pokemon.sprites.front_default),
                        changePokemonHabilities(pokemon.abilities)
                    )
                    
                     : ""
                }
                
                <PokemonInput onChange={handleInputValue} value={inputValue} placeholder="Search" type="text"/>
                <PokemonBtn onClick={handleClick}>Search</PokemonBtn>
            </SearchingPokemons>
        </div>
    );
}


const SearchingPokemons = styled.form`
    display: flex;
`
const PokemonInput = styled.input`
    width: 95%;
    padding: 8px;
    border-radius: 5px 0px 0px 5px;
    border: 2px solid #ecf0f1;
    border-right: none;
    &:focus {
        outline: none;
    }
`

const PokemonBtn = styled.button`
    background: red;
    border: none;
    width: 15%;
    color: #ffffff;
    border-radius: 0px 5px 5px 0px;
    &:focus {
        outline: none;
    }
`



export default Searching;

introducir la descripción de la imagen aquí

ssl – Browser not rendering css and JS and images

0

I’m using:

Ubuntu 16.04. Apache 2.4 php73-php-fpm on my dev server. I managed to get it so I can specify a handler and it will put that vhost on the correct PHP version, however CSS and JS seem to be going awry. and on browser images not loaded https://upgrade.zvendo.dev/storev3/public/admin/login

I get this error:

(Fri Apr 30 01:33:16.587617 2021) (proxy_http:error) (pid 13729) (20014)Internal error (specific information not available): (client 154.183.224.14:51093) AH01102: error reading status line from remote server upgrade.zvendo.dev:4003, referer: https://upgrade.zvendo.dev/storev3/public/admin/login (Fri Apr 30 01:33:16.587658 2021) (proxy:error) (pid 13729) (client 154.183.224.14:51093) AH00898: Error reading from remote server returned by /electroo/, referer: https://upgrade.zvendo.dev/storev3/public/admin/login owner dir :: root@127:/var/www/html# ls -ld storev3 drwxrwxrwx 17 root root 4096 Apr 28 12:23 storev3

— full vhost:

  <IfModule mod_rewrite.c>

  RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{REQUEST_URI} !/storev3
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f (OR)
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - (L)
RewriteRule ^ /dist/browser/index.html
   </IfModule>


  <VirtualHost *:80>
ServerAdmin dev.leads@businessboomers.net
ServerName upgrade.zvendo.dev

  <Proxy *>
  Order allow,deny
   Allow from all

 </Proxy>
ProxyPreserveHost On
ProxyRequests Off
ProxyPass /storev3 !
ProxyPass / http://upgrade.zvendo.dev:4003/
ProxyPassReverse / http://upgrade.zvendo.dev:4003/


# Set aliases for /assets, /admin and /api to the correct routes
AliasMatch /assets/admin/(.*)$ /var/www/html/storev3/assets/admin/
 #AliasMatch /admin/app.php/(.*)$ /var/www/html/storev3/public/app.php/admin/
 #AliasMatch /api/app.php/(.*)$ /var/www/html/storev3/public/app.php/api/
 #AliasMatch /admin(.*)$ /var/www/html/storev3/public/app.php/admin/
 #AliasMatch /api/(.*)$ /var/www/html/storev3/public/app.php/api/
 AliasMatch /media/(.*)$ /var/www/html/storev3/public/media/



 ErrorLog /var/log/apache2/upgrade.zvendo.dev-error.log
 LogLevel error
CustomLog /var/log/apache2/upgrade.zvendo.dev-access.log combined

 <Directory /var/www/html/storev3/public/>
Options Indexes FollowSymLinks MultiViews
 AllowOverride All
Require all granted
Allow from All
Header set access-control-allow-credentials true
 </Directory>
  <Files *.css>
     Header set Content-type "text/css"
  </Files>
  # removing this shows the MIME type errors from before
   <Files *.js>
     Header set Content-type "text/javascript"
    </Files>

  RewriteEngine on
RewriteCond %{SERVER_NAME} =upgrade.zvendo.dev
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} (END,NE,R=permanent)
 </VirtualHost>

Any suggestions why the Apache on the ubuntu server is doing/not doing that?

rendering – When a Render Pass decides what textures it needs, how are shaders written?

I am studying render graph architectures (I’ve seen the Frostbite presentation).
A RenderPass has outputs (i.e. textures you draw to) and inputs.

How are these inputs bound to the internal pipeline ?
Lets say I have an AO Pass and it has Normals and Depth as the input.
Do I just bind the texture to a register and that’s it and sample it?
What about the actual shaders (for drawing geometry) that also use textures?

rendering – How realistic are procedural textures in sandbox?

I’m working with Unreal and want to make a Minecraft-Style Block-Sandbox with HD-textures. Since at that resolution the repetitive pattern becomes too noticable, I’d like the game to generate the textures on the fly, based on coordinates, so the blocks have a seamless appearance, and distance to player, so further away blocks have a lower resolution. I’d love something between Rust and Grounded, Quality-wise, so it will include PBR, SSS, and height maps. I’ve got a fairly powerful PC, but since the CPU will have to constantly generate textures, which all would have to be stored inside the RAM, I was wondering how realistic something like that would be in the first place. And how I could save resources, things like reducing the quality in the shadows or so on. Thanks in advance.

drivers – OpenGL rendering missing some triangles, why and how to fix

I’m using Ubuntu 20.10 in dual boot PC alongside Windows 7(32bit), just installed Ubuntu several weeks ago after RAM upgrade to 16GB. Everything works fine (after messy install) until several days ago, something happened… I see something wrong with the graphics, first noticed it in Minecraft, but then I found the issue in other applications too. This did not happen 2 weeks ago, and I don’t remember what change I did that could mess with graphics drivers. Attached image is glxgears screenshot, which shows missing triangles.
missing triangles in glxgears

This glitch also shows up in Blender, not seen with simple shapes like cylinders and cubes but visible in complex shapes like the monkey head. So I guess it is openGL issue.

In Windows, everything is normal.

What I have tried (and not working/found solution):

  • Google for “openGL missing triangles”
  • purge-ppa from ppa:oibaf/graphics-drivers then reinstall latest update from that ppa

This is the output from “lshw -c video”:

 *-display                 
       description: VGA compatible controller
       product: Xeon E3-1200 v2/3rd Gen Core processor Graphics Controller
       vendor: Intel Corporation
       physical id: 2
       bus info: pci@0000:00:02.0
       version: 09
       width: 64 bits
       clock: 33MHz
       capabilities: msi pm vga_controller bus_master cap_list rom
       configuration: driver=i915 latency=0
       resources: irq:27 memory:f7800000-f7bfffff memory:e0000000-efffffff ioport:f000(size=64) memory:c0000-dffff

This is the output from “glxinfo -B”:

name of display: :0
display: :0  screen: 0
direct rendering: Yes
Extended renderer info (GLX_MESA_query_renderer):
    Vendor: Intel Open Source Technology Center (0x8086)
    Device: Mesa DRI Intel(R) HD Graphics 2500 (IVB GT1) (0x152)
    Version: 21.2.0
    Accelerated: yes
    Video memory: 1536MB
    Unified memory: yes
    Preferred profile: core (0x1)
    Max core profile version: 4.2
    Max compat profile version: 3.0
    Max GLES1 profile version: 1.1
    Max GLES(23) profile version: 3.0
OpenGL vendor string: Intel Open Source Technology Center
OpenGL renderer string: Mesa DRI Intel(R) HD Graphics 2500 (IVB GT1)
OpenGL core profile version string: 4.2 (Core Profile) Mesa 21.2.0-devel (git-a165385 2021-04-17 groovy-oibaf-ppa)
OpenGL core profile shading language version string: 4.20
OpenGL core profile context flags: (none)
OpenGL core profile profile mask: core profile

OpenGL version string: 3.0 Mesa 21.2.0-devel (git-a165385 2021-04-17 groovy-oibaf-ppa)
OpenGL shading language version string: 1.30
OpenGL context flags: (none)

OpenGL ES profile version string: OpenGL ES 3.0 Mesa 21.2.0-devel (git-a165385 2021-04-17 groovy-oibaf-ppa)
OpenGL ES profile shading language version string: OpenGL ES GLSL ES 3.00

The glitch even appears when I’m writing this question, see the image:
missing triangles in windowed application

What happened here, and how to fix it? I would prefer not to fresh-install Ubuntu, since it was messy with the boot settings and downloading again all the apps.

vector – Arrowheads from VectorPlot3D not rendering when exported as STL

I am trying to export VectorPlot3D output to an STL file (or any 3D
format). My goal is to allow my students to use Augmented Reality to
better visualize the vector field. However, when I export to STL the
arrowheads do not render. A tube representing the vector renders, but
no indication of the direction of the vectors. My code is below:

VF = VectorPlot3D({1, 0, z}, {x, -5, 5}, {y, -5, 5}, {z, -5, 5}, 
  VectorScale -> Automatic, VectorMarkers -> "Arrow3D")
Export("VectorField.stl", VF)

plugins – Text not rendering on iOS

Here is the site in question.

If you are on iOS then scroll down until you see a “telephone” section, there won’t be a number underneath. This doesn’t happen on computer. I can click on it and it will ask if I want to call that number but its not showing through the orange block. How do I fix it?

We also had edited using Divi, though we don’t know what it is.

Tested on both iOS 14.4.2 iPhone XS and iPhone 11. The text didn’t show on either.
Tested on both Windows 10 and Ubuntu 20.04. The text showed on both.
Tested on Samsung Galaxy tab A, and the text showed.