Comments (8)
EricEisaman
commented on August 27, 2024
1
At this point, ShaderFrog composed shaders do not export properly. If the ShaderFrog exporter is properly updated, references to texture map urls and associated THREE objects will seamlessly work the the ShaderFrog Runtime and this will be a non-issue.
https://github.com/AndrewRayCode/ShaderFrog-Runtime/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
Until then the aframe-shaderfrog-component will only work for ShaderFrog basic shaders and composed shaders which don't involve samplers requiring image assets.
from aframe-shaderfrog-component.
AndrewRayCode
commented on August 27, 2024
1
Sorry to send notifications on an old ticket. Another shaderfrog user sent me this link. I wanted to add some additional context: The current version of shaderfrog is slated for deprecation. I haven't worked on this version in a long time and it's built on an open source GLSL compiler that doesn't work on all GLSL code, and the shaderfrog engine itself is fairly buggy, as you've noticed. Since then, I have been writing my own glsl compiler to have full control over shader generation. I've also been rewriting shaderfrog on this core engine as my nights and weekends project. The new version should be much more stable and have more useful features. I don't have an ETA on launch.
The current version of shaderfrog is deprecated and sadly only works in a limited number of shader cases due to unhandled GLSL syntax edge cases. I've added a deprecation notice to the main bug filing repo. You can follow my progress on Twitter if you are interested in learning more about the new launch date. I'm really excited to support A-Frame and others as first class export citizens as plugins on top of the new enigne when it's ready.
from aframe-shaderfrog-component.
EricEisaman
commented on August 27, 2024
Hello @arthurmougin . Thanks for posting this issue.
Please note that this issue is due to my incomplete documentation. I apologize.
The name value being assigned in HTML must match the shader key in the shaders and consequently the AFRAME.shaderfrog object.
You have:
<a-sphere position="0 0 -4" shader-frog="name:GOO_Shader"></a-sphere>
Notice that the object key is actually Goo_Shader.
from aframe-shaderfrog-component.
arthurmougin
commented on August 27, 2024
Thanks for your answer, i applied the fix you suggested but it didn't solve the error :
code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Bubbles</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Who dont want to pop bubbles ?">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="./aframe-shaderfrog-component-custom.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="skymap" src="./roof_garden_2k_background.png">
<img id="skyenvmap" src="./roof_garden_2k_envmap.png">
</a-assets>
<a-sphere position="0 1.2 -4" shader-frog="name:Bubble_shader" material="spherical-env-map:#skyenvmap"></a-sphere>
<a-sphere position="0 0 -4" shader-frog="name:Goo_shader"></a-sphere>
<a-sky src="#skymap"></a-sky>
</a-scene>
</body>
</html>
notice :
the skymap and skyenvmap are 2 images with a resolution of 1024 by 2048.
The shaderfrog component custom come from the glitch project I linked on my previous post.
Edit : the dev tools error message have been fixed by just correcting the url in the min.js file, this did not make the other errors diseapear
The spheres on the scene are respectively white and grey without any shader effect...
from aframe-shaderfrog-component.
EricEisaman
commented on August 27, 2024
@arthurmougin Shaders with texture samplers seem to fail to export correctly. You would expect them to export with references to the texture maps but they don't. I got your shader to render but it only exported the basic gray shader in the nodes.
I just exported this shader as a test which doesn't include a texture sampler.
https://shaderfrog.com/app/view/4595
It works fine.
https://billowy-ash-street.glitch.me/
from aframe-shaderfrog-component.
EricEisaman
commented on August 27, 2024
The exporter at the ShaderFrog site is incomplete.
Here is the output for your shader.
{
"id": 164,
"name": "Soap Bubble Animated",
"fragment": "precision highp float;\nprecision highp int;\nvoid main() {\n gl_FragColor = vec4( 0.5, 0.5, 0.5, 1.0 );\n}",
"vertex": "precision highp float;\nprecision highp int;\nuniform mat4 modelMatrix;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nattribute vec3 position;\nvoid main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
"uniforms": {},
"url": "http://shaderfrog.com/app/view/164",
"user": {
"username": "Clorinth",
"url": "http://shaderfrog.com/app/profile/andrewray"
}
}
Notice the gl_FragColor exported is simply the hard coded gray vec4( 0.5,0.5,0.5).
To illustrate further, I took a lone reflection node in the ShaderFrog "composed shader" scheme and exported it. Here are the results:
{
"id": 4596,
"name": "Reflection Shader",
"fragment": "precision highp float;\nprecision highp int;\nuniform float mirrorReflection;\nuniform samplerCube reflectionSampler;\nvarying vec3 vReflect;\nvec4 Reflection_Cube_Map1597651827029_156_main() \n {\n vec4 Reflection_Cube_Map1597651827029_156_gl_FragColor = vec4(0.0);\n vec4 cubeColor = textureCube(reflectionSampler, vec3(mirrorReflection * vReflect.x, vReflect.yz));\n cubeColor.w = 1.0;\n Reflection_Cube_Map1597651827029_156_gl_FragColor = cubeColor;\n return Reflection_Cube_Map1597651827029_156_gl_FragColor *= 1.0;\n }\nvoid main() \n {\n gl_FragColor = Reflection_Cube_Map1597651827029_156_main(); }\n",
"vertex": "precision highp float;\nprecision highp int;\nuniform mat4 modelMatrix;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat4 viewMatrix;\nuniform mat3 normalMatrix;\nuniform vec3 cameraPosition;\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec2 uv;\nattribute vec2 uv2;\nvarying vec3 vReflect;\nvec4 Reflection_Cube_Map1597651827029_156_main() \n {\n vec4 Reflection_Cube_Map1597651827029_156_gl_Position = vec4(0.0);\n vec3 worldPosition = (modelMatrix * vec4(position, 1.0)).xyz;\n vec3 cameraToVertex = normalize(worldPosition - cameraPosition);\n vec3 worldNormal = normalize(mat3(modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz) * normal);\n vReflect = reflect(cameraToVertex, worldNormal);\n Reflection_Cube_Map1597651827029_156_gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n return Reflection_Cube_Map1597651827029_156_gl_Position *= 1.0;\n }\nvoid main() \n {\n gl_Position = Reflection_Cube_Map1597651827029_156_main(); }\n",
"uniforms": {
"cameraPosition": {
"type": "v3",
"glslType": "vec3"
},
"mirrorReflection": {
"value": "1",
"type": "f",
"glslType": "float"
},
"reflectionSampler": {
"value": null,
"type": "t",
"glslType": "samplerCube"
}
},
"url": "http://shaderfrog.com/app/view/4596",
"user": {
"username": "SirFizX",
"url": "http://shaderfrog.com/app/profile/andrewray"
}
}
Note the null value in the reflectionSampler section. For this to work with the underlying THREE.ShaderMaterial , that value needs to point to an instance of THREE.CubeTexture which is the THREE object which generates data for the samplerCube glsl type.
"reflectionSampler": {
"value": null,
"type": "t",
"glslType": "samplerCube"
}
https://threejs.org/docs/#api/en/core/Uniform
https://aframe.io/docs/1.0.0/components/material.html
from aframe-shaderfrog-component.
EricEisaman
commented on August 27, 2024
Andrew Ray's Three.js exporter fails with composed shaders beyond the trivial single node case. Even the single node case fails to provide adequate output for texture related types which require external resources that must be loaded and instantiated within their respective THREE objects, such as THREE.CubeTexture, which is required for the glsl samplerCube type.
Andrew Ray still has ShaderFrog closed source but takes issue reports here:
https://github.com/AndrewRayCode/ShaderFrog-Runtime/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc
It would be great if Andrew could update his exporter such that it at least exports all nodes of composed shaders, including those referencing external texture resources. Even if these sampler reference values are null, I could intercept them in my component and generate appropriate THREE object instances.
from aframe-shaderfrog-component.
EricEisaman
commented on August 27, 2024
Thanks for the feedback Andrew. Have a great weekend!
from aframe-shaderfrog-component.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aframe-shaderfrog-component.