Hi everyone, could someone help me. I have been trying to use the code in this tutorial to setup the HDR/env file as a environment/skybox and i can seem to get it to work.
Thanks John
1 Like
Hello! Can you provide us with a playground example showing what you’ve tried so far? This will enable us to better help you 
1 Like
Hi carolhmj thank so much for helping me with this. I have pasted the code below and a picture of my folder structure
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=5.0">
<title>Document</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<canvas id="renderCanvas" touch-action="none"></canvas>
This is a screenshot of my folder structure where my env file is also
Hi carolhjm i have uploaded it as a file (all the script did not fit in the post above) thanks again John
By playground example we mean reproducing your code in Babylon.js Playground (babylonjs.com), it’s an online environment that helps sharing your code in a more efficient way
Maybe using “./sky.env” instead of “/sky.env” could fix the issue if there’s a problem with locating the env.
Hi carolhmj, i cant seem to work out how to use the playground (ie it wont let me copy paste my code and when i save it i cant figure out how to retrieve it?).
With the PBR code i pasted about i have tried all sorts of ways to do the following:
(1) install babylon. I have used various CDN methods and NPM. Ive had no luck at all using NPM. The CDN on Ch1 of the babylon getting started Code Model Setup is the only thing that works
(2) ive tried lots of different ways to import my sky.env file ive tried putting it in the public folder and using “./sky.env” and “…/sky.env”, ive also put it in the root folder and tried “/sky.env” or “./sky.env” or “…/sky.env”
(3) ive tried all the code from the follow areas of the babylon documentation and none of it works
Can you help me with an example which starts from scratch on how to install babylonjs and creates a PBR skybox using a HDR which can been created from polyhaven https://polyhaven.com/and the babylon IBL Babylon.js Texture Tools
Thanks in advance John
About the playground, I recommend you to take a look at the Playground documentation: Playground | Babylon.js Documentation (babylonjs.com). It goes through all the functionalities of it and how to best use it. What you’ll need to paste on it is not the entire HTML page, just your createFunction code.
For npm support, we also have this documentation page: NPM Support | Babylon.js Documentation (babylonjs.com) and Raanan’s amazing starter template: RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely. (github.com).
1 Like
Hi carolhjm i think i might have to start at the very basics. I have tried to follow the NPM documentation and nothing seems to work. and RaananW’s starter template seems to advanced for me. To install Babylonjs i have tried the following
CDN: This works (but i can seem to create a HDRI as a skybox using IBL
NPM–none of these (all together, or in any combination) work
npm install --save babylonjs
npm install @babylonjs/core --save
npm install --save babylonjs babylonjs-materials
npm install --save babylonjs babylonjs-loaders
In my HTML file:
I have also tried adding all of the below in various combinations
import { Engine } from “@babylonjs/core/Engines/engine”;
import { Scene } from “@babylonjs/core/scene”;
import { ArcRotateCamera } from “@babylonjs/core/Cameras/arcRotateCamera”;
import { Vector3 } from “@babylonjs/core/Maths/math.vector”;
import { HemisphericLight } from “@babylonjs/core/Lights/hemisphericLight”;
import { CreateSceneClass } from “…/createScene”;
import { SceneLoader } from “@babylonjs/core/Loading/sceneLoader”;
import { CubeTexture } from “@babylonjs/core/Materials/Textures/cubeTexture”;
import { EnvironmentHelper } from “@babylonjs/core/Helpers/environmentHelper”;
import “@babylonjs/core/Loading/loadingScreen”;
import “@babylonjs/loaders/glTF”;
import “@babylonjs/core/Materials/standardMaterial”;
import “@babylonjs/core/Materials/Textures/Loaders/envTextureLoader”;
Thanks again John
Checking in on the basics is always a good bet @syntheticmagus Dev story is also a great place to understand how to work with existing templates: Playground to Production - Fruit Fallin’ | Babylon.js Documentation (babylonjs.com)
Be careful with your NPM setup, because it is mixing UMD and ES6 versions. The UMD are the babylonjs, babylonjs-etc versions, and are an older style of organizing modules, while the ES6 are the @babylonjs/etc versions and are more modern and can benefit from some cool features The import statements you’re using are ONLY available on ES6.
You also need script type="module" in your HTML to use imports JavaScript modules - JavaScript | MDN (mozilla.org)
What HDR/env file are you trying to use anyway? Can you share it?
1 Like
Hello John, I’m actually the creator of that video, so glad to see it here. I’ve had intermittent issues with env files myself, where sometimes Babylon won’t recognize it.
A few things I wanted to mention as it might cause some confusion. I’m using Vue with Typescript in the video. It looks like you’re using straight HTML/CSS/JS which is fine, but that might be the cause of the problem.
I’ve put together this playground that has the env texture imported and used:
That background is a environment texture that originated from this HDRI: Christmas Photo Studio 01 HDRI • Poly Haven
I downloaded the HDR file from PolyHaven then used the IBL tool to convert it into an environment texture:
https://www.babylonjs.com/tools/ibl/
You’ll probably need to ensure that your project has been setup properly. I’d recommend following this from the docs: Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js Documentation
Hope that helps!
2 Likes
Thanks so much for your help with this jgonzosan and carolhmj i really appreciate this. I will check this out tonight/tomorrow and see how i go thanks again John
Hi everyone, i have tried all of the suggestions in the links above. I have discovered two problems:
(1) There doesnt seems to be any way to get babylon to work with NPM (i have tried the documentation, cloning various github repo’s. I am using a HTML file and importing inside tags. I can get the cdn from the babylon starter code to get a basic scene loaded but it doesnt allow for anything like a .env file to work
(2) ive tried everything and cant get the HDR .env file to load as a default sky box.
I cant work out what is going wrong. Any additional advice would be greatly appreciated
PS thanks so much for all the help so far also everyone
Thanks again John
@RaananW might be able to help on this front.
If you’re having trouble accessing the file within your folder structure you might want to upload it somewhere like Amazon S3 or Digital Ocean then try that. At least you can rule that out as causing the issue. You could also use the link in my playground for the environment file, it should still be valid for now.
Hey @John_Carlisle
That’s feels inaccurate? We have many people (me included) that pull babylon from npm. Looking at what you posted before, you seem to be mixing two different package-styles, and this might be the issue at hand?
Probably related to the first issue?
Would you be able to share the project on github? or anywhere else? I want to understand what you are doing exactly and where it went wrong.
Thanks!
1 Like
Thanks so much for helping me with this RaananW. I put my files here in this github repository.
Thanks again John
cc @RaananW
You can see what a basic (no JS framework) npm+webpack setup looks like in the space-truckers repository.
This repos also shows how to use an .env file with a skybox
HTH!
Ed: you may also find this flowchart handy
3 Likes
Hi @John_Carlisle ,
This would be rather hard trying to explain how to get that to work based on your project code.
In order to use babylon packages on the web (or most npm packages for that matter) you will need to use some sort of a packing mechanism (webpack, for example). You need to decide if you load the es6 packages (@babylonjs/) or the umd packages (babylonjs-) - you load both.
The code you provided is a node.js server code. You don’t need that really. What you need is a static web host like http-server on npm (http-server - npm), which is my personal favorite local static webserver.
There are a few examples how to achieve what you are trying to do. One of them is this repository -
@jelster also provided a wonderful example of how to get things to work. I hope those resources will provide a good starting point!
3 Likes